Tutorials

Build it, step by step.

Practical, copy-pasteable guides for components and patterns — Astro, Tailwind CSS, Alpine.js, and vanilla JavaScript.

119 tutorials

How to a create a color picker with Tailwind CSS and JavaScript

Read tutorial → JavaScript

How to a create a scroll progress bar with Tailwind CSS and Javascript

Read tutorial → Alpine.js

How to add items to your cart with Tailwind CSS and Alpinejs

Read tutorial → JavaScript

How to add items to your cart with Tailwind CSS and JavaScript

Read tutorial → JavaScript

How to animate objects on scroll with Tailwind CSS and the JavaScript intersection observer API

Read tutorial → Alpine.js

How to animate objects with Tailwind CSS and Alpinejs intersection observer

Read tutorial → JavaScript

How to build a custom video player with Tailwind CSS and JavaScript

Read tutorial → JavaScript

How to build a lazy-loading image gallery with Tailwind CSS and JavaScript

Read tutorial → Alpine.js

How to change background color on scroll with Tailwind CSS and Alpinejs

Read tutorial → JavaScript

How to change background color on scroll with Tailwind CSS and JavaScript

Read tutorial → Alpine.js

How to creat a contextual menu with Tailwind CSS and Alpinejs

Read tutorial → Tailwind CSS

How to create a 3D Button Tailwind CSS

Read tutorial → JavaScript

How to create a basic drawing tool and save to PNG with Tailwind CSS and JavaScript

Read tutorial → JavaScript

How to create a basic Kanban board with Tailwind CSS and JavaScript

Read tutorial → JavaScript

How to create a basic music visualizer with Tailwind CSS and JavaScript

Read tutorial → Alpine.js

How to create a bottom drawer with Tailwind CSS and Alpinejs

Read tutorial → JavaScript

How to create a bottom drawer with Tailwind CSS and JavaScript

Read tutorial → Tailwind CSS

How to create a bottom navigation with Tailwind CSS

Read tutorial → JavaScript

How to create a bubble animation with Tailwind CSS and JavaScript

Read tutorial → JavaScript

How to create a button component with variants and icons with Astro JS and Tailwind CSS

Read tutorial → Tailwind CSS

How to create a calendar layout with Tailwind CSS

Read tutorial → Tailwind CSS

How to create a card with animated background with Tailwind CSS

Read tutorial → Alpine.js

How to create a carousel with Tailwind CSS and Alpinejs

Read tutorial → Alpine.js

How to create a chat bubble with Tailwind CSS and Alpinejs

Read tutorial → JavaScript

How to create a chat bubble with Tailwind CSS and JavaScript

Read tutorial → JavaScript

How to create a circular menu with Tailwind CSS and JavaScript

Read tutorial → JavaScript

How to create a combo box with Tailwind CSS and Javascript

Read tutorial → JavaScript

How to create a confetti animation effect using Tailwind CSS and JavaScript

Read tutorial → Alpine.js

How to create a countdown with Tailwind CSS and Alpinejs

Read tutorial → JavaScript

How to create a countdown with Tailwind CSS and JavaScript

Read tutorial → Alpine.js

How to create a dark mode toggle with Tailwind CSS and Alpinejs

Read tutorial → JavaScript

How to create a dark mode toggle with Tailwind CSS and JavaScript

Read tutorial → Alpine.js

How to create a dismissible cookie banner with Tailwind CSS and Alpinejs

Read tutorial → JavaScript

How to create a dismissible cookie banner with Tailwind CSS and JavaScript

Read tutorial → JavaScript

How to create a drag and drop with Tailwind CSS and JavaScript

Read tutorial → Astro

How to create a dynamic feature grid with Astrojs and Tailwind CSS

Read tutorial → Alpine.js

How to create a dynamic multiple step form with Tailwind CSS and Alpine JS

Read tutorial → Alpine.js

How to create a flyout menu with Astrojs, Tailwind CSS and Alpinejs

Read tutorial → Tailwind CSS

How to create a flyout menu with submenu using only Tailwind CSS

Read tutorial → JavaScript

How to create a flyout menu with Tailwind CSS and JavaScript

Read tutorial → Alpine.js

How to create a grid toggle with Tailwind CSS and Alpinejs

Read tutorial → Alpine.js

How to create a image gallery with Tailwind CSS and Alpinejs

Read tutorial → JavaScript

How to create a image gallery with Tailwind CSS and JavaScript

Read tutorial → JavaScript

How to create a JavaScript-Free animated accordion FAQ section with only Tailwind CSS

Read tutorial → JavaScript

How to create a JavaScript-Free dismissible notification with only Tailwind CSS

Read tutorial → JavaScript

How to create a JavaScript-free modal popup with only Tailwind CSS

Read tutorial → JavaScript

How to create a layout switcher with Tailwind CSS and JavaScript

Read tutorial → Alpine.js

How to create a Login/Register Form with Tailwind CSS and Alpinejs

Read tutorial → JavaScript

How to create a Login/Register Form with Tailwind CSS and JavaScript

Read tutorial → JavaScript

How to create a masonry grid layout with Tailwind CSS and JavaScript

Read tutorial → Tailwind CSS

How to create a multi column layout Tailwind CSS

Read tutorial → Alpine.js

How to create a multistep form with Tailwind CSS and Alpinejs

Read tutorial → JavaScript

How to create a multistep form with Tailwind CSS and JavaScript

Read tutorial → JavaScript

How to create a particle text effect with Tailwind CSS and JavaScript

Read tutorial → Alpine.js

How to create a password strength meter with Tailwind CSS and Alpine JS

Read tutorial → JavaScript

How to create a password strength meter with Tailwind CSS and JavaScript

Read tutorial → Alpine.js

How to create a pricing slider with Tailwind CSS and Alpinejs

Read tutorial → JavaScript

How to create a pricing slider with Tailwind CSS and JavaScript

Read tutorial → Alpine.js

How to create a product details page with Tailwind CSS and Alpine.js

Read tutorial → Alpine.js

How to create a progress-bar with Tailwind CSS and Alpinejs

Read tutorial → JavaScript

How to create a progress-bar with Tailwind CSS and JavaScript

Read tutorial → Alpine.js

How to create a rating system with Tailwind CSS and Alpinejs

Read tutorial → JavaScript

How to create a rating system with Tailwind CSS and JavaScript

Read tutorial → Tailwind CSS

How to create a responsive bento grid with Tailwind CSS

Read tutorial → Tailwind CSS

How to create a responsive multi-column layout with Tailwind CSS

Read tutorial → Tailwind CSS

How to create a responsive table with Tailwind CSS

Read tutorial → Tailwind CSS

How to create a ribbon for a pricing card with Tailwind CSS

Read tutorial → Alpine.js

How to create a scroll to top button with Tailwind CSS and Alpinejs

Read tutorial → JavaScript

How to create a scroll to top button with Tailwind CSS and JavaScript

Read tutorial → Alpine.js

How to create a search input with Tailwind CSS and Alpinejs

Read tutorial → JavaScript

How to create a search input with Tailwind CSS and JavaScript

Read tutorial → Alpine.js

How to create a set of tabs with Tailwind CSS and Alpinejs

Read tutorial → Alpine.js

How to create a sidebar navigation with Astro, Tailwind CSS and Alpine.js

Read tutorial → JavaScript

How to create a sidebar navigation with Astro, Tailwind CSS and JavaScript

Read tutorial → Alpine.js

How to create a simple copy to clipboard component with Tailwind CSS and Alpine.js

Read tutorial → JavaScript

How to create a skeleton loading screen with Tailwind CSS and Javascript

Read tutorial → Tailwind CSS

How to create a sticky changelog component with Tailwind CSS

Read tutorial → Tailwind CSS

How to create a swatch clock with Tailwind CSS

Read tutorial → Alpine.js

How to create a tag input with Tailwind CSS and Alpinejs

Read tutorial → JavaScript

How to create a tag input with Tailwind CSS and JavaScript

Read tutorial → JavaScript

How to create a testimonial carousel with Tailwind CSS and JavaScript

Read tutorial → Alpine.js

How to create a TODO with Tailwind CSS and Alpinejs

Read tutorial → JavaScript

How to create a TODO with Tailwind CSS and JavaScript

Read tutorial → Alpine.js

How to create a tooltip with Tailwind CSS and Alpinejs

Read tutorial → JavaScript

How to create a tooltip with Tailwind CSS and JavaScript

Read tutorial → JavaScript

How to create a typewriter effect text animation with Tailwind CSS and JavaScript

Read tutorial → JavaScript

How to create a typography component with variants with Astro JS and Tailwind CSS

Read tutorial → JavaScript

How to create a virtual keyboard with Tailwind CSS and JavaScript

Read tutorial → Tailwind CSS

How to create aloader with Tailwind CSS

Read tutorial → Alpine.js

How to create an accordion with Tailwind CSS and Alpinejs

Read tutorial → JavaScript

How to create an accordion with Tailwind CSS and JavaScript

Read tutorial → Alpine.js

How to create an adaptable navigation on scroll with Astro, Tailwind CSS, and Alpine.js

Read tutorial → Tailwind CSS

How to create an animated avatar stack widget with Tailwind CSS

Read tutorial → Tailwind CSS

How to create an animated background gradient with Tailwind CSS

Read tutorial → Tailwind CSS

How to create an animated envelope with Tailwind CSS

Read tutorial → Tailwind CSS

How to create an animated expanding search bar with Tailwind CSS

Read tutorial → Tailwind CSS

How to create an animated input field with Tailwind CSS

Read tutorial → Alpine.js

How to create an animated log in modal with Tailwind CSS and Alpine.js

Read tutorial → JavaScript

How to create an animated navigation on scroll with Tailwind CSS and JavaScript

Read tutorial → Tailwind CSS

How to create an animated profile card with Tailwind CSS

Read tutorial → Tailwind CSS

How to create an animated toggle with Tailwind CSS

Read tutorial → Tailwind CSS

How to create an expandable image gallery with Tailwind CSS

Read tutorial → Alpine.js

How to Create an Image Carousel with Slide Number Counter Using Tailwind CSS and Alpine.js

Read tutorial → JavaScript

How to create an image comparison slider with Tailwind CSS and JavaScript

Read tutorial → JavaScript

How to Create an interactive color-shifting hover card with Tailwind CSS and JavaScript

Read tutorial → Alpine.js

How to create an interactive pricing table with Astro, Tailwind CSS, and Alpine.js

Read tutorial → JavaScript

How to create an interactive pricing table with Tailwind CSS and JavaScript

Read tutorial → Alpine.js

How to create an interactive testimonial with Astrojs, Tailwind CSS and Alpine.js

Read tutorial → JavaScript

How to create an interactive testimonial with Astrojs, Tailwind CSS and JavaScript

Read tutorial → Astro

How to create and print an invoice with Astrojs and Tailwind CSS

Read tutorial → Astro

How to create animated blog cards with Astrojs and Tailwind CSS

Read tutorial → Astro

How to create animated image cards with Tailwind CSS and Astrojs

Read tutorial → JavaScript

How to create infinite scrolling with Tailwind CSS and JavaScript

Read tutorial → Tailwind CSS

How to create interactive and accessible content with the details element

Read tutorial → Alpine.js

How to create persistent tabs with Tailwind CSS and Alpine JS

Read tutorial → JavaScript

How to create persistent tabs with Tailwind CSS and JavaScript

Read tutorial → JavaScript

How to create vertical tabs with Tailwind CSS and JavaScript

Read tutorial → Tailwind CSS

How to keep your footer at the bottom of the page with Tailwind CSS

Read tutorial → Astro

How to simplify your code and avoid repeating your markup with Astrojs and Tailwind CSS

Read tutorial →