All Tutorials Templates Components

Tutorials made with Astro, JavaScript, Alpine JS and Tailwind CSS

This collection offers a range of code snippets tailored for Astro, JavaScript, Alpine JS and Tailwind CSS projects.

Tailwind & JS

Tutorials made with Tailwind & JS

How to create an interactive pricing table with Astro, Tailwind CSS, and JavaScript: 50.
How to create an animated navigation with Astro, Tailwind CSS, and JavaScript: 49.
How to create a sidebar with Tailwind CSS and JavaScript: 48.
How to animate objects with Tailwind CSS and JavaScript intersection observer API: 47.
How to create an interactive testimonial with Astrojs, Tailwind CSS and JavaScript: 46.
How to create a flyout menu with Astrojs, Tailwind CSS and JavaScript: 45.
How to a create a scroll progress bar with Tailwind CSS and Javascript: 44.
How to create a dismissible cookie banner with Tailwind CSS and JavaScript: 43.
How to create a tooltip Tailwind CSS and JavaScript: 42.
How to change background on scroll with Tailwind CSS and JavaScript: 41.
How to create vertical tabs with Tailwind CSS and JavaScript: 40.
How to create a dark mode toggle with Tailwind CSS and JavaScript: 39.
How to create a tag input with Tailwind CSS and JavaScript: 38.
How to create a Login/Register Form with Tailwind CSS and JavaScript: 37.
How to create a progress-bar with Tailwind CSS and JavaScript: 36.
How to create a rating system with Tailwind CSS and JavaScript: 35.
How to create an accordion with Astro, Tailwind CSS, and JavaScript: 34.
How to create a image gallery with Tailwind CSS and JavaScript: 33.
How to create a scroll to top with Tailwind CSS and JavaScript: 32.
How to create a todo list with Tailwind CSS and JavaScript: 31.
How to create a pricing slider with Tailwind CSS and JavaScript: 30.
How to create a countdown with Tailwind CSS and JavaScript: 29.
How to create a bottom drawer with Tailwind CSS and JavaScript: 28.
How to create a multistep form with Tailwind CSS and JavaScript: 27.
How to create a grid toggle with Tailwind CSS and JavaScript: 26.
How to create a testimonial carousel with Tailwind CSS and JavaScript: 25.
How to create a search input with Tailwind CSS and JavaScript: 24.
How to add items to your cart with Tailwind CSS and JavaScript': 23.
How to create a drag and drop with Tailwind CSS and JavaScript: 22.
How to a create a chat bubble with Tailwind CSS and JavaScript: 21.
How to a create a color picker with Tailwind CSS and JavaScript: 20.
How to create infinite scrolling with Tailwind CSS and JavaScript: 19.
How to a create persistent tabs with Tailwind CSS and JavaScript: 18.
How to create a password strength meter with Tailwind CSS and Javascript: 17.
How to create an image comparison slider with Tailwind CSS and Javascript: 16.
How to create a skeleton loading screen with Tailwind CSS and Javascript: 15.
How to create a basic drawing tool and save it to png with Tailwind CSS and JavaScript: 14.
How to create a basic command box with Tailwind CSS and JavaScript: 13.
How to create a basic basic kanban board with Tailwind CSS and JavaScript: 12.
How to create a music visualizer with Tailwind CSS and JavaScript: 11.
How to build a lazy-loading image gallery with Tailwind CSS and JavaScript: 10.
How to build a virtual keyboard with Tailwind CSS and JavaScript: 09.
How to build a custom video player with Tailwind CSS and JavaScript: 08.
How to create a typewriter effect text animation with Tailwind CSS and JavaScript: 07.
How to create a confetti animation effect using Tailwind CSS and minimal JavaScript: 06.
How to create a circular menu with Tailwind CSS and minimal JavaScript: 05.
How to create a particle text effect with Tailwind CSS and JavaScript: 04.
How to create a masonry grid layout with Tailwind CSS and JavaScript: 03.
How to create a bubble animation with Tailwind CSS and JavaScript: 02.
How to Create an interactive color-shifting hover card with Tailwind CSS and JavaScript: 01.

Tailwind & Alpine

Tutorials made with Tailwind & Alpine

How to create an interactive pricing table with Astro, Tailwind CSS, and Alpine JS: 33.
How to create adaptable-navigation with Astro, Tailwind CSS, and Alpine JS: 32.
How to create a sidebar navigation Tailwind CSS and and Alpine JS: 31.
How to animate objects with Tailwind CSS and Alpinejs intersection observer: 30.
How to create an animated log in modal with Tailwind CSS and Alpine JS: 29.
How to create an interactive testimonial with Astrojs, Tailwind CSS and Alpine JS: 28.
How to create a flyout menu with Astrojs, Tailwind CSS and Alpinejs: 27.
How to create a dismissible cookie banner with Tailwind CSS and Alpinejs: 26.
How to create a tooltip Tailwind CSS and Alpinejs: 25.
How to change background on scroll with Tailwind CSS and Alpinejs: 24.
How to create a set of tabs with Tailwind CSS and Alpinejs: 23.
How to create a dark mode toggle with Tailwind CSS and Alpinejs: 22.
How to create a tag input with Tailwind CSS and Alpinejs: 21.
How to create a Login/Register Form with Tailwind CSS and Alpinejs: 20.
How to create a progress-bar with Tailwind CSS and Alpinejs: 19.
How to create a rating system with Tailwind CSS and Alpinejs: 18.
How to create an accordion with Tailwind CSS and Alpinejs: 17.
How to create a image gallery with Tailwind CSS and Alpinejs: 16.
How to create a scroll to top with Tailwind CSS and Alpinejs: 15.
How to create a todo list with Tailwind CSS and Alpinejs: 14.
How to create a pricing slider with Tailwind CSS and Alpinejs: 13.
How to create a countdown with Tailwind CSS and Alpinejs: 12.
How to create a bottom drawer with Tailwind CSS and Alpinejs: 11.
How to create a multistep form with Tailwind CSS and Alpinejs: 10.
How to create a grid toggle with Tailwind CSS and Alpinejs: 09.
How to create a testimonial carousel with Tailwind CSS and Alpinejs: 08.
How to create a search input with Tailwind CSS and Alpinejs: 07.
How to add items to your cart with Tailwind CSS and Alpinejs: 06.
How to creat a contextual menu with Tailwind CSS and Alpinejs: 05.
How to a create a chat bubble with Tailwind CSS and Alpinejs: 04.
How to a create persistent tabs with Tailwind CSS and Alpinejs: 03.
How to create a password strength meter with Tailwind CSS and Alpine JS: 02.
How to create a dynamic multiple step form with Tailwind CSS and Alpine JS: 01.

Plain Tailwind CSS

Tutorials made with Plain Tailwind CSS

How to create animated image cards with Tailwind CSS and Astrojs: 29.
How to create a dynamic feature grid with Astrojs and Tailwind CSS: 28.
How to create a sticky changelog component with Tailwind CSS and Astrojs: 27.
How to create a multicolumn layout with Tailwind CSS: 26.
How to create and print an invoice with Astrojs and Tailwind CSS: 25.
How to creating animated blog cards with Astrojs and Tailwind CSS: 24.
How to simplify your code and avoid repeating your markup with Astrojs and Tailwind CSS: 23.
How to create a 3d button with Tailwind CSS: 22.
How to create a expandable image gallery with Tailwind CSS: 21.
How to create a swatch clock with Tailwind CSS: 20.
How to create a card with animated background with Tailwind CSS: 19.
How to create an animated loader with Tailwind CSS: 18.
How to create an animated envelope with Tailwind CSS: 17.
How to create an animated profile card with Tailwind CSS: 16.
How to create an animated input with Tailwind CSS: 15.
How to create an animated toggle with Tailwind CSS: 14.
How to create an animated background gradient with Tailwind CSS: 13.
How to create an animated expanding search bar with Tailwind CSS: 12.
How to create a bottom navigation with Tailwind CSS: 11.
How to create a ribbon for a pricing card with Tailwind CSS: 10.
How to create an animated avatar stack widget with Tailwind CSS: 09.
How to create a responsive table with Tailwind CSS: 08.
How to create a responsive multi-column layout with Tailwind CSS: 07.
How to create a calendar layout with Tailwind CSS: 06.
How to create a sticky footer with Tailwind CSS: 05.
How to create a bento grid with Tailwind CSS: 04.
How to create a JavaScript-free modal popup with only Tailwind CSS: 03.
How to create a JavaScript-Free dismissible notification with only Tailwind CSS: 02.
How to create a JavaScript-Free animated accordion faq section with only Tailwind CSS: 01.

Astro

Tutorials made with Astro

How to create a button component with variants and icons with Astro JS and Tailwind CSS: 02.
How to create a typography component with variants with Astro JS and Tailwind CSS: 01.

Go to homepage Lexington Themes

Premium multipage themes crafted with Astro and Tailwind CSS

Navigation

All tutorials

Socials

@lexingtonthemes
@Mike_Andreuzza