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="container mx-auto p-6">
	<div class="mx-auto max-w-sm rounded-lg border border-gray-200 p-10">...</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="container mx-auto p-6">
	<div class="mx-auto max-w-sm rounded-lg border border-gray-200 p-10">
		<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="container mx-auto p-6">
	<div class="mx-auto max-w-sm rounded-lg border border-gray-200 p-10">
		<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="container mx-auto p-6">
	<div class="mx-auto max-w-sm rounded-lg border border-gray-200 p-10">
		<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="inline-flex w-full justify-center rounded-lg bg-green-500 p-4 text-sm font-semibold 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.