How to Create Pill Buttons with Tailwind CSS

June 14, 2022 Pennywise

This concise, straightforward article shows you how to create pill buttons with Tailwind CSS. The most important point here is to use rounded-full utility classes to create rounded corners like pills. Screenshot: The code: Further reading:…

Tailwind CSS: How to Create a Stepper

June 14, 2022 Pennywise

When building modern websites, there may be cases where users have to complete several steps in a process (registration and authentication process, ordering and payment process, etc). To increase visibility and improve user experience, adding a…

Using :not() selector in Tailwind CSS (2022)

June 14, 2022 Pennywise

In CSS, you can use the :not() pseudo-class to style elements that do NOT match one or multiple specified elements/selectors. In Tailwind CSS 3.1 (released in June 2022) and newer, you can do the equivalent thing…

Full-Screen Search Box with Tailwind CSS

June 14, 2022 Pennywise

The example below shows you how to create a full-screen search box with Tailwind CSS and a few lines of vanilla Javascript (it’s totally fine if you don’t have much experience with this programming language). Example…

How to Style a Pagination with Tailwind CSS

June 14, 2022 Pennywise

The example below creates two types of pagination bars with Tailwind CSS. The first one is in the form of rectangles, while the second one is in the form of circles. Preview: The code: Further reading:…

How to Style Breadcrumb Navigation with Tailwind CSS

June 13, 2022 Pennywise

This example below creates a breadcrumb navigation bar with a common appearance. You can see it on many websites nowadays. Screenshot: The code: Further reading: Tailwind CSS: How to Create a Sticky Social Sharing Bar Tailwind…

Tailwind CSS: How to Create a Sticky Social Sharing Bar

June 12, 2022 Pennywise

This guide shows you how to implement a sticky vertical social sharing bar. We’ll use Tailwind CSS for styling elements and use some SVGs to display social icons so that we won’t need to use any…

Tailwind CSS: How to Create a Clickable Dropdown Menu

June 12, 2022 Pennywise

This short and straightforward guide shows you how to create a dropdown menu that can be opened or closed by mouse clicking (not mouse hovering). We’ll make it by using Tailwind CSS and a little vanilla…

Tailwind CSS: Create a Floating Input Label (Simplest Way)

June 10, 2022 Pennywise

A floating input label is a label that looks like a text placeholder when the associated input field is empty. As soon as you enter something into the input field, the label will move upwards. The…

Tailwind CSS: Create an Animated & Closable Side Menu

June 10, 2022 Pennywise

The example below shows you how to create an animated and closeable side navigation menu with Tailwind CSS and a little vanilla Javascript (just a few lines). Our side navigation works well on both large screens…

Text Overflow in Tailwind CSS (with Examples)

June 10, 2022 Pennywise

In Tailwind CSS, you can specify how hidden overflow text should be signaled to users by using the following utility classes: truncate: Truncate the overflow content and automatically add an ellipsis (…) as needed text-ellipsis: Display…

Tailwind CSS: How to Center a Fixed Element

June 10, 2022 Pennywise

This short and straight-to-the-point article shows you a couple of different ways to center an element whose position is set to fixed in Tailwind CSS. Using position and translating utilities 1. To center a fixed element…

1 2 3 4 5 10