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

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.4k
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.9k
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

3 years ago

9.4k
Dynamic Google Card

Author:
Cristian

1 year ago

1.1k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

10 months ago

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

Author:
Coastal UI

1 year ago

1.6k
Active Beauty Main Page

Author:
Maxim

10 months ago

1.2k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

10 months ago

758
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.

Author:
Coastal UI

1 year ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components