Show credit card details

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

Other Mockup

Author Manuela Bianka

Tailwind v3.4 13.2k 17

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

Shakti

3 years ago

28.8k
Show user details

Lucas Martinez

3 years ago

26.3k
Credit card mockup

Manuela Bianka

3 years ago

11.2k
Google map iframe with tailwind

Kofi Osei

3 years ago

22.5k
Credit card mockup

Kofi Osei

3 years ago

13.3k
Chatbox template

Lucas Martinez

3 years ago

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

Prajwal Hallale

3 years ago

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

Prajwal Hallale

3 years ago

10.9k
dashboard

Anonymous

1 month ago

204
Pinterest-Style Masonry Gallery
A Pinterest-inspired masonry gallery featuring images of different heights in a seamless multi-column layout.

JUGENDRA GANGWAR

3 months ago

188
Creative Bento Gallery
A modern bento-style gallery combining differently sized image cards in a structured and visually engaging layout.

JUGENDRA GANGWAR

3 months ago

318
Two-Factor Authentication

JUGENDRA GANGWAR

1 month ago

27