Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

Tailwind CSS Tip ✨ You can create a floating input form with Tailwind CSS using ":placeholder-shown" pseudo class. Live Demo & Code 👇 (8/30) follow for 22 more tips 🔔

Surjith S M ✪

10,214 subscribers

173,081 Aufrufe • vor 3 Jahren •via X (Twitter)

Bildung Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔

Surjith S M ✪

203,353 Aufrufe • vor 3 Jahren

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔

Surjith S M ✪

140,209 Aufrufe • vor 3 Jahren

Did you know? ✨ You can create an animated toggle switch in Tailwind CSS using ":checked" pseudo property. View Code 👇 (9/30) follow for 21 more tips 🔔

Did you know? ✨ You can create an animated toggle switch in Tailwind CSS using ":checked" pseudo property. View Code 👇 (9/30) follow for 21 more tips 🔔

Surjith S M ✪

57,984 Aufrufe • vor 3 Jahren

Skewed infinite carousel w/ vignette effect ✨ Built entirely with Tailwind CSS – zero JavaScript required. Live demo & code 👇

Skewed infinite carousel w/ vignette effect ✨ Built entirely with Tailwind CSS – zero JavaScript required. Live demo & code 👇

Steven Tey

472,799 Aufrufe • vor 2 Jahren

Tailwind Tweak #6 Learn how to do custom form validation with Tailwind CSS, no JavaScript required. 🪄 Code: Don't forget to follow for daily tweaks!🫶🏻

Tailwind Tweak #6 Learn how to do custom form validation with Tailwind CSS, no JavaScript required. 🪄 Code: Don't forget to follow for daily tweaks!🫶🏻

Namya @ Supafast

57,317 Aufrufe • vor 3 Jahren

💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.

💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.

CSS by T. Afif

25,194 Aufrufe • vor 1 Jahr

✨ Build Next.js, Tailwind CSS & shadcn UIs with a visual editor. Export the code with one click. Link below.

✨ Build Next.js, Tailwind CSS & shadcn UIs with a visual editor. Export the code with one click. Link below.

Mattia

107,119 Aufrufe • vor 1 Jahr

3D Landing Page Template (Source Code - Free)! built with - Next.js - Tailwind CSS - Three.js - GSAP A lightweight, visually impactful 3D Demo + Source Code (Free) : 1st comment 👇

3D Landing Page Template (Source Code - Free)! built with - Next.js - Tailwind CSS - Three.js - GSAP A lightweight, visually impactful 3D Demo + Source Code (Free) : 1st comment 👇

Mohamed Djoudir

49,049 Aufrufe • vor 6 Monaten

UI && CSS Tip! 🚀 You can use View Transitions to create that Radix by WorkOS style theme switcher 👀 ::view-transition-new(root) { animation: reveal;} keyframes reveal { 0% { clip-path: polygon(...);} /* Code 👇 */ } Animate clip-path between modes 😍 CodePen.IO link below! 👇

UI && CSS Tip! 🚀 You can use View Transitions to create that Radix by WorkOS style theme switcher 👀 ::view-transition-new(root) { animation: reveal;} keyframes reveal { 0% { clip-path: polygon(...);} /* Code 👇 */ } Animate clip-path between modes 😍 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

232,919 Aufrufe • vor 2 Jahren

💡CSS techniques: "The Backlight" Using a blur filter you can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works:

💡CSS techniques: "The Backlight" Using a blur filter you can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works:

bolt.new

369,230 Aufrufe • vor 1 Jahr

This one CSS property will fix your z-index headache. In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️

This one CSS property will fix your z-index headache. In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️

Ali

16,738 Aufrufe • vor 2 Monaten

Planning your trip to Japan? We create a free personalized travel itinerary just for you — exactly like this. Designed by locals, with hidden gems you won’t find in guidebooks. Follow for more Japan travel tips & hidden gems!

Planning your trip to Japan? We create a free personalized travel itinerary just for you — exactly like this. Designed by locals, with hidden gems you won’t find in guidebooks. Follow for more Japan travel tips & hidden gems!

KODAI GO ｜Explore Japan Like a Local

261,217 Aufrufe • vor 10 Monaten

I wanted to create a broken glass effect with WebGL for a long time! Here it is: interactive, lightweight (around 10KB of GLSL + vanilla JS), and easy to customise (find more controls on codepen) Live demo & source code: Hosted on CodePen.IO

I wanted to create a broken glass effect with WebGL for a long time! Here it is: interactive, lightweight (around 10KB of GLSL + vanilla JS), and easy to customise (find more controls on codepen) Live demo & source code: Hosted on CodePen.IO

Ksenia Kondrashova

43,624 Aufrufe • vor 1 Jahr

📐Design Systems and DESIGN.md Consistency using Design Systems and DESIGN.md: ✨ Every new design automatically starts with a cohesive design system which GREATLY improves consistency (we heard you!) ✨ Edit the system, and all associated screens can be easily updated ✨ You can extract a design system from any URL ✨ Use DESIGN.md to export your design rules or import your design rules from other products (just ask your agent to create you a DESIGN.md file from your code or other context) ✨ You can start a new design by choosing from popular design systems ✨ Read more about DESIGN.md in the docs (link in thread)

📐Design Systems and DESIGN.md Consistency using Design Systems and DESIGN.md: ✨ Every new design automatically starts with a cohesive design system which GREATLY improves consistency (we heard you!) ✨ Edit the system, and all associated screens can be easily updated ✨ You can extract a design system from any URL ✨ Use DESIGN.md to export your design rules or import your design rules from other products (just ask your agent to create you a DESIGN.md file from your code or other context) ✨ You can start a new design by choosing from popular design systems ✨ Read more about DESIGN.md in the docs (link in thread)

Stitch by Google

219,087 Aufrufe • vor 4 Monaten

$Hold up, here is the prompt: works with almost any model. enjoy :) Role & Objective: Act as an Elite UI/UX Front-End Engineer specializing in Apple-tier micro-interactions and advanced CSS. Your task is to program a perfectly centered navigation bar in a strictly SINGLE HTML file containing all HTML, vanilla CSS, and vanilla JavaScript. No external libraries or frameworks (No Tailwind, React, etc.). Design Concept - "True Liquid Glass": CRITICAL INSTRUCTION: Do NOT generate standard, flat "glassmorphism" or basic frosted glass. I require a physically accurate "Liquid Glass" aesthetic. It must look like wet, poured clear resin, combining the high-gloss specular highlights of classic macOS Aqua with the volumetric spatial depth of modern Apple VisionOS. 1. The Liquid Glass Material & Lighting (CSS): - Deep Refraction: Use `backdrop-filter` with extreme blur (e.g., 50px) and over-saturation (200%). - Specular Highlight: Create a curved, semi-transparent white gradient on the top half using a pseudo-element (`::before`) to simulate a hard light reflection on a wet, rounded 3D surface. - Caustics & Volume: Use multi-layered inner and outer `box-shadow` properties to simulate light refracting at the bottom edge and casting a realistic ambient drop shadow. - Interactive Glare: Implement a soft radial-gradient spotlight inside the glass that dynamically tracks the user's mouse cursor (X/Y coordinates) using JavaScript and CSS variables (`mix-blend-mode: overlay`). 2. Navigation Layout & Elements: - Center the pill-shaped navigation bar perfectly in the middle of the viewport. - Include 3 main navigation items with minimalist, inline SVG stroke icons and text labels: "Home", "Call", and "List". - Add a subtle vertical divider line after the main buttons. - Next to the divider, add a Dark/Light Mode toggle button containing inline SVG Sun and Moon icons. 3. Animations & "Apple Magic": - Sliding Active Pill: Create a solid background "pill" that sits *behind* the active navigation item's text/icon. When a different item is clicked, this pill must dynamically recalculate its width and slide to the new position. - Spring Physics: The sliding transition MUST use an exact Apple-style bouncy spring easing curve (e.g., `transition: all 0.5s cubic-bezier(0.34, 1.2, 0.64, 1)`). - Tactile Feedback: Buttons and icons must physically press down slightly (`transform: scale(0.92)`) when clicked (`:active`). - Theme Switch: The Sun and Moon icons must smoothly rotate, scale, and cross-fade during the transition. 4. Background Environment (Crucial): - Glass needs light and color to refract! Create a full-viewport, smoothly animated mesh gradient background using 3 large, heavily blurred, floating color blobs. - Implement full Dark/Light mode logic using CSS variables (`:root` and `[data-theme="dark"]`). Toggling the theme must seamlessly transition the background blob colors, glass opacity, shadow intensity, and text colors. Output ONLY the pristine, production-ready code. Prioritize maximum visual fidelity and silky-smooth 60fps animations.$

Hold up, here is the prompt: works with almost any model. enjoy :) Role & Objective: Act as an Elite UI/UX Front-End Engineer specializing in Apple-tier micro-interactions and advanced CSS. Your task is to program a perfectly centered navigation bar in a strictly SINGLE HTML file containing all HTML, vanilla CSS, and vanilla JavaScript. No external libraries or frameworks (No Tailwind, React, etc.). Design Concept - "True Liquid Glass": CRITICAL INSTRUCTION: Do NOT generate standard, flat "glassmorphism" or basic frosted glass. I require a physically accurate "Liquid Glass" aesthetic. It must look like wet, poured clear resin, combining the high-gloss specular highlights of classic macOS Aqua with the volumetric spatial depth of modern Apple VisionOS. 1. The Liquid Glass Material & Lighting (CSS): - Deep Refraction: Use `backdrop-filter` with extreme blur (e.g., 50px) and over-saturation (200%). - Specular Highlight: Create a curved, semi-transparent white gradient on the top half using a pseudo-element (`::before`) to simulate a hard light reflection on a wet, rounded 3D surface. - Caustics & Volume: Use multi-layered inner and outer `box-shadow` properties to simulate light refracting at the bottom edge and casting a realistic ambient drop shadow. - Interactive Glare: Implement a soft radial-gradient spotlight inside the glass that dynamically tracks the user's mouse cursor (X/Y coordinates) using JavaScript and CSS variables (`mix-blend-mode: overlay`). 2. Navigation Layout & Elements: - Center the pill-shaped navigation bar perfectly in the middle of the viewport. - Include 3 main navigation items with minimalist, inline SVG stroke icons and text labels: "Home", "Call", and "List". - Add a subtle vertical divider line after the main buttons. - Next to the divider, add a Dark/Light Mode toggle button containing inline SVG Sun and Moon icons. 3. Animations & "Apple Magic": - Sliding Active Pill: Create a solid background "pill" that sits behind the active navigation item's text/icon. When a different item is clicked, this pill must dynamically recalculate its width and slide to the new position. - Spring Physics: The sliding transition MUST use an exact Apple-style bouncy spring easing curve (e.g., `transition: all 0.5s cubic-bezier(0.34, 1.2, 0.64, 1)`). - Tactile Feedback: Buttons and icons must physically press down slightly (`transform: scale(0.92)`) when clicked (`:active`). - Theme Switch: The Sun and Moon icons must smoothly rotate, scale, and cross-fade during the transition. 4. Background Environment (Crucial): - Glass needs light and color to refract! Create a full-viewport, smoothly animated mesh gradient background using 3 large, heavily blurred, floating color blobs. - Implement full Dark/Light mode logic using CSS variables (`:root` and `[data-theme="dark"]`). Toggling the theme must seamlessly transition the background blob colors, glass opacity, shadow intensity, and text colors. Output ONLY the pristine, production-ready code. Prioritize maximum visual fidelity and silky-smooth 60fps animations.

Leon Lin

127,732 Aufrufe • vor 4 Monaten

3 ways to earn on base using mini apps 🟦 tips: noice get tipped any erc20 token when users interact with your post Tipn active users get an allowance of different base tokens which they can tip you by commenting under your post + there is staking option Hunt Town users can tip you by commenting a 👏 on your post + recieve monthly rewards for tipping others games: BETRMINT by BETR Labs if you're lucky you can win tokens by minting daily content and spinning the betrmint wheel + there is staking option buy, open and trade cards created by artists which contain NFTs of different values builders.garden 🌳 farville a cosy farm game where you can earn weekly bounties: Pics for proof earn by completing dare-like tasks and posting it Pods earn from clipping podcasts $QR earn from visiting the winning qr code each day bookmark and follow me for more!

3 ways to earn on base using mini apps 🟦 tips: noice get tipped any erc20 token when users interact with your post Tipn active users get an allowance of different base tokens which they can tip you by commenting under your post + there is staking option Hunt Town users can tip you by commenting a 👏 on your post + recieve monthly rewards for tipping others games: BETRMINT by BETR Labs if you're lucky you can win tokens by minting daily content and spinning the betrmint wheel + there is staking option buy, open and trade cards created by artists which contain NFTs of different values builders.garden 🌳 farville a cosy farm game where you can earn weekly bounties: Pics for proof earn by completing dare-like tasks and posting it Pods earn from clipping podcasts $QR earn from visiting the winning qr code each day bookmark and follow me for more!

Naomi Metzger

24,016 Aufrufe • vor 10 Monaten

This simple trick will make your Livewire apps 10x faster with zero JavaScript 🏎️💨 Whenever you have a selectable element, you might be tempted to write something like this in your classes: {{ $selected ? ‘bg-blue-500’ : ‘’ }} This is very slow, that class will only get added when the server responds. Instead, use an input element with wire:model on it, and add the following class to its parent: has-checked:bg-blue-500 Now the element reacts instantly and doesn’t wait for the server, unlike the first solution. This alone makes your app feel A LOT faster because it gives the user immediate feedback that something happened, even if the page updates 100ms later after the server responds. You can use this trick with various form elements, toggles, checkboxes, etc. Code below 👇

This simple trick will make your Livewire apps 10x faster with zero JavaScript 🏎️💨 Whenever you have a selectable element, you might be tempted to write something like this in your classes: {{ $selected ? ‘bg-blue-500’ : ‘’ }} This is very slow, that class will only get added when the server responds. Instead, use an input element with wire:model on it, and add the following class to its parent: has-checked:bg-blue-500 Now the element reacts instantly and doesn’t wait for the server, unlike the first solution. This alone makes your app feel A LOT faster because it gives the user immediate feedback that something happened, even if the page updates 100ms later after the server responds. You can use this trick with various form elements, toggles, checkboxes, etc. Code below 👇

Filip Ganyicz

26,010 Aufrufe • vor 11 Monaten

DEMO IS LIVE! Create your Agents, chat, ask questions, and get ready to tokenize them soon. Negotiate with our businessman and grab some cool stuff 👀 What’s the AI Agent Layer? 👇 It’s a dynamic ecosystem of autonomous AI agents. On the platform, you can create AI Agents using data from X and user inputs. Coming soon: Each AI Agent will be tokenized and linked to our native token ($AIFUN). Once the bonding curve reaches 100%, tokens become tradable on DEX. Stay Tuned for our TGE 👆

DEMO IS LIVE! Create your Agents, chat, ask questions, and get ready to tokenize them soon. Negotiate with our businessman and grab some cool stuff 👀 What’s the AI Agent Layer? 👇 It’s a dynamic ecosystem of autonomous AI agents. On the platform, you can create AI Agents using data from X and user inputs. Coming soon: Each AI Agent will be tokenized and linked to our native token ($AIFUN). Once the bonding curve reaches 100%, tokens become tradable on DEX. Stay Tuned for our TGE 👆

AI Agent Layer | AIFUN

73,622 Aufrufe • vor 1 Jahr

This week, we are excited to announce that our testnet, HelixVM, is now live! Even more thrilling, the first native application is ready for you to explore today! 🎉 Introducing the Nuklai Wallet a wallet where you can CREATE, TRANSFER, and OWN tokens, all with just one simple click, all powered by $NAI🪙 So, who’s ready to spin up the first token using the Nuklai Wallet? 🔥 Start here:

This week, we are excited to announce that our testnet, HelixVM, is now live! Even more thrilling, the first native application is ready for you to explore today! 🎉 Introducing the Nuklai Wallet a wallet where you can CREATE, TRANSFER, and OWN tokens, all with just one simple click, all powered by $NAI🪙 So, who’s ready to spin up the first token using the Nuklai Wallet? 🔥 Start here:

Nuklai

113,816 Aufrufe • vor 1 Jahr

🎮✨ Loot Legends Closed Beta is now LIVE! If you are approved for closed beta through a partner community or campaign you can now install Loot Legends through the APK for Android or TestFlight for Apple. Here’s everything you need to know 👇 Check your beta access status in our Discord. Visit the appropriate link based on your device type. Create or log-in to your HYPLAY account using your approved email address. Android APK: iOS TestFlight: 🎁 Raffle winners from Pre-registration Winners have been selected via raffle from pre-registration. You can check the status of your beta access in the Discord. Please follow the Android and iOS instructions accordingly. 📨 Invite Codes Stay on the lookout 🔔 for closed beta invite codes. Use codes in the LL Discord to get access to play! Join our community on Discord to read the Closed Beta FAQ’s, get additional help, request access codes for your community and more: 🤔 Questions or need assistance? Our DMs are open, and we're eager to help you get set up. Let’s make this beta a legendary success together!

🎮✨ Loot Legends Closed Beta is now LIVE! If you are approved for closed beta through a partner community or campaign you can now install Loot Legends through the APK for Android or TestFlight for Apple. Here’s everything you need to know 👇 Check your beta access status in our Discord. Visit the appropriate link based on your device type. Create or log-in to your HYPLAY account using your approved email address. Android APK: iOS TestFlight: 🎁 Raffle winners from Pre-registration Winners have been selected via raffle from pre-registration. You can check the status of your beta access in the Discord. Please follow the Android and iOS instructions accordingly. 📨 Invite Codes Stay on the lookout 🔔 for closed beta invite codes. Use codes in the LL Discord to get access to play! Join our community on Discord to read the Closed Beta FAQ’s, get additional help, request access codes for your community and more: 🤔 Questions or need assistance? Our DMs are open, and we're eager to help you get set up. Let’s make this beta a legendary success together!

Loot Legends: Rogue Dungeons

29,143 Aufrufe • vor 1 Jahr