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

749

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.3k
cards
cards with background animation

Author:
Anonymous

1 year ago

9.4k
cards
cards with background animation

Author:
Anonymous

6 months ago

1.4k
Invoice
Invoice

Author:
Ameth Galarcio

4 months ago

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

Author:
Ameth Galarcio

4 months ago

1k
Product card for eCommerce website

Author:
Steven Kuhn

2 years ago

10.3k
Form package

Author:
Hunter Guru

6 months ago

884
Article-Post Preview card

Author:
Prashant

2 years ago

8.2k
Tailwind AoPS Demo
Starter code for an interactive Tailwind Demo

Author:
Joseph Barron

8 months ago

1.5k
Stats card with icons
Improved Code quality and added support for dark mode

Author:
Dika Rahman

1 month ago

274
Product / Service Card
Example of a card that can be used as a blog, product, or service card with reviews.

Author:
Noob

2 years ago

14.4k
Typewriter effect in tailwindcss with this simple trick
source: https://dev.to/lazysock/make-a-typewriter-effect-with-tailwindcss-in-5-minutes-dc

Author:
Anonymous

1 year ago

9.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent