HR divider with Tailwind CSS-CodePudding

I want to create a <hr> divider using Tailwind CSS, but I can't find anything like this example in the documentation. Can someone help me? I'm a beginner in Tailwind CSS.

CodePudding user response：

You have to use css to use divider in tailwind.Other hand you also can use border property

CodePudding user response：

Try this instead...

<div class="relative">
    <div class="w-full border-t border-gray-300"></div>
</div>

CodePudding user response：

You can use this HTML syntax to create what you want :

<div class="relative flex py-5 items-center">
    <div class="flex-grow border-t border-gray-400"></div>
    <span class="flex-shrink mx-4 text-gray-400">Content</span>
    <div class="flex-grow border-t border-gray-400"></div>
</div>