<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<section class="p-6">
  <div class="container mx-auto max-w-lg flex gap-x-4">
    <div class="border-gray-300 border rounded-lg p-6 space-y-4 flex flex-col">
      <h2 class="text-xl font-semibold">Plan #1</h2>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem, dolor.</p>
      <ul class="divide-y divide-gray-300/30 flex-1">
        <li class="text-small font-medium py-1">✅ Feature One</li>
        <li class="text-small font-medium py-1">✅ Feature Two</li>
        <li class="text-small font-medium py-1">✅ Feature Three</li>

      </ul>
      <button class="bg-green-500 flex p-4 w-full justify-center rounded-lg text-sm font-semibold">Buy now</button>
    </div>
    <div class="border-gray-300 border rounded-lg p-6 space-y-4">
      <h2 class="text-xl font-semibold">Plan #1</h2>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem, dolor.</p>
      <ul class="divide-y divide-gray-300/30">
        <li class="text-small font-medium py-1">✅ Feature One</li>
        <li class="text-small font-medium py-1">✅ Feature Two</li>
        <li class="text-small font-medium py-1">✅ Feature Three</li>
        <li class="text-small font-medium py-1">✅ Feature Four</li>
        <li class="text-small font-medium py-1">✅ Feature Five</li>
        <li class="text-small font-medium py-1">✅ Feature Six</li>

      </ul>
      <button class="bg-green-500 flex p-4 w-full justify-center rounded-lg text-sm font-semibold">Buy now</button>
    </div>
  </div>
</section>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.