Tip #22: Build price tables with flex-box

Let's learn how to build stellar price tables in TailwindCSS using flex-box.

Price tables are an awesome way to quickly learn and master flex-box for those just starting our in more advanced frontend development.

Let's start by defining our markup:

<div class="p-6 container mx-auto">
    <div class="rounded-lg border border-gray-200 p-10 max-w-sm mx-auto">
        ...
    </div>
</div>

This will give us just the border for the card. Let's now add the first section (or header) of the price table:

<div class="p-6 container mx-auto">
    <div class="rounded-lg border border-gray-200 p-10 max-w-sm mx-auto">
        <div class="space-y-4">
            <h2 class="text-3xl font-light">📦 Package #1</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.    Sint accusantium voluptate magni, doloribus nihil ipsa.</p>
        </div>
    </div>
</div>

Notice that space-y-4 helps us separate out the h2 from the p tag in a clean, easy-to-read way. Read more about space and gap utilities here.

With that in place, let's focus on the feature list part:

<div class="p-6 container mx-auto">
    <div class="rounded-lg border border-gray-200 p-10 max-w-sm mx-auto">
        <div class="space-y-4">
            <h2 class="text-3xl font-light">📦 Package #1</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.    Sint accusantium voluptate magni, doloribus nihil ipsa.</p>
        </div>
        <ul class="divide-y divide-gray-300/30">
            <li class="py-2">
        ✅ Item 1
      </li>
      <li class="py-2">
        ✅ Item 2
      </li>
      <li class="py-2">
        ✅ Item 3
      </li>
      <li class="py-2">
        ✅ Item 4
      </li>
      <li class="py-2">
        ✅ Item 5
      </li>
        </ul>
    </div>
</div>

Notice that on our ul we added a divide-y and divide-gray-300/30. This will help us create line dividers between each of the li elements. I talk more about using divides in TailwindCSS here.

With that in place, all we need is the call-to-action button:

<div class="p-6 container mx-auto">
    <div class="rounded-lg border border-gray-200 p-10 max-w-sm mx-auto">
        <div class="space-y-4">
            <h2 class="text-3xl font-light">📦 Package #1</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.    Sint accusantium voluptate magni, doloribus nihil ipsa.</p>
        </div>
        <ul class="divide-y divide-gray-300/30">
            <li class="py-2">
        ✅ Item 1
      </li>
      <li class="py-2">
        ✅ Item 2
      </li>
      <li class="py-2">
        ✅ Item 3
      </li>
      <li class="py-2">
        ✅ Item 4
      </li>
      <li class="py-2">
        ✅ Item 5
      </li>
        </ul>
    </div>
        <div>
      <button class="bg-green-500 text-sm font-semibold p-4 rounded-lg inline-flex w-full justify-center text-white">Buy now</button>
    </div>
</div>

That's it 🎉

We got ourselves one snazzy looking price table. I'll leave it as a challenge to you to integrate it on a web page with other price tables side-by-side.

Grab the full code for this tip on Tailwind Play.