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

2.3k

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

2 years ago

11k
cards
cards with background animation

Author:
Anonymous

2 years ago

11.3k
cards
cards with background animation

Author:
Anonymous

1 year ago

3k
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

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

Author:
Ameth Galarcio

1 year ago

3.2k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

9 months ago

1.2k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

8 months ago

1.6k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

7 months ago

1.1k
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Author:
Abdul Baset Bappy

7 months ago

1.2k
Active Beauty Main Page

Author:
Maxim

7 months ago

915
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

6 months ago

885
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

6 months ago

884

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components