tailwind-cssdivider

how to put a vertical divider that is not complete in tailwind

I am trying to put an x-divider but the lines do not reach 100%, I show you an example of how I want it:

image of how I need it

<div className="grid md:grid-cols-4 rounded-[48px] md:h-48 grid-cols-1 rounded-[48px] bg-quater mx-auto w-5/6 text-white
            md:divide-x divide-primary divide-inset">

            <div className="font-gmr text-2xl w-full h-full flex flex-col justify-center text-center p-5"> { language.secc2text1 } </div>
            <div className="font-raleway w-full h-full flex flex-col justify-center text-center p-5"> { language.secc2text2 } </div>
            <div className="font-gmr text-2xl w-full h-full flex flex-col justify-center text-center p-5"> { language.secc2text3 } </div>
            <div className="font-raleway w-full h-full flex flex-col justify-center text-center p-5"> { language.secc2text4 } </div>
</div>

but with this code this is how it comes out, with the dividers from bottom to top

image of how it turns out

Solution

  • You could consider adding some vertical padding to the container:

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

<div class="bg-green-400 mx-auto grid w-5/6 grid-cols-1 rounded-[48px] text-white md:h-48 md:grid-cols-4 md:divide-x md:py-5">
  <div class="font-gmr flex h-full w-full flex-col justify-center p-5 text-center text-2xl">{ language.secc2text1 }</div>
  <div class="font-raleway flex h-full w-full flex-col justify-center p-5 text-center">{ language.secc2text2 }</div>
  <div class="font-gmr flex h-full w-full flex-col justify-center p-5 text-center text-2xl">{ language.secc2text3 }</div>
  <div class="font-raleway flex h-full w-full flex-col justify-center p-5 text-center">{ language.secc2text4 }</div>
</div>