Michael Andreuzzamichaelandreuzza.hashnode.dev·Dec 20, 2024Learn how to create a chat bubble with Tailwind CSS and Alpine JSWhat is a chat bubble? A chat or contact bubble is a small interface element, often at the bottom-right of a screen, labeled “Chat,” “Help,” or “Contact.” It allows users to send messages and serves various purposes, including customer support, sales...Tailwind CSS Tutorial
Michael Andreuzzamichaelandreuzza.hashnode.dev·Dec 19, 2024Learn how to create a grid toggle with Tailwind CSS and Alpine JSLet’s build a super useful grid toggle with Tailwind CSS and Alpinejs. What is a grid toggle? A grid toggle is a user interface component that allows switching between different grid layouts, such as two or four columns, to organize and display conte...alpinejs
Michael Andreuzzamichaelandreuzza.hashnode.dev·Dec 17, 2024Learn how to create a pricing slider with Tailwind CSS and Alpine JSToday we’re building a pricing slider using Tailwind CSS and Alpine.js for your pricing page. What is a Pricing Slider? A pricing slider allows users to select a price range, making it easier for them to choose the right plan or option. It’s useful f...Tailwind CSS Tutorial
Michael Andreuzzamichaelandreuzza.hashnode.dev·Dec 16, 2024Learn how to create a image gallery with Tailwind CSS and Alpine JSWant to display a collection of images in a gallery? This tutorial covers that. What are image galleries? Image galleries showcase collections of images in an organized, visually appealing way, often used for products, services, events, blogs, and mo...Tailwind CSS Tutorial
Michael Andreuzzamichaelandreuzza.hashnode.dev·Dec 15, 2024Learn how to create a Login/Register Form with Tailwind CSS and Alpine JSLet's build a form! Authentication forms verify user identities and enhance security. Common methods include passwords, multi-factor authentication, social logins, SSO, biometrics, magic links, CAPTCHA, OAuth, and token-based systems. Let's build a f...Tailwind CSS
Michael Andreuzzamichaelandreuzza.hashnode.dev·Dec 14, 2024Learn how to create a tag input with Tailwind CSS and Alpine JSLet's create a tag input! Tag inputs are a simple, versatile tool for adding and managing tags in user interfaces. Commonly used in applications like social media, they allow users to label content and can be customized to fit specific needs. Beyond ...Tailwind CSS
Michael Andreuzzamichaelandreuzza.hashnode.dev·Dec 12, 2024Learn how to change background color on scroll with Tailwind CSS and Alpine JSThis tutorial explains how to use Alpine.js and Tailwind CSS to make interactive features, like changing the background color of a header or sections as the user scrolls. These methods help improve the overall experience and make the site more engagi...Tailwind CSS
Michael Andreuzzamichaelandreuzza.hashnode.dev·Dec 11, 2024Learn how to create a dismissible cookie banner with Tailwind CSS and Alpine JSCookies, here we go! Today, we're tackling a project that's become an essential feature for websites... Why are cookie banners important? Cookie banners aren't just a compliance checkbox—they play a critical role in shaping the user experience on any...Tailwind CSS
Michael Andreuzzamichaelandreuzza.hashnode.dev·Dec 10, 2024Learn how to create a flyout menu with Tailwind CSS and Alpine JSDropdown menus are a great way to keep your interface clean and interactive. In this quick guide, we’ll use Alpine.js to build a simple flyout menu. With Alpine’s reactive and easy-to-use syntax, you can set up a fully functional dropdown in no time....Tailwind CSS
Michael Andreuzzamichaelandreuzza.hashnode.dev·Dec 9, 2024Learn how to create an interactive testimonial with Tailwind CSS and Alpine JSLet’s create an engaging testimonial using Tailwind CSS and Alpine JS! Build a dynamic, interactive testimonial section that combines the styling power of Tailwind CSS, and the interactivity of Alpine JS, all while ensuring a smooth and customizable ...Tailwind CSS
