Home
cameron202518
iPhone 15 Mockup

iPhone 15 Mockup

This tailwind example is contributed by cameron202518, on 24-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are simulation,copy,dummy,miniature,like

Mockup

Author cameron202518

883

Fork Fullscreen

<div class="relative w-full h-full  rounded-[37px] overflow-hidden flex items-center justify-center  bg-zinc-900/10">
    <svg class="text-black h-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path fill="currentColor"
        d="M17.05 20.28c-.98.95-2.05.8-3.08.35c-1.09-.46-2.09-.48-3.24 0c-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8c1.18-.24 2.31-.93 3.57-.84c1.51.12 2.65.72 3.4 1.8c-3.12 1.87-2.38 5.98.48 7.13c-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25c.29 2.58-2.34 4.5-3.74 4.25" />
    </svg>
    <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-24 w-12 bg-zinc-600 blur-[60px]">

</div>
  </div>

<div class="absolute left-[-12px] top-20 w-[6px] h-8 bg-zinc-900 rounded-l-md shadow-md"></div>

<div class="absolute left-[-12px] top-36 w-[6px] h-12 bg-zinc-900 rounded-l-md shadow-md"></div>

<div class="absolute left-[-12px] top-52 w-[6px] h-12 bg-zinc-900 rounded-l-md shadow-md"></div>

<div class="absolute right-[-12px] top-36 w-[6px] h-16 bg-zinc-900 rounded-r-md shadow-md"></div>
</div>

Related Examples

COMPLETE SYSTEM FAILURE

Author:
Bruz

5 months ago

715
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

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.6k
Mac terminal mockup

Author:
Anonymous

1 year ago

1.7k
Safari browser mockup

Author:
Leon Bachmann

3 years ago

8.8k
Active Beauty Main Page

Author:
Maxim

11 months ago

1.2k
Quiting

Author:
Bruz

5 months ago

415
Credit card mockup

Author:
Kofi Osei

3 years ago

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

10 months ago

1k
Mac terminal mockup

Author:
Sean Gantly

1 year ago

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

Author:
Prajwal Hallale

2 years ago

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

10 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components