How to Creating Horizontal Rule Divider with Text in Tailwind CSS ?
Last Updated :
25 Jul, 2023
In this article, we will understand how to create a horizontal rule (HR) divider that contains text with Tailwind CSS. The problem here is that in an HR, there is no text, & only a divider is visible, and there is no default method to add text in Tailwind CSS. Tailwind CSS is a highly customizable, utility-first CSS framework that provides a collection of pre-built utility classes.
The approach which can be used here is using the Utility classes of the Tailwind CSS, especially flexbox container and flex options. The utility classes, which cover everything from spacing and typography to colors and flexbox, enable quick creation by applying specified styles directly in the HTML markup. Without having to start from scratch when developing custom CSS, Tailwind CSS allows you to swiftly construct intricate layouts and styles.
Approach: Here, we are using the utility classes provided by Tailwind CSS. Starting with adding the “flex-grow” class to the <hr> tag. After that sandwich a <span> element between two <hr> tags with class as mentioned before. After this, the whole configuration that is the <hr> tags and the <span> tags are enclosed inside a <div> with class “flex” as flex-items.
Prerequisite: Tailwind CSS Flex Grow, Tailwind CSS Flex
Syntax:
<div class="flex items-center">
<hr class="flex-grow">
<span class="">Enter your text here</span>
<hr class="flex-grow">
</div>
Tailwind CSS Utility Classes
- flex: This class is used to set an element’s display to flex or a div into a flexbox.
- flex-grow: This class enables an element to take all the space given to it and doesn’t restrict the growth of the flexbox with respect to the space available.
Example 1: The code below demonstrates how we can use the method given above to create a horizontal rule that contains the text.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Horizontal Rule Divider with
Text - Tailwind CSS
</title>
<link href=
rel="stylesheet">
</head>
<body>
<p class="text-4xl text-green-700 font-bold ml-3">
GeeksforGeeks
</p>
<p class="text-xl font-semibold ml-3 my-2">
Creating a horizontal rule (HR) divider
that contains text with Tailwind CSS
</p>
<div class="flex items-center">
<hr class="flex-grow border-t border-gray-300">
<span class="px-3 text-gray-500">
This is the text inserted between a HR
</span>
<hr class="flex-grow border-t border-gray-300">
</div>
</body>
</html>
|
Output:
Example 2: The code example demonstrates how we can add multiple HR dividers with text on the same HTML page and give different colors to them.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Horizontal Rule Divider with
Text - Tailwind CSS
</title>
<link href=
rel="stylesheet">
</head>
<body>
<p class="text-4xl text-green-700 font-bold ml-3">
GeeksforGeeks
</p>
<p class="text-xl font-semibold ml-3 my-2">
Creating a horizontal rule (HR) divider
that contains text with Tailwind CSS
</p>
<div class="flex items-center">
<hr class="flex-grow border-t border-green-300">
<span class="px-3 text-green-500">
This HR divider after header
</span>
<hr class="flex-grow border-t border-green-300">
</div>
<img src=
class="ml-5"
alt="gfg_img">
<div class="flex items-center">
<hr class="flex-grow border-t border-blue-300">
<span class="px-3 text-blue-500">
This HR divider after content
</span>
<hr class="flex-grow border-t border-blue-300">
</div>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...