[ Component ]
Pricing Card

· pricing
Copy as
HTML
JSX
            <div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800">
  <div class="rounded bg-white shadow-xl w-80 overflow-hidden">
    <div class="p-4 bg-gray-800 text-white">
      <div class="px-2 bg-blue-600 inline-block rounded">Extended</div>
      <div class="text-4xl font-bold my-6">$49<span class="text-lg font-medium">/month</span></div>
      <div class="text-gray-400">Includes team management</div>
    </div>
    <div class="p-4">
      <ul>
        <li class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 16 16" class="mr-1">
            <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z" />
          </svg> Unlimited projects</li>
        <li class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 16 16" class="mr-1">
            <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z" />
          </svg> Unlimited team members</li>
        <li class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 16 16" class="mr-1">
            <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z" />
          </svg> Access Control</li>
        <li class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 16 16" class="mr-1">
            <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z" />
          </svg> Priority Support</li>
      </ul>
      <div class="mt-4 px-2 py-1 text-sm inline-block bg-blue-200 text-blue-600 rounded font-medium">PROMOTION APPLIED</div>
    </div>
  </div>
</div>