Home
Manuela Bianka
Show credit card details

Show credit card details

This tailwind example is contributed by Manuela Bianka, on 28-Dec-2022. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are simulation,copy,dummy,miniature,like

Other Mockup

Author Manuela Bianka

11.7k

Fork Fullscreen

<div class="max-w-xs mx-auto bg-white rounded-lg shadow-md overflow-hidden mt-24">
    <div class="bg-gray-100 px-4 py-2">
        <h2 class="text-lg font-medium text-gray-800">Credit Card</h2>
    </div>
    <div class="px-4 py-5 sm:p-6">
        <div class="flex flex-col items-start justify-between mb-6">
            <span class="text-sm font-medium text-gray-600">Cardholder Name</span>
            <span class="text-lg font-medium text-gray-800">John Doe</span>
        </div>
        <div class="flex flex-col items-start justify-between mb-6">
            <span class="text-sm font-medium text-gray-600">Card Number</span>
            <span class="text-lg font-medium text-gray-800">**** **** **** 1234</span>
        </div>
        <div class="flex flex-row items-center justify-between mb-6">
            <div class="flex flex-col items-start">
                <span class="text-sm font-medium text-gray-600">Expiration Date</span>
                <span class="text-lg font-medium text-gray-800">12/24</span>
            </div>
            <div class="flex flex-col items-start">
                <span class="text-sm font-medium text-gray-600">CVV</span>
                <span class="text-lg font-medium text-gray-800">***</span>
            </div>
        </div>
        <div class="flex flex-row items-center justify-between">
            <div class="flex flex-col items-start">
                <span class="text-sm font-medium text-gray-600">Credit Limit</span>
                <span class="text-lg font-medium text-gray-800">$10,000</span>
            </div>
            <div class="flex flex-col items-start">
                <span class="text-sm font-medium text-gray-600">Available Balance</span>
                <span class="text-lg font-medium text-gray-800">$7,500</span>
            </div>
        </div>
    </div>
</div>

Related Examples

Invoice template

Author:
Shakti

2 years ago

27.1k
Show user details

Author:
Lucas Martinez

2 years ago

24.5k
Credit card mockup

Author:
Manuela Bianka

2 years ago

9.7k
Google map iframe with tailwind

Author:
Kofi Osei

2 years ago

20.8k
Credit card mockup

Author:
Kofi Osei

2 years ago

12.3k
Chatbox template

Author:
Lucas Martinez

2 years ago

11.8k
Mobile device mockup
Smartphone (with punch hole notch) mockup in tailwind

Author:
Prajwal Hallale

2 years ago

9.1k
Mobile device mockup
Smartphone (with notch) mockup in tailwind

Author:
Prajwal Hallale

2 years ago

10.6k
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Author:
Ameth Galarcio

1 year ago

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

Author:
Ameth Galarcio

5 months ago

1.3k
Active Beauty Main Page

Author:
Maxim

4 months ago

639
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

3 months ago

541

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components