Search code examples
htmlcsstailwind-css

Creating a horizontal rule (HR) divider that contains text with Tailwind CSS

I want to create a <hr> divider using Tailwind CSS, but instead of the horizontal rule spanning the entire width of the page unbroken, I want to add some text in the middle.

For example:

----------------------------------- Continue -----------------------------

I can't find anything like this in the documentation. How can I achieve this effect?

If necessary, I can change the HTML to something other than an <hr> element. That was just the only way I knew how to create a horizontal rule.

Solution

  • 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>

    See here the result: https://play.tailwindcss.com/65JULZ5XES

    Edit: using HTML / CSS snippet below

    <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>

<script src="https://cdn.tailwindcss.com"></script>