HTML & CSS

Tailwind CSS: How to Create a Mega Menu

Updated: July 2, 2022 By: Pennywise

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

Updated: June 28, 2022 By: Pennywise

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

Updated: July 15, 2022 By: Pennywise

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

Updated: June 28, 2022 By: Pennywise

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

Updated: June 27, 2022 By: Pennywise

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

Updated: June 25, 2022 By: Pennywise

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

Updated: June 13, 2023 By: Pennywise

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)

Updated: June 24, 2022 By: Pennywise

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

Updated: June 20, 2022 By: Pennywise

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

Updated: June 20, 2022 By: Pennywise

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

Updated: June 20, 2022 By: Pennywise

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

Updated: June 17, 2022 By: Pennywise

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,…

1 2 3 4 10