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.2k

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

12k
Show credit card details

Author:
Manuela Bianka

2 years ago

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

Author:
Ameth Galarcio

1 month ago

684
Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.

Author:
Coastal UI

6 months ago

1.3k
Safari browser mockup

Author:
Leon Bachmann

2 years ago

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

Author:
Prajwal Hallale

1 year ago

9k
Active Beauty Main Page

Author:
Maxim

2 weeks ago

117
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

3 months ago

437
Mac terminal mockup

Author:
Sean Gantly

7 months ago

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

Author:
Ameth Galarcio

8 months ago

1.5k
Tablet device mockup

Author:
Prajwal Hallale

2 years ago

8.8k
Mac terminal mockup

Author:
Anonymous

6 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components