Improvements to the card example

[jenstornell]

I've made an improvement to the card example from here: https://tailwindcss.com/components/cards

The bottom of the card looks like this:

<div class="px-6 py-4">
  <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#photography</span>
  <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#travel</span>
  <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#winter</span>
</div>

I've made it shorter:

<div class="px-6 py-4 flex flex-wrap gap-3 text-sm font-semibold text-gray-700">
  <div class="bg-gray-200 rounded-full px-3 py-1">#photography</div>
  <div class="bg-gray-200 rounded-full px-3 py-1">#travel</div>
  <div class="bg-gray-200 rounded-full px-3 py-1">#winter</div>
</div>

What I did

• I added the new flex with gap. That way I only need to set the display property on the parent, not on every child.
• I changed all spans to divs because they are not inline elements anymore, saving a few bytes.
• I moved the font and text classes to the parent for the children to inherit. There is no need to set them on every child.

I hope you like it!