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

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

2 years ago

10.3k
Show credit card details

Author:
Manuela Bianka

2 years ago

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

Author:
Prajwal Hallale

2 years ago

10.7k
Mac terminal mockup

Author:
Manon Daniel

2 years ago

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

Author:
Prajwal Hallale

2 years ago

9.2k
Mac terminal mockup

Author:
Manon Daniel

2 years ago

9.2k
Tablet device mockup

Author:
Prajwal Hallale

3 years ago

8.8k
Safari browser mockup (dark)

Author:
Leon Bachmann

2 years ago

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

6 months ago

430
Safari mockup Browser page
This component is a mockup of a Safari browser window, featuring a realistic and responsive design created with Tailwind CSS. It includes the following elements: Tab Bar: Positioned at the top of the window, the tab bar showcases an active tab with a favicon and a title. The active tab is highlighted with a background color and border for clarity. Toolbar: Below the tab bar, the toolbar mimics the Safari browser's functionality with close, minimize, and maximize buttons. It also features an address bar pre-filled with a URL, styled for a polished look. Navigation Buttons: The toolbar contains navigation buttons designed with SVG icons to represent back, forward, and other standard browser actions. Content Area: The main section of the browser window, styled to display content within the mockup. It includes a heading and a description to illustrate the use of the component.

Author:
Mahmoud Abdelaziz Salama

10 months ago

953
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

6 months ago

886
itskoti.com
ssdas

Author:
Tendy Rivaldo

9 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components