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

977

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

cards
cards with background animation

Author:
Anonymous

1 year ago

9.6k
cards
cards with background animation

Author:
Anonymous

1 year ago

9.6k
cards
cards with background animation

Author:
Anonymous

7 months ago

1.5k
Invoice
Invoice

Author:
Ameth Galarcio

5 months ago

1k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

5 months ago

1.2k
Chatbox template

Author:
Lucas Martinez

1 year ago

10.7k
Astro build starter template with Tailwind
Astro build starter template with Tailwind

Author:
Geoffrey Callaghan

10 months ago

2.3k
Feature Card
Elevated card

Author:
Prajwal Hallale

2 years ago

9.8k
Privacy policy page template

Author:
Anonymous

7 months ago

1.4k
Simple card layout with image

Author:
Leon Bachmann

2 years ago

9.2k
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

10.1k
Card Component
This component is a simple card (without image) component with hover effect & Dark mode Supported & full responsive

Author:
Shariar Hasan

10 months ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components