All tutorials
Build a copy-to-clipboard utility with Alpine.js and Tailwind CSS that lets users edit the text, preview it and get instant feedback.
Build a complete ecommerce product page with image gallery, tabs, color/size selectors, and reviews using Alpine.js and Tailwind CSS.
Build an image carousel with a slide number counter in Alpine.js and Tailwind CSS, with smooth transitions and navigation.
Build a confetti animation with Tailwind CSS and JavaScript using a canvas and a small Confetti class. Trigger it on a button click to celebrate user actions.
Build a simple typewriter text animation with Tailwind CSS and JavaScript: a small function types out a sentence character by character with setTimeout.
Build a reusable Astro button component with size and color variants, optional icons and class:list, styled with Tailwind CSS. Props and rest props explained.
Build a lazy-loading image gallery with Tailwind CSS and JavaScript: images are created and loaded with IntersectionObserver as they enter the viewport.
Build a music visualizer with Tailwind CSS and JavaScript using the Web Audio API and canvas: bars that react to an audio file in real time.
Build a before and after image comparison slider with Tailwind CSS and JavaScript: a draggable handle reveals the second image with clip-path.
Build a password strength meter with Tailwind CSS, two ways: vanilla JavaScript or Alpine.js. Live strength checks, a colored bar, and a visibility toggle.
Build accessible tabs with Tailwind CSS that remember the active tab in localStorage, two ways: vanilla JavaScript or Alpine.js.
Build a modal popup with only Tailwind CSS and a hidden checkbox, no JavaScript: peer-checked utilities toggle the overlay and dialog.
Build a responsive bento grid layout with Tailwind CSS using grid, col-span and row-span utilities. Every box explained, full markup included.
Keep the footer at the bottom of the page with Tailwind CSS using flex, min-h-screen and mt-auto, even when the page has little content.
Build a responsive three-column layout with Tailwind CSS: sidebar, main column and aside that stack on mobile using flex and grid utilities.
Build a responsive table with Tailwind CSS that scrolls sideways on small screens instead of breaking the layout.
Build an expanding search bar with Tailwind CSS only: the input grows on focus with transition utilities, no JavaScript needed.
Create an animated background gradient with Tailwind CSS only: layered gradients, blur and keyframe animation, no JavaScript. Copy-paste markup included.
Build an animated input field with a floating label using only Tailwind CSS peer and focus utilities. No JavaScript, full markup included.
Build an animated envelope that opens on hover with only Tailwind CSS: flaps, letter and stamp made with clip-path, transforms and transitions, no JavaScript.
Build a live search input with Tailwind CSS, two ways: vanilla JavaScript or Alpine.js. Filter a list of items as the user types, no extra libraries.
Build a bottom drawer that slides up from the bottom of the screen with Tailwind CSS, two ways: vanilla JavaScript class toggling or Alpine.js transitions.
Build an image gallery with a lightbox modal using Tailwind CSS, two ways: vanilla JavaScript or Alpine.js. Click a thumbnail to open, press Escape to close.
Build an animated progress bar with Tailwind CSS, two ways: vanilla JavaScript or Alpine.js. A timer fills the bar to 100% with a live percentage label.
Build a scroll to top button with Tailwind CSS, two ways: vanilla JavaScript or Alpine.js. It fades in after you scroll and smoothly returns to the top.
Build a tag input with Tailwind CSS where Enter adds a removable tag chip, two ways: vanilla JavaScript or Alpine.js with x-model and x-for.
Build a hover tooltip with Tailwind CSS, two ways: vanilla JavaScript with mouse events or Alpine.js with x-data and x-show.
Build an accessible, dismissible cookie banner with Tailwind CSS, two ways: vanilla JavaScript or Alpine.js, with focus management for keyboard users.
Build an accessible carousel with previous and next buttons using Tailwind CSS, two ways: vanilla JavaScript smooth scrolling or Alpine.js state in x-data.
Build a flyout menu (a dropdown) with Tailwind CSS, two ways: vanilla JavaScript class toggling or Alpine.js with x-show and smooth transitions.
Build a chat bubble that toggles from a floating button with Tailwind CSS, two ways: vanilla JavaScript class toggling or Alpine.js transitions.
Build an add to cart component with Tailwind CSS, two ways: vanilla JavaScript or Alpine.js. Add items, manage quantities, and watch the total update.
Animate images as they scroll into view with Tailwind CSS and the Intersection Observer API, two ways: vanilla JavaScript or the Alpine.js Intersect plugin.
Build a five-star rating system with Tailwind CSS, two ways: vanilla JavaScript or Alpine.js. Click to rate, click again to clear, with a live label.
Build a login form with client-side validation using Tailwind CSS, two ways: vanilla JavaScript or Alpine.js. Email check, password rules, show/hide toggle.
Build a pricing slider with Tailwind CSS, two ways: vanilla JavaScript or Alpine.js. Drag to pick pageviews and the price updates instantly.
Build a countdown timer with Tailwind CSS, two ways: vanilla JavaScript or Alpine.js. Days, hours, minutes and seconds ticking down to your end date.
Build a grid layout toggle with Tailwind CSS, two ways: vanilla JavaScript or Alpine.js. One button switches the container between two and four columns.
Build a drag and drop list with Tailwind CSS and Sortable.js: reorder items between columns with a few lines of JavaScript.
Build vertical tabs with Tailwind CSS and JavaScript: a side list of buttons that shows and hides content panels by toggling the hidden class.
Build a dark mode toggle with Tailwind's dark variant, two ways: a few lines of vanilla JavaScript or an Alpine.js x-data binding.
Build a TODO app with Tailwind CSS that saves tasks to localStorage, two ways: vanilla JavaScript or Alpine.js with x-data and x-for.
Change the header and section background colors on scroll with Tailwind CSS, two ways: a vanilla JavaScript scroll listener or Alpine.js with @scroll.window.
Build an interactive testimonial slider with Astro and Tailwind CSS, two ways: vanilla JavaScript or Alpine.js, switching quotes with avatar buttons.
Build a sidebar navigation with Tailwind CSS, two ways: vanilla JavaScript with a backdrop and Escape key, or Alpine.js with sliding transitions.
Build a multistep form wizard with Tailwind CSS, two ways: vanilla JavaScript or Alpine.js. Step navigation, saved form data, and a confirmation step.
Build an expand-and-collapse accordion with Tailwind CSS, two ways: vanilla JavaScript with class toggles or Alpine.js with x-show.
Change the navigation bar background and add a blur on scroll with Tailwind CSS and vanilla JavaScript using a scroll listener and classList toggles.
Build a tab component with Tailwind CSS and Alpine.js: active tab state with x-data, panels with x-show and accessible tab buttons.
Build an animated login modal with Tailwind CSS and Alpine.js: slide-up transition, overlay, focus handling and x-data state explained step by step.