<div class="bg-blue w-full pt-8">
<div class="mb-6 flex flex-col justify-center rounded shadow-lg sm:mb-0 sm:flex-row">
<div class="mt-4 flex flex-col rounded-t-lg rounded-tr-none bg-emerald-300 text-white sm:flex-1 lg:w-1/4 lg:flex-initial">
<div class="p-8 text-center text-3xl font-bold">Free</div>
<div class="border-0 text-sm">
<div class="border-0 py-4 text-center">1 Ice Cream</div>
<div class="border-0 py-4 text-center">Unlimited toppings</div>
<div class="border-0 py-4 text-center">Analytics</div>
</div>
<div class="mt-8 mb-8 mt-auto text-center">
<a href="#" class="bg-green hover:bg-green-darker inline-block rounded px-6 py-4 hover:no-underline">Sign Up</a>
</div>
</div>
<div class="mt-4 flex flex-col rounded-t-lg rounded-tr-none bg-white sm:flex-1 lg:w-1/4 lg:flex-initial">
<div class="p-8 text-center text-3xl font-bold">Free</div>
<div class="border-0 text-sm">
<div class="border-grey-light border-0 py-4 text-center">1 Ice Cream</div>
<div class="border-grey-light border-0 py-4 text-center">Unlimited toppings</div>
<div class="border-grey-light border-0 py-4 text-center">Analytics</div>
</div>
<div class="mt-8 mb-8 mt-auto text-center">
<a href="#" class="bg-green hover:bg-green-darker inline-block rounded px-6 py-4 text-white hover:text-white hover:no-underline">Sign Up</a>
</div>
</div>
<div class="mt-4 flex flex-col rounded-t-lg rounded-tr-none bg-white sm:flex-1 lg:w-1/4 lg:flex-initial">
<div class="p-8 text-center text-3xl font-bold">Free</div>
<div class="border-0 text-sm">
<div class="border-grey-light border-0 py-4 text-center">1 Ice Cream</div>
<div class="border-grey-light border-0 py-4 text-center">Unlimited toppings</div>
<div class="border-grey-light border-0 py-4 text-center">Analytics</div>
</div>
<div class="mt-8 mb-8 mt-auto text-center">
<a href="#" class="bg-green hover:bg-green-darker inline-block rounded px-6 py-4 text-white hover:text-white hover:no-underline">Sign Up</a>
</div>
</div>
<div class="mt-4 flex flex-col rounded-t-lg rounded-tr-none bg-white sm:flex-1 lg:w-1/4 lg:flex-initial">
<div class="p-8 text-center text-3xl font-bold">Free</div>
<div class="border-0 text-sm">
<div class="border-grey-light border-0 py-4 text-center">1 Ice Cream</div>
<div class="border-grey-light border-0 py-4 text-center">Unlimited toppings</div>
<div class="border-grey-light border-0 py-4 text-center">Analytics</div>
</div>
<div class="mt-8 mb-8 mt-auto text-center">
<a href="#" class="bg-green hover:bg-green-darker inline-block rounded px-6 py-4 text-white hover:text-white hover:no-underline">Sign Up</a>
</div>
</div>
</div>
</div>
Tailwind table 卡片视图样式
20 min read