Short Tutorials for HTML, Tailwind, Astro JS, Alpine JS and JavaScript

Free, open-source guides to help you build cool components with Astro JS, Alpine JS, JavaScript, and Tailwind CSS.

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

Tue Nov 05

How to create a bubble animation with Tailwind CSS and JavaScript

Mon Nov 04

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

Wed Oct 30

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

Mon Oct 28

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

Mon Oct 21

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

Thu Oct 10

How to create a circular menu with Tailwind CSS and JavaScript

Wed Oct 09

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

Tue Oct 08

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

Mon Oct 07

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

Wed Oct 02

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

Thu Sep 26

How to create a virtual keyboard with Tailwind CSS and JavaScript

Sun Sep 22

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

Fri Sep 20

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

Wed Sep 18

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

Mon Sep 16

How to create a combo box with Tailwind CSS and Javascript

Fri Sep 13

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

Wed Sep 11

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

Mon Sep 09

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

Fri Sep 06

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

Wed Sep 04

How to create persistent tabs with Tailwind CSS and JavaScript

Mon Sep 02

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

Fri Aug 30

How to create persistent tabs with Tailwind CSS and Alpine JS

Thu Aug 29

How to create infinite scrolling with Tailwind CSS and JavaScript

Tue Aug 27

How to create interactive and accessible content with the details element

Mon Aug 19

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

Wed Aug 14

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

Tue Aug 13

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

Mon Aug 12

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

Sun Aug 11

How to create a responsive bento grid with Tailwind CSS

Sat Aug 10

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

Thu Aug 08

How to create a calendar layout with Tailwind CSS

Wed Aug 07

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

Tue Aug 06

How to create a responsive table with Tailwind CSS

Mon Aug 05

How to create an animated avatar stack widget with Tailwind CSS

Sun Aug 04

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

Fri Aug 02

How to create a bottom navigation with Tailwind CSS

Thu Aug 01

How to create an animated expanding search bar with Tailwind CSS

Wed Jul 31

How to create an animated background gradient with Tailwind CSS

Mon Jul 29

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

Thu Jul 25

How to create an animated toggle with Tailwind CSS

Fri Jul 12

How to create an animated input field with Tailwind CSS

Tue Jul 09

How to create an animated profile card with Tailwind CSS

Mon Jul 08

How to create an animated envelope with Tailwind CSS

Thu Jul 04

How to create aloader with Tailwind CSS

Tue Jul 02

How to create a card with animated background with Tailwind CSS

Fri Jun 28

How to create a search input with Tailwind CSS and JavaScript

Wed Jun 26

How to create a bottom drawer with Tailwind CSS and JavaScript

Tue Jun 25

How to create a image gallery with Tailwind CSS and JavaScript

Mon Jun 24

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

Sun Jun 23

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

Thu Jun 13

How to create a tag input with Tailwind CSS and JavaScript

Wed Jun 12

How to create a tooltip with Tailwind CSS and JavaScript

Tue Jun 11

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

Mon Jun 10

How to create a testimonial carousel with Tailwind CSS and JavaScript

Sun Jun 09

How to create a flyout menu with Tailwind CSS and JavaScript

Fri Jun 07

How to create a chat bubble with Tailwind CSS and JavaScript

Thu Jun 06

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

Wed Jun 05

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

Mon Jun 03

How to create a swatch clock with Tailwind CSS

Sat Jun 01

How to create a rating system with Tailwind CSS and JavaScript

Fri May 31

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

Thu May 30

How to create a pricing slider with Tailwind CSS and JavaScript

Wed May 29

How to create a countdown with Tailwind CSS and JavaScript

Tue May 28

How to create an expandable image gallery with Tailwind CSS

Mon May 27

How to create a layout switcher with Tailwind CSS and JavaScript

Fri May 24

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

Thu May 23

How to create vertical tabs with Tailwind CSS and JavaScript

Thu May 23

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

Tue May 21

How to create a TODO with Tailwind CSS and JavaScript

Mon May 20

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

Sun May 19

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

Sat May 18

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

Fri May 17

How to create a multistep form with Tailwind CSS and JavaScript

Thu May 16

How to create an accordion with Tailwind CSS and JavaScript

Wed May 15

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

Tue May 14

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

Mon May 13

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

Sat May 11

How to create a chat bubble with Tailwind CSS and Alpinejs

Fri May 10

How to create a 3D Button Tailwind CSS

Thu May 09

How to creat a contextual menu with Tailwind CSS and Alpinejs

Wed May 08

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

Tue May 07

How to create a search input with Tailwind CSS and Alpinejs

Fri May 03

How to create a carousel with Tailwind CSS and Alpinejs

Thu May 02

How to create a grid toggle with Tailwind CSS and Alpinejs

Wed May 01

How to create a multistep form with Tailwind CSS and Alpinejs

Tue Apr 30

How to create a bottom drawer with Tailwind CSS and Alpinejs

Wed Apr 24

How to create a countdown with Tailwind CSS and Alpinejs

Tue Apr 23

How to create a pricing slider with Tailwind CSS and Alpinejs

Mon Apr 22

How to create a TODO with Tailwind CSS and Alpinejs

Fri Apr 19

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

Thu Apr 18

How to create a image gallery with Tailwind CSS and Alpinejs

Wed Apr 17

How to create an accordion with Tailwind CSS and Alpinejs

Tue Apr 16

How to create a rating system with Tailwind CSS and Alpinejs

Mon Apr 15

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

Fri Apr 12

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

Thu Apr 11

How to create a tag input with Tailwind CSS and Alpinejs

Wed Apr 10

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

Tue Apr 09

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

Mon Apr 08

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

Thu Mar 28

How to create animated blog cards with Astrojs and Tailwind CSS

Mon Mar 25

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

Fri Mar 15

How to create a tooltip with Tailwind CSS and Alpinejs

Thu Mar 14

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

Wed Mar 13

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

Mon Mar 11

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

Fri Mar 08

How to create a multi column layout Tailwind CSS

Thu Mar 07

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

Wed Mar 06

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

Tue Mar 05

How to create a sticky changelog component with Tailwind CSS

Mon Mar 04

How to animate objects with Tailwind CSS and Alpinejs intersection observer

Fri Mar 01

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

Fri Mar 01

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

Wed Feb 28

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

Tue Feb 27

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

Mon Feb 26

How to create animated image cards with Tailwind CSS and Astrojs

Tue Feb 20

Jaydan Urwin

jaydanurw.in

"If you're interested in @astrodotbuild or already using it make sure you check out @lexingtonthemes from @Mike_Andreuzza. It's seriously one of the best resources out there for great sites built with Astro."
Rohit

SDE Intern @MercedesBenzInd

"Just checked it out and these themes & UI kits are really value for money!"

Read all reviews

Unlock all themes for $199 and own them forever! Includes lifetime updates, new themes, unlimited projects, and support

Get the bundle