[ Component ]
Credit Options
How to use → · credit· actions
Copy as
<div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800">
<div class="rounded-2xl bg-white shadow-xl w-96 p-8 text-center">
<h1 class="font-medium">Total Credits</h1>
<div class="text-4xl font-bold mt-2 mb-4 text-green-500">1248 <span class="text-base font-base">points</span></div>
<div class="text-gray-400">January 1, 2021</div>
<div class="p-4 rounded-xl bg-green-100 mt-4 grid grid-cols-3 gap-4 space-between"><button class="px-8 py-4 flex flex-col items-center rounded-xl bg-white text-green-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16" class="mb-1">
<path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.879 10.828a.5.5 0 1 1-.707-.707l4.096-4.096H6.5a.5.5 0 0 1 0-1h3.975a.5.5 0 0 1 .5.5V9.5a.5.5 0 0 1-1 0V6.732l-4.096 4.096z" />
</svg>
<div>Gift</div>
</button> <button class="px-8 py-4 flex flex-col items-center rounded-xl text-green-900 hover:bg-white hover:text-green-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16" class="mb-1">
<path fill-rule="evenodd" d="M8 1a2.5 2.5 0 0 0-2.5 2.5V4h5v-.5A2.5 2.5 0 0 0 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5z" />
</svg>
<div>Buy</div>
</button><button class="px-8 py-4 flex flex-col items-center rounded-xl text-green-900 hover:bg-white hover:text-green-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16" class="mb-1">
<path fill-rule="evenodd" d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" />
</svg>
<div>Other</div>
</button></div>
</div>
</div>