HTML & CSS

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

Updated: June 10, 2022 By: 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

Updated: June 10, 2022 By: 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)

Updated: June 10, 2022 By: 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

Updated: June 10, 2022 By: 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…

Tailwind CSS: How to set font size with an arbitrary value

Updated: June 10, 2022 By: Pennywise

Tailwind CSS provides utility classes for setting the font size of text with fixed values: text-xs, text-sm, text-base, text-lg, text-2xl, text-3xl, text-4xl, text-5xl, text-6xl, text-7xl, text-8xl, and text-9xl. However, you can use an arbitrary font size…

Tailwind CSS: How to Create a Hoverable Dropdown Menu

Updated: June 9, 2022 By: Pennywise

This concise article shows you how to create a hover dropdown menu with Tailwind CSS. No Javascript code is required. A dropdown menu is a toggleable menu that allows the user to select an option or…

Tailwind CSS: How to Create a Black-and-White Image

Updated: June 9, 2022 By: Pennywise

In Tailwind CSS, you can create a black-and-white image from a full-color image by adding the grayscale utility class to its parent (a <div> element is nice). To remove this effect dynamically (hover, active, etc), use…

How to Rotate an Element in Tailwind CSS

Updated: June 9, 2022 By: Pennywise

In Tailwind CSS, you can rotate an element by using rotate-{value} utility classes. At the time of writing, there are nine preset utility classes: rotate-0 rotate-1 rotate-2 rotate-3 rotate-6 rotate-12 rotate-45 rotate-90 rotate-180 However, you can…

Tailwind CSS: Use a Checkbox to Show/Hide an Element

Updated: June 9, 2022 By: Pennywise

This concise and straightforward article shows you how to check/uncheck a checkbox to show/hide another element. We’ll only use Tailwind CSS to get things done. No Javascript is required. What is the point? Tailwind CSS offers…

Tailwind CSS: Style an element that has no content

Updated: June 9, 2022 By: Pennywise

In Tailwind CSS, you can apply some styles for elements that have no content by using the empty modifier (a modifier is just a prefix for a utility class). Example This example displays some boxes. Boxes…

Tailwind CSS: Create a horizontal line with text in the middle

Updated: June 9, 2022 By: Pennywise

This concise article walks you through a couple of examples of creating horizontal lines with text in the middle. We’ll use the latest version of Tailwind CSS to style things. Example 1: Using Divs with a…

CSS: How to Center an Element with Fixed Position

Updated: June 7, 2022 By: A Goodman

There might be cases where you want to center an element whose position is fixed (e.g., you need to implement a modal dialog or a floating button, etc). 1. If you need to center the fixed…

1 2 3 4 5 8