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

10.5k

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