HTML & CSS

This article shows you how to make loading indicators with only pure Tailwind CSS. There is no need to use SVGs, GIFs, or any kinds of icons. The most important point is that in Tailwind CSS,…

In Tailwind CSS, You can combine the file modifier (a modifier is just a prefix that can be added to the beginning of a class) with other utility classes to create a custom beautiful file input,…

The example below shows you how to create a full-height fixed sidebar with Tailwind CSS. We will be using fixed and top-0 (optional) and left-0 (optional) utility classes for the sidebar. Besides, in order to prevent…

This concise article shows you how to create a sticky/affix navigation bar with only Tailwind CSS (no Javascript code or any extra CSS is required). Overview In general, the position of a sticky navbar is relative…

In Tailwind CSS, you can create drop shadows by using drop-shadow-{amount} utilities. {amount} can be: You can customize the shadow color by using shadow-{color} utilities. Example: Screenshot: Further reading: You can also check out our CSS…

In Tailwind CSS, you can easily implement a fixed top NavBar by using the fixed and z-index utilities, like so: Here’s a full example: Note: If you’re using Safari, this demo video might not work nicely…

The steps below show you how to create a cut-out text effect with Tailwind CSS. 1. Prepare HTML markup: 2. Set an image background for the div element. We can do this by using inline styles…

The quick example below shows you how to create gradient text with TailwindCSS. Screenshot: The code: Further reading: You can also check out our CSS category page for the latest tutorials and examples.

To create a circle button with TailwindCSS, first, create a button with equal width and height (square), then use the rounded-full utility like this: Screenshot: Further reading: You can also check out our CSS category page…

In TailwindCSS, you can implement color linear gradients by using bg-gradient-{direction}, from-{color}. via-{color}, and to-{color} utilities. The quick example below creates a button with a gradient background. Screenshot: The code: That’s it. Further reading: You can…

This short and straight-to-the-point article shows you how to vertically and horizontally center an element inside a <div> element with TailwindCSS. Center an Element Vertically To vertically center an element, just use Tailwind’s flex and items-center…

The example below shows you how to create flipping card animation with pure CSS. Example Preview HTML CSS The Complete Code Final Words We’ve examined an end-to-end example of implementing a flipping card effect using pure…