'Divider in divs with Tailwind

I have this now

<div class="w-2/3">
<h2 class="text-2xl font-semibold">Ordered Items</h2>
<table class="w-full border-collapse">
  .....
</table>
</div>
<div class="divider divider-horizontal"></div>
<div class="flex-auto text-sm">
<h2 class="text-2xl font-semibold">Details</h2>
.....
</div>
<div class="w-16 bg-green-200">
<ul>
  <li class="text-right">
     ...
  </li>
  <li class="text-right">
    ...
  </li>
</ul>
</div>

i have 3 divs and want to separate them with dividers using tailwind like this

cssruby-on-railsrubytailwind-css


Solution 1:[1]

Use the "divide-x" class on a div wrapping your 3 columns.

Link to tailwind doc: https://tailwindcss.com/docs/divide-width#add-borders-between-horizontal-children

Solution 2:[2]

divide-x-3 will not work as it will bring divider between all the columns that you not want. So you have to create separate div for that. Below is the implementation.

<script src="https://cdn.tailwindcss.com"></script>
<div class="container flex justify-evenly">
  <div class="">
    <h2 class="text-2xl font-semibold">Ordered Items</h2>
    <div class="grid w-full border-collapse grid-cols-4 gap-x-10">
      <div>Cristiano Ronaldo</div>
      <div>123132424</div>
      <div>Cristiano Ronaldo</div>
      <div>Cristiano Ronaldo</div>
      <div>Cristiano Ronaldo</div>
      <div>324234243</div>
      <div>Cristiano Ronaldo</div>
      <div>Cristiano Ronaldo</div>
      <div>Cristiano Ronaldo</div>
      <div>123132424</div>
      <div>Cristiano Ronaldo</div>
      <div>Cristiano Ronaldo</div>
      <div>Cristiano Ronaldo</div>
      <div>324234243</div>
      <div>Cristiano Ronaldo</div>
      <div>Cristiano Ronaldo</div>
    </div>
  </div>
  <!-- divider  start-->
  <div class="bg-gray-500 w-[2px] mt-4"></div>
  <!-- divider end-->
  <div class="">
    <h2 class="text-2xl font-semibold">Details</h2>
    <div class="grid w-full border-collapse grid-cols-2 gap-x-10">
      <div>Cristiano Ronaldo</div>
      <div>123132424</div>
      <div>Cristiano Ronaldo</div>
      <div>Cristiano Ronaldo</div>
      <div>Cristiano Ronaldo</div>
      <div>324234243</div>
      <div>Cristiano Ronaldo</div>
      <div>Cristiano Ronaldo</div>
      <div>Cristiano Ronaldo</div>
      <div>123132424</div>
    </div>
  </div>
  <!-- divider  start-->
  <div class="bg-gray-500 w-[2px] mt-4"></div>
  <!-- divider  end-->
  <div class="bg-green-200 py-5">View/Approve<br/> Download</div>
</div>

Please watch the code result in full page.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Felix
Solution 2 Mohit Maroliya B17CS036

Related Questions