Styling Figure & Figcaption with Tailwind CSS
In HTML, the <figure> tag is used to mark up an image while the <figcaption> tag (nests inside <figure>) displays the caption that describes the associated image. The…
Displaying Toast Messages with Tailwind CSS
The complete example below shows you how to create a toast, a kind of alert message that mimics the push notifications that have been popularized on mobile applications….
How to Create Frosted Glass Effect in Tailwind CSS
The frosted glass effect (glassmorphism) is a design trend that creates a frosted glass-like appearance on UI elements. It uses blurred, semi-transparent backgrounds with elements that seem to…
Tailwind CSS: How to place text over an image
This concise, practical article walks you through a few examples of placing text over an image by using Tailwind CSS. What is the Point? The key point of…
How to Style the HR Element with Tailwind CSS
An HTML <hr/> tag creates a horizontal ruler/line to separate sections of your webpage. In order to style an <hr> element, we can use border-* utility classes provided…
:fisrt-child and :last-child in Tailwind CSS
In Tailwind CSS, the equivalents of the :first-child and :last-child pseudo-classes of CSS are the first and last modifiers, respectively. You can use them to style the first/last…
Tailwind CSS: Align an element to the left/right of its parent
In Tailwind CSS, you can align a child element to the left or right side of its parent div by using the mr-auto or ml-auto utility class, respectively…
« Previous 1 2 3 4
