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

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.3k
Show credit card details

Author:
Manuela Bianka

2 years ago

11.8k
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

4 months ago

824
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

4 months ago

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

Author:
Prajwal Hallale

2 years ago

9.2k
A clock with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

2.3k
Credit card mockup - 2

Author:
Fabio Daneluzzi

2 months ago

422
Mac terminal mockup

Author:
Manon Daniel

2 years ago

10.2k
iPhone 15 Mockup

Author:
cameron202518

6 months ago

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

Author:
Ameth Galarcio

6 months ago

1.3k
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

4 months ago

631
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

3 months ago

163

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components