Divider Variants Using Tailwind UI

A Divider created with Tailwind provides a clean and structured way to separate content, improving visual organization and readability.
dividers
Loading component...
index.html
154 lines
<section class="justify-center w-screen my-16 space-y-12">
  <div class="flex items-center justify-center gap-2">
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>
    <div class="w-px h-2 bg-green-500"></div>


  </div>

  <div class="flex items-center justify-center gap-2">
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
    <span class="w-2 h-px bg-green-500 rounded-full"></span>
  </div>

  <div class="flex items-center justify-center gap-2">
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
    <span class="w-1 h-1 bg-green-500 rounded-full"></span>
  </div>

  <div class="flex items-center justify-center gap-2">
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
  </div>

  <div class="flex items-center justify-center gap-2">
    <span class="w-4 h-1 bg-green-500"></span>
    <span class="w-48 h-1 bg-green-500"></span>
    <span class="w-4 h-1 bg-green-500"></span>
  </div>

  <div class="flex items-center justify-center gap-2">
    <span class="w-1 h-1 bg-green-500"></span>
    <span class="w-4 h-1 bg-green-500"></span>
    <span class="w-48 h-1 bg-green-500"></span>
    <span class="w-4 h-1 bg-green-500"></span>
    <span class="w-1 h-1 bg-green-500"></span>
  </div>

  <div class="flex items-center justify-center gap-2">
    <span class="w-24 h-1 bg-green-500"></span>
    <span class="w-4 h-1 bg-green-500"></span>
    <span class="w-24 h-1 bg-green-500"></span>
  </div>

  <div>
    <hr class="h-1 mx-auto mb-1 bg-green-500 border-none w-52" />
    <hr class="h-1 mx-auto mb-10 bg-green-500 border-none w-52" />
  </div>

  <div class="flex flex-col items-center justify-center">
    <hr class="h-1 mb-1 ml-20 bg-green-500 border-none w-52" />
    <hr class="h-1 mb-10 bg-green-500 border-none w-52" />
  </div>
  
</section>
Divider Variants Using Tailwind UI

Preview - Divider Variants Using Tailwind UI
