Home
Fabio Daneluzzi
Credit card mockup - 2

Credit card mockup - 2

This tailwind example is contributed by Fabio Daneluzzi, on 30-Jun-2025. Component is made with Tailwind CSS v3. similar terms for this example are simulation,copy,dummy,miniature,like

Mockup

Author Fabio Daneluzzi

776

Fork Fullscreen

<div
            class="recto z-2 absolute overflow-hidden w-96 h-56 rounded-2xl px-8 py-6 bg-[#548b6eff] 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="text-black number whitespace-nowrap text-2xl font-semibold" style="font-family:Courier new, mono;">
                1234&nbsp;A13F&nbsp;5A8E&nbsp;4567
            </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/25</span>
                </div>
                
            </div>
        </div>
    </div>
</figure>

Related Examples

Mac terminal mockup

Author:
Manon Daniel

2 years ago

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

9 months ago

708
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

600
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

9 months ago

1k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

9 months ago

1.2k
Safari browser mockup (dark)

Author:
Leon Bachmann

3 years ago

10.6k
Credit card mockup

Author:
Kofi Osei

2 years ago

12.8k
CSS-Boy
Inspired by the Pip-Boy Model 3000 from Fallout: New Vegas. Comes with multiple pages and some animations. All decorative background elements disappear when the screen is <sm (it's responsive).

Author:
Nick Girga

8 months ago

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

Author:
Hamza Atig

9 months ago

946
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Author:
Hamza Atig

9 months ago

1.1k
Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.

Author:
Coastal UI

1 year ago

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

Author:
Coastal UI

1 year ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components