Home
Shammi Nethupul
Payment Cards

Payment Cards

This tailwind example is contributed by Shammi Nethupul, on 27-Jul-2024. Component is made with Tailwind CSS v3. It is responsive.

Card Other

Author Shammi Nethupul

1.2k

Fork Fullscreen

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
  <div class="bg-white rounded-xl shadow-md overflow-hidden">
    <div class="p-4 flex items-center">
      <div class="bg-blue-600 p-4 rounded-full text-center">
        <p class="text-2xl font-bold text-white">05</p>
      </div>
      <div class="ml-4">
        <div class="uppercase px-2 rounded-md text-white bg-green-400 font-semibold">
          Paid</div>
        <p class="mt-2 text-gray-600">DATE: 2024-07-25</p>
        <p class="mt-2 font-semibold text-gray-600">AMOUNT: Rs. 5000/-</p>
      </div>
    </div>
  </div>
  <div class="bg-white rounded-xl shadow-md overflow-hidden">
    <div class="p-4 flex items-center">
      <div class="bg-blue-600 p-4 rounded-full text-center">
        <p class="text-2xl font-bold text-white">05</p>
      </div>
      <div class="ml-4">
        <div class="uppercase px-2 rounded-md text-white bg-green-400 font-semibold">
          Paid</div>
        <p class="mt-2 text-gray-600">DATE: 2024-07-25</p>
        <p class="mt-2 font-semibold text-gray-600">AMOUNT: Rs. 5000/-</p>
      </div>
    </div>
  </div>
  <div class="bg-white rounded-xl shadow-md overflow-hidden">
    <div class="p-4 flex items-center">
      <div class="bg-blue-600 p-4 rounded-full text-center">
        <p class="text-2xl font-bold text-white">05</p>
      </div>
      <div class="ml-4">
        <div class="uppercase px-2 rounded-md text-white bg-green-400 font-semibold">
          Paid</div>
        <p class="mt-2 text-gray-600">DATE: 2024-07-25</p>
        <p class="mt-2 font-semibold text-gray-600">AMOUNT: Rs. 5000/-</p>
      </div>
    </div>
  </div>
</div>

Related Examples