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

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

12.2k
Show credit card details

Author:
Manuela Bianka

2 years ago

11.6k
Hero donate
the donation hero

Author:
Uwera Dorcas

2 weeks ago

90
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Author:
Hamza Atig

1 month ago

281
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

2 months ago

450
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

2 months ago

271
itskoti.com
ssdas

Author:
Tendy Rivaldo

5 months ago

437
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

8 months ago

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

Author:
Ameth Galarcio

4 months ago

1.1k
Mac terminal mockup

Author:
Sean Gantly

9 months ago

964
Tablet device mockup

Author:
Prajwal Hallale

2 years ago

8.8k
A clock with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

2.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components