tailwindcss flex align items and space between

Question

please, I have a problem with tailwindCSS . I'm trying to make vote buttons (like and disklike). I'm using flex for the buttons and for tags in footer of section .

Please, can you help me how I can align text for vote-down to the right?

And how can I align text in tags in footer ?

Here is my code (below this code you can find the link to playground)

<main class="h-screen bg-gradient-to-b from-red-700 to-pink-200">
  <div class="p-5">
    <article class="max-w-xs mx-auto bg-white rounded-2xl shadow-md overflow-hidden">
      <figure>
        <img class="object-scale-down w-96" src="https://images.pexels.com/photos/5276584/pexels-photo-5276584.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=200&w=200" alt="Man looking at item at a store" />
      </figure>
      <article>
        <section class="flex text-2xl font-bold text-white p-2">
          <div class="flex-1 text-left bg-green-100 text-black rounded-xl mx-1 px-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline" viewBox="0 0 20 20" fill="currentColor">
              <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
            </svg>
            20
          </div>
          <div class="flex-1 bg-red-500 rounded-xl mx-3 px-1 align-middle justify-end">
            48
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline" viewBox="0 0 20 20" fill="currentColor">
              <path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.43a2 2 0 00-1.105-1.79l-.05-.025A4 4 0 0011.055 2H5.64a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z" />
            </svg>
          </div>
        </section>
        <section class="m-2">
          <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline uppercase text-center">Discover beauty of horses</a>
          <p class="text-gray-500">Riding on horses is not easy as you can see that. Try this long way in horseback ride and you can see nature from most beauty height. You see every detail on the ground or look to the mounts far away from you.</p>
          <footer class="flex h-8">
            <span class="flex-shrink text-center text-xs text-white font-semibold bg-green-500 px-3 rounded-2xl mx-2">Short way</span>
            <span class="flex-grop text-center text-xs text-black font-semibold bg-yellow-500 px-3 rounded-2xl mx-2">Medium</span>
            <span class="flex-shrink text-center text-xs text-black font-semibold bg-red-500 px-3 rounded-2xl mx-2">Long way</span>
          </footer>
        </section>
      </article>
    </article>
  </div>
</main>

Whole code you see here: https://play.tailwindcss.com/I5DrixGeka

Thanks for any advice

PS: I'm just starting with tailwindCSS. Thanks again

Answer 1

To align downvote content to right, just add class text-right .

For footer, just need to play around with flex items-center . And add appropriate spacing space-x-# . Add some padding on the button as well px-3 py-1

Check working example .

<footer class="flex items-center h-8 space-x-2">
  <span class="flex-shrink text-center text-xs text-white font-semibold bg-green-500 px-3 py-1 rounded-2xl">Short way</span>
  <span class="flex-grop text-center text-xs text-black font-semibold bg-yellow-500 px-3 py-1 rounded-2xl">Medium</span>
  <span class="flex-shrink text-center text-xs text-black font-semibold bg-red-500 px-3 py-1 rounded-2xl">Long way</span>
</footer>

Answer 2

I think you should reconsider how you are using in this situation.

You are adding flex to the wrapper element of the two divs holding the information for buttons. When really, you should be adding flex to the two divs . Like so:

<section>
  <div class="flex items-center justify-around">
    <!-- thumbs up -->
  </div>
  <div class="flex items-center justify-around">
    <!-- thumbs down -->
  </div>
</section>

This will center the content within this flex div & space them with even spacing all around .

Then next is to consider using grid or flex on the section wrapper. I personally favor grid in moments like these, but flex is just as good, Here it is all in action. with extra styles from myself.

https://play.tailwindcss.com/ecOu6LHF6s