Home
Manuela Bianka
Credit card mockup

Credit card mockup

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

Mockup

Author Manuela Bianka

9.1k

Fork Fullscreen

<div class="mx-auto max-w-lg mt-40">
    <div class="bg-white rounded-lg overflow-hidden shadow-lg">
        <div class="px-6 py-4">
            <div class="flex justify-between items-center">
                <img class="h-8" src="https://www.svgrepo.com/show/499847/company.svg" alt="Workflow logo">
                <span class="font-medium text-gray-600">05/24</span>
            </div>
            <div class="mt-4">
                <div class="font-bold text-gray-800 text-xl">**** **** **** 1234</div>
                <div class="flex justify-between items-center mt-2">
                    <div class="text-sm text-gray-600">CARDHOLDER NAME</div>
                    <img class="h-10 w-10" src="https://www.svgrepo.com/show/362011/mastercard.svg" alt="Mastercard logo">
                </div>
            </div>
        </div>
        <div class="bg-gray-100 px-6 py-4">
            <div class="font-medium text-gray-600">CARD VERIFICATION VALUE</div>
            <div class="text-lg font-bold text-gray-800 mt-2">***</div>
        </div>
    </div>
</div>

Related Examples

Credit card mockup

Author:
Kofi Osei

2 years ago

11.8k
Show credit card details

Author:
Manuela Bianka

2 years ago

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

Author:
Prajwal Hallale

1 year ago

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

Author:
Prajwal Hallale

2 years ago

10.5k
Mac terminal mockup

Author:
Anonymous

5 months ago

894
Safari mockup Browser page
This component is a mockup of a Safari browser window, featuring a realistic and responsive design created with Tailwind CSS. It includes the following elements: Tab Bar: Positioned at the top of the window, the tab bar showcases an active tab with a favicon and a title. The active tab is highlighted with a background color and border for clarity. Toolbar: Below the tab bar, the toolbar mimics the Safari browser's functionality with close, minimize, and maximize buttons. It also features an address bar pre-filled with a URL, styled for a polished look. Navigation Buttons: The toolbar contains navigation buttons designed with SVG icons to represent back, forward, and other standard browser actions. Content Area: The main section of the browser window, styled to display content within the mockup. It includes a heading and a description to illustrate the use of the component.

Author:
Mahmoud Abdelaziz Salama

2 months ago

394
iPhone 15 Mockup

Author:
cameron202518

2 weeks ago

27
Mac terminal mockup

Author:
Manon Daniel

1 year ago

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

Author:
Ameth Galarcio

7 months ago

1.4k
Mac terminal mockup

Author:
Manon Daniel

2 years ago

8.4k
Safari browser mockup

Author:
Leon Bachmann

2 years ago

7k
Safari browser mockup (dark)

Author:
Leon Bachmann

2 years ago

9.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components