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 a <hr> element, we can use border-* utility classes provided by Tailwind CSS. Utilities in terms of size (width & height), margin, padding, and other utilities like bg-*, drop-shadow-*, cursor-*, etc, can also be used.
Let’s see the practical example below for more clarity.
Screenshot:
The code:
<body class="p-20 space-y-10">
<h2 class="text-xl italic">Welcome to KindaCode.com</h2>
<hr class="border-4 border-blue-500 cursor-pointer hover:border-red-500 duration-500" />
<p>Hello There</p>
<hr class="border-8 border-amber-500 hover:border-purple-500 drop-shadow-xl"/>
<hr class="w-96 h-12 bg-green-500 opacity-50" />
</body>Further reading:
- How to Create Product Cards with Tailwind CSS
- Tailwind CSS: How to Create a Vertical Divider Line
- Using Tailwind CSS with Font Awesome Icons: A Deep Dive
- Tailwind CSS: How to Create a Sticky Social Sharing Bar
- Tailwind CSS: How to Create a Clickable Dropdown Menu
- Text Overflow in Tailwind CSS (with Examples)
You can also check out our CSS category page for the latest tutorials and examples.
Subscribe
0 Comments
You May Also Like
