Tailwind CSS: How to Create a Mega Menu
A mega menu, as its name implies, is a very large menu with a full-screen width (or nearly so) and containing lots of links, often dropped down when the user hovers or clicks on an element…
Tailwind CSS: How to Create Blurred Background Image
The two examples below show you two different ways to create blurry background images with Tailwind CSS. Example 1 Screenshot: The code: We use the backdrop-blur-* utility class to create the blur effect. Example 2 Screenshot:…
How to Create a Hero Image with Tailwind CSS
On many modern websites, there are usually one or several hero images. These are large photos and often take up space at the top of the page. The purpose of hero images is to highlight the…
Tailwind CSS: Create Image Hover Overlay Effects
This succinct and straightforward article shows you how to create image hover overlay effects with Tailwind CSS. Full Example The GIF below depicts what we’re going to make. When we hover over the image, a curtain…
Tailwind CSS: How to style the Select element
In Tailwind CSS, you can style a <select> element in a nice way by making use of the official plugin called @tailwindcss/forms. To install the plugin, run the following command in the root directory of your…
Tailwind CSS: Create a Responsive Navbar with a Search Box
This tutorial walks you through a complete example of creating a typical responsive navigation menu bar with logo, links, and a search box inside. We’ll use Tailwind CSS, Font Awesome (to add some icons), and a…
Tailwind CSS: How to Create a Full-Screen Overlay Menu
A full-screen overlay menu has a fixed position as well as full-screen width and height. It stays over other elements of the webpage. However, a full-screen overlay menu is hidden by default and only shows up…
Tailwind CSS: Create a Floating Action Button (FAB)
A floating action button (FAB) is usually located in the lower right or left corner of the screen. It has a fixed position and has a larger z-index than other elements of the web page. Therefore,…
Tailwind CSS: How to Create an Off-Canvas Side Menu
An off-canvas menu is a side navigation menu that pushes the content to the right (or left, bottom, top directions) when it shows up (it doesn’t overlap or cover content). A user can open or close…
How to Create Toggleable Tabs with Tailwind CSS
Tabs help you organize groups of content that are related and at the same level of hierarchy without taking much space. This article walks you through a complete example of implementing toggleable and switchable tabs with…
Tailwind CSS: How to Create a Back To Top Button
This article walks you through a complete example that demonstrates how to create a back to top button with Tailwind CSS and a little vanilla Javascript (just a few lines). The purpose of this button is…
How to Create Product Cards with Tailwind CSS
The example below shows you how to create a modern product card with Tailwind CSS. It contains a product image, product name, offers and warranties, prices and promotions, a button to add to the shopping cart,…
