50% off
Full Access from $99 $198. Every theme and every future release, one payment.
All tutorials
Build an interactive copy-to-clipboard utility that lets users edit the text, preview the result, and get instant feedback, all with Alpine.js reactivity and Tailwind CSS styling.
Build a complete ecommerce product page with image gallery, tabs, color/size selectors, and reviews using Alpine.js and Tailwind CSS.
Build an interactive image carousel with slide number counter using Alpine.js and Tailwind CSS. Learn how to create smooth transitions, navigate between images, and display slide indicators—perfect for portfolios, galleries, and hero sections.
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 horizontally on small screens instead of breaking the layout. Markup, overflow wrapper and cell styling explained.
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.