Tailwind CSS

By using Tailwind CSS, you can easily create beautiful, professional buttons with text and icons inside. For the vast majority of use cases, we can do like so: <button class="flex space-x-2 items-center> <!-- use SVG, PNG,......

A striped table or a zebra striped table is a table whose odd and even rows have different background colors. This makes it easier for users to read as well as aesthetically pleasing. This succinct article shows you how to create a......

Shimmer loading placeholders are animated placeholders that simulate the layout of a website while data is being loaded. They create a sense of depth and immersion in the website and improve the perceived performance and user......

Parallax is an effect where the background content (e.g. an image) stays fixed or moves at a different speed than the foreground content while scrolling. With Tailwind CSS, we can create a parallax effect by using the bg-fixed utility to......

In Tailwind CSS, you can control the type and specify the position of a list by using the following utility classes: List type: list-disc: unordered list (the markers are bullets) list-decimal: ordered list (the markers are......

In Tailwind CSS, you can add an underline to text by using the underline utility. You can also control the offset (the distance between text and the line) of a text underline by using underline-offset-{option} classes. {option} can be:......

In Tailwind CSS, you can use the cursor-{style} utility to set the mouse cursor, if any, to show when the mouse pointer is over an element. Common styles of mouse cursors and corresponding classes are: auto: cursor-auto default:......

In Tailwind CSS, we can validate a form without writing any Javascript code. The main point here is to add the peer utility class to the input field we want to validate and then use the peer-invalid modifier to show an error message......

In CSS, we have the :first-of-type and :last-of-type selectors for targeting the first and the last elements among a group of sibling elements. In Tailwind CSS, the equivalents are the first-of-type and last-of-type modifiers,......

In the example below, we’ll use Tailwind CSS to create a typical user profile card with a circle avatar, name, title, and a link to the profile page. Screenshot: The code: <div class="flex bg-white drop-shadow-md......

In Tailwind CSS, we can use flex or grid utility class to create a layout with multiple columns sitting side by side (on the same rows) and all of the columns are equal in height. Example Screenshot: This code produces the......

In Tailwind CSS, you can style the placeholder text of an input field (or textarea) by using the placeholder modifier (a modifier is a prefix word that can be added to the beginning of a utility class) in combination with text utility......