Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?

surjithctly's profile picture

Surjith S M ✪

10,263 subscribers

169,676 görüntüleme • 3 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

Tailwind Tip #5 ✨ You can use ":invalid" pseudo class to create a pure css Tailwind CSS form validation without javascript. View code 👇 (5/30) follow for 25 more tips 😊
0:24

Tailwind Tip #5 ✨ You can use ":invalid" pseudo class to create a pure css Tailwind CSS form validation without javascript. View code 👇 (5/30) follow for 25 more tips 😊

Surjith S M ✪

169,272 görüntüleme • 3 yıl önce

Here's a fun concept - Filtering tags made with only pure #CSS (with no #javascript at all) using the :has selector 👍 Here's the CodePen.IO:
0:45

Here's a fun concept - Filtering tags made with only pure #CSS (with no #javascript at all) using the :has selector 👍 Here's the CodePen.IO:

AdirCode

66,369 görüntüleme • 3 yıl önce

This week, Gabriel Perales 🤓 and I worked together on a tool for Tailwind CSS users. The tool lets you easily create grids for your Tailwind CSS projects, perfect for generating bento-style grids! It supports Tailwind CSS v3/v4 —
1:08

This week, Gabriel Perales 🤓 and I worked together on a tool for Tailwind CSS users. The tool lets you easily create grids for your Tailwind CSS projects, perfect for generating bento-style grids! It supports Tailwind CSS v3/v4 —

Michael Andreuzza

69,278 görüntüleme • 1 yıl önce

Introducing Whenua - Open source - Accessible UI components for Astro & Tailwind CSS - Light and dark mode - Copy them, customize them, make them yours - No dependencies, no lock-in - Fully customizable npx whenua init →
1:32

Introducing Whenua - Open source - Accessible UI components for Astro & Tailwind CSS - Light and dark mode - Copy them, customize them, make them yours - No dependencies, no lock-in - Fully customizable npx whenua init →

Michael Andreuzza

22,635 görüntüleme • 4 ay önce

v0 now supports tailwind configs and globals.css files — you can now use custom utility classes and CSS variables in your generations.
0:23

v0 now supports tailwind configs and globals.css files — you can now use custom utility classes and CSS variables in your generations.

v0

76,013 görüntüleme • 1 yıl önce

i built an entire x86 CPU emulator in CSS (no javascript) you can write programs in C, compile them to x86 machine code with GCC, and run them inside CSS
0:59

i built an entire x86 CPU emulator in CSS (no javascript) you can write programs in C, compile them to x86 machine code with GCC, and run them inside CSS

Rebane

1,073,118 görüntüleme • 3 ay önce

Here is how I made the ✨shiny✨ hover effect using Tailwind CSS.
2:40

Here is how I made the ✨shiny✨ hover effect using Tailwind CSS.

Alfon

71,117 görüntüleme • 1 yıl önce

Using Tailwind, Panda, StyleX or any other Atomic CSS library? You are going to want to install this Chrome Extension right now
2:00

Using Tailwind, Panda, StyleX or any other Atomic CSS library? You are going to want to install this Chrome Extension right now

Wes Bos

90,063 görüntüleme • 1 yıl önce

Nice little weekend project - Pure #CSS Pixar lamp. 💡 All of the axes movement is set using custom properties, so the motion can be easily animated with property. 😎 Live demo and full code CodePen.IO:
0:28

Nice little weekend project - Pure #CSS Pixar lamp. 💡 All of the axes movement is set using custom properties, so the motion can be easily animated with property. 😎 Live demo and full code CodePen.IO:

Amit Sheen

14,440 görüntüleme • 1 yıl önce

😎👋As promised, I've recreated it on @codepen ✨ I loved making it & animating the gradients🌈 Using: - CSS keyframes ✅ - CSS custom properties ✅ - CSS variables ✅ - NO JS ❌ Link: CrossBrowser incoming ➡️ #css #FrontEndDev
0:26

😎👋As promised, I've recreated it on @codepen ✨ I loved making it & animating the gradients🌈 Using: - CSS keyframes ✅ - CSS custom properties ✅ - CSS variables ✅ - NO JS ❌ Link: CrossBrowser incoming ➡️ #css #FrontEndDev

Luky - A$AP Luky

103,204 görüntüleme • 3 yıl önce

FINALLY!!! Built this Exclusive Fully Responsive Animated Multifunctional Portfolio Website with Light/Dark mode using HTML, CSS & Javascript How's it? Drop your comments 😊 SOURCE CODE 👇
1:34

FINALLY!!! Built this Exclusive Fully Responsive Animated Multifunctional Portfolio Website with Light/Dark mode using HTML, CSS & Javascript How's it? Drop your comments 😊 SOURCE CODE 👇

Raja - impeccify.com 🚀

192,258 görüntüleme • 3 yıl önce

I made a plugin that turns figma designs to code using Claude AI Works with HTML, CSS, Tailwind, SwiftUI, Flutter, etc. This is production level code and you can enter custom prompts like "make it functional" or "add hover states". Oh and it's free. You can use your api keys.
0:37

I made a plugin that turns figma designs to code using Claude AI Works with HTML, CSS, Tailwind, SwiftUI, Flutter, etc. This is production level code and you can enter custom prompts like "make it functional" or "add hover states". Oh and it's free. You can use your api keys.

Meng To

220,472 görüntüleme • 1 yıl önce

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!
0:20

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!

Rebane

127,118 görüntüleme • 1 yıl önce

we've literally been flying blind until now $ interpreter --vision > Recreate this component in Tailwind CSS (this is realtime)
0:30

we've literally been flying blind until now $ interpreter --vision > Recreate this component in Tailwind CSS (this is realtime)

killian

780,793 görüntüleme • 2 yıl önce

with a tiny bit of JavaScript enhancement take that CSS driven slider and give it "that little bounce™" - use pointer-events to calculate an overdrag - map that overdrag to a CSS custom property --stretch - apply style - profit 💀
0:25

with a tiny bit of JavaScript enhancement take that CSS driven slider and give it "that little bounce™" - use pointer-events to calculate an overdrag - map that overdrag to a CSS custom property --stretch - apply style - profit 💀

jhey ʕ•ᴥ•ʔ

196,528 görüntüleme • 1 yıl önce

Struggling to make your UI stand out? CSSnippets – A collection of modern, reusable UI components! ✨Ready-to-use with HTML, CSS, React & Tailwind CSS ✨No frameworks, just pure CSS ✨Clean, minimal, and beautiful 🔗 Explore now: Save it for later! 🔖
2:08

Struggling to make your UI stand out? CSSnippets – A collection of modern, reusable UI components! ✨Ready-to-use with HTML, CSS, React & Tailwind CSS ✨No frameworks, just pure CSS ✨Clean, minimal, and beautiful 🔗 Explore now: Save it for later! 🔖

Shefali

22,953 görüntüleme • 1 yıl önce

Making a beautiful card effects with HTML & CSS No JavaScript ❌ CodePen 👇
0:35

Making a beautiful card effects with HTML & CSS No JavaScript ❌ CodePen 👇

Ali Reza

103,241 görüntüleme • 3 yıl önce

I designed and built this simple landing page from scratch using HTML, CSS, and JavaScript. Unto the next chapter REACT 💪
0:41

I designed and built this simple landing page from scratch using HTML, CSS, and JavaScript. Unto the next chapter REACT 💪

Benita Mbulu

14,430 görüntüleme • 5 ay önce

Every React app needs this CSS property 👀
1:11

Every React app needs this CSS property 👀

Ben Holmes

63,564 görüntüleme • 8 ay önce