Home
Kofi Osei
Credit card mockup

Credit card mockup

This tailwind example is contributed by Kofi Osei, on 01-Mar-2023. Component is made with Tailwind CSS v3. similar terms for this example are simulation,copy,dummy,miniature,like

Mockup

Author Kofi Osei

12.8k

Fork Fullscreen

<div
            class="recto z-2 absolute overflow-hidden w-96 h-56 rounded-2xl px-8 py-6 bg-black text-white shadow-xl flex flex-col justify-end gap-6">
            
            <div class="logo absolute top-6 right-8 w-16 h-8 flex justify-items-center items-center">
                <svg viewBox="0 0 1000 324.68">
                    <path
                        d="m651.19 0.5c-70.933 0-134.32 36.766-134.32 104.69 0 77.9 112.42 83.281 112.42 122.42 0 16.478-18.884 31.229-51.137 31.229-45.773 0-79.984-20.611-79.984-20.611l-14.638 68.547s39.41 17.41 91.734 17.41c77.552 0 138.58-38.571 138.58-107.66 0-82.316-112.89-87.536-112.89-123.86 0-12.908 15.502-27.052 47.663-27.052 36.287 0 65.892 14.99 65.892 14.99l14.326-66.204s-32.213-13.897-77.642-13.897zm-648.97 4.9966-1.7176 9.9931s29.842 5.4615 56.719 16.356c34.607 12.493 37.072 19.765 42.9 42.354l63.511 244.83h85.137l131.16-313.53h-84.942l-84.278 213.17-34.39-180.7c-3.1539-20.681-19.129-32.478-38.684-32.478h-135.41zm411.87 0-66.634 313.53h80.999l66.4-313.53h-80.765zm451.76 0c-19.532 0-29.88 10.457-37.474 28.73l-118.67 284.8h84.942l16.434-47.467h103.48l9.9931 47.467h74.948l-65.385-313.53h-68.273zm11.047 84.707 25.178 117.65h-67.454l42.276-117.65z"
                        fill="#fff" />
                </svg>
            </div>

<div class="pin w-11 h-7 rounded bg-yellow-100">&nbsp;</div>

<div class="number whitespace-nowrap text-2xl font-semibold" style="font-family:Courier new, mono;">
                4242&nbsp;4242&nbsp;4242&nbsp;4242
            </div>

<div class="credentials flex gap-8">
                <div class="owner flex flex-col w-max">
                    <span class="text-xs uppercase">Card holder</span>
                    <span class="whitespace-nowrap text-lg">John DOE</span>
                </div>
                <div class="expires flex flex-col w-max">
                    <span class="text-xs uppercase">Expires</span>
                    <span class="whitespace-nowrap text-lg">09/21</span>
                </div>
                <div class="cvc flex flex-col w-max">
                    <span class="text-xs uppercase">cvc</span>
                    <span class="whitespace-nowrap text-lg">123</span>
                </div>
            </div>
        </div>
    </div>
</figure>

Related Examples

Credit card mockup

Author:
Manuela Bianka

3 years ago

10.5k
Show credit card details

Author:
Manuela Bianka

3 years ago

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

Author:
Prajwal Hallale

3 years ago

10.8k
Mac terminal mockup

Author:
Manon Daniel

2 years ago

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

Author:
Prajwal Hallale

2 years ago

9.3k
Mac terminal mockup

Author:
Manon Daniel

2 years ago

9.4k
iPhone 15 Mockup
The "Screen Content" div can be manipulated to have anything inside the screen.

Author:
Coastal UI

1 year ago

1.6k
COMPLETE SYSTEM FAILURE

Author:
Bruz

4 months ago

556
Help command

Author:
Bruz

4 months ago

332
Quiting

Author:
Bruz

4 months ago

391
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

9 months ago

944
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

9 months ago

603

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components