Credit card mockup

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

Mockup

Author Manuela Bianka

Tailwind v3.4 11.1k 18

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

Kofi Osei

3 years ago

13.3k
Show credit card details

Manuela Bianka

3 years ago

13.2k
Tablet device mockup

Prajwal Hallale

3 years ago

8.9k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Hamza Atig

1 year ago

2k
Mac terminal mockup

Manon Daniel

3 years ago

9.9k
itskoti.com
ssdas

Tendy Rivaldo

1 year ago

1.8k
Mobile device mockup (iPhone 14 pro)
Smartphone (with dynamic island notch) mockup in tailwind

Prajwal Hallale

3 years ago

10.3k
Macbook Air 13" Mockup
A gorgeous component that can be used for landing pages, hero statements and more. Interested in our UI library? Check out the discord link in my bio.

Coastal UI

1 year ago

3.1k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Hamza Atig

1 year ago

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

Hamza Atig

1 year ago

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

ORGIN_DREAMS

1 year ago

1.6k
A clock with Tailwind CSS

Michael Andreuzza

2 years ago

3k