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

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…

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…

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

In Tailwind CSS, you can control the type and specify the position of a list by using the following utility classes: You can also change the color of…

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

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…

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…

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…

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