Tailwind CSS: How to Create a Mega Menu

July 2, 2022 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

June 28, 2022 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

July 15, 2022 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: How to place text over an image

June 28, 2022 Pennywise

This succinct, practical article walks you through a few examples of placing text over an image by using Tailwind CSS. What is the Point? The key point of placing text on an image can be summed…

Tailwind CSS: Create Image Hover Overlay Effects

June 28, 2022 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

June 27, 2022 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

June 25, 2022 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

June 24, 2022 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)

June 24, 2022 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

June 20, 2022 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

June 20, 2022 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

June 20, 2022 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…

1 2 3 4 11