Home
Michael Andreuzza
A clock with Tailwind CSS

A clock with Tailwind CSS

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are simulation,copy,dummy,miniature,like

Mockup

Author Michael Andreuzza

2k

3

Fork Fullscreen

<script src="https://cdn.tailwindcss.com"></script>
<section class="bg-white">
 <div class="flex flex-col items-center justify-center h-screen mx-auto bg-white max-w-7xl">
  <div class="flex w-full">
   <div class="flex items-center h-20 bg-white border-8 border-r-0 border-black rounded-l-2xl w-14">
    <div class="w-full h-1 mx-auto bg-black"></div>
   </div>
   <div class="relative w-full h-20">
    <div class="flex gap-12 itemz-center">
     <div class="absolute flex items-center justify-end w-full h-20 gap-8 pr-20 bg-black rounded-r-3xl">
      <div class="bg-white rounded-full size-2"></div>
      <div class="bg-white rounded-full size-2"></div>
      <div class="bg-white rounded-full size-2"></div>
      <div class="bg-white rounded-full size-2"></div>
      <div class="bg-white rounded-full size-2"></div>
      <div class="bg-white rounded-full size-2"></div>
      <div class="bg-white rounded-full size-2"></div>
      <div class="bg-white rounded-full size-2"></div>
     </div>
    </div>
    <div class="absolute inline-flex items-center transform -translate-x-1/2 -translate-y-1/2 bg-black rounded-full size-52 ring-8 ring-offset-2 ring-black top-1/2 left-1/2">
     <svg class="absolute inset-x-0 h-4 mx-auto bottom-8" viewBox="0 0 19 5" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_1528_2)">
       <path d="M15.0634 0.898528C15.0634 0.76374 15.1639 0.663262 15.2938 0.663262C15.4212 0.663262 15.5217 0.76374 15.5217 0.898528C15.5217 1.03331 15.4212 1.13379 15.2938 1.13379C15.1639 1.13379 15.0634 1.03331 15.0634 0.898528ZM15.2938 1.18036C15.4482 1.18036 15.5781 1.06027 15.5781 0.898528C15.5781 0.736782 15.4482 0.616699 15.2938 0.616699C15.1394 0.616699 15.0071 0.736782 15.0071 0.898528C15.0071 1.06027 15.1394 1.18036 15.2938 1.18036ZM15.235 0.920584H15.2914L15.3771 1.06027H15.431L15.3404 0.918133C15.3869 0.913232 15.4237 0.886275 15.4237 0.829908C15.4237 0.76374 15.3845 0.736782 15.3085 0.736782H15.1835V1.06027H15.235V0.920584ZM15.235 0.878922V0.778443H15.3012C15.3355 0.778443 15.3722 0.785796 15.3722 0.825007C15.3722 0.876471 15.3355 0.878922 15.2938 0.878922H15.235Z" fill="white"></path>
       <path d="M2.83176 1.30518H1.15304C0.964342 1.30518 0.790342 1.38115 0.658005 1.51348C0.53057 1.64337 0.461951 1.81492 0.4644 1.99651C0.461951 2.18448 0.53057 2.36191 0.660457 2.49229C0.785441 2.61752 0.954537 2.6854 1.13344 2.68393C1.13099 2.68393 2.17253 2.68393 2.17253 2.68393C2.39554 2.68565 2.56219 2.84371 2.56464 3.05986C2.56219 3.26842 2.38329 3.44658 2.17008 3.44928C2.17253 3.44928 0.452148 3.44928 0.452148 3.44928V3.80928H2.17253C2.57934 3.80389 2.91754 3.46766 2.92489 3.05986C2.91754 2.64055 2.59405 2.32736 2.17253 2.32392H1.13099C1.04766 2.32466 0.971692 2.29427 0.915326 2.23815C0.85406 2.17688 0.8222 2.09111 0.8222 1.99651C0.8222 1.90755 0.85406 1.82717 0.915326 1.7659C0.979044 1.70219 1.06237 1.66543 1.15549 1.66543C1.15304 1.66543 2.83176 1.66543 2.83176 1.66543V1.30518Z" fill="white"></path>
       <path d="M5.90008 1.29297V2.99227C5.90008 3.12216 5.84862 3.24347 5.75794 3.33365C5.66727 3.4231 5.54963 3.47163 5.4222 3.47065C5.16242 3.47261 4.94921 3.25646 4.94186 2.98835C4.94186 2.99227 4.94186 1.29297 4.94186 1.29297H4.58406V2.99227C4.58406 2.99374 4.58406 2.99497 4.58406 2.99619C4.58651 3.12265 4.53995 3.24126 4.45172 3.33022C4.36105 3.42188 4.23851 3.47163 4.10618 3.47065C3.98364 3.47163 3.87091 3.42433 3.78514 3.33758C3.69447 3.2469 3.64545 3.1251 3.6479 2.99497C3.6479 2.99227 3.6479 1.29297 3.6479 1.29297H3.28765V2.99227C3.2852 3.21749 3.37097 3.43119 3.52781 3.59122C3.68466 3.74733 3.88807 3.83212 4.10618 3.83041C4.33409 3.83237 4.5473 3.74439 4.7066 3.58289C4.72865 3.56034 4.75071 3.53633 4.77032 3.51157C4.92471 3.70763 5.15997 3.83261 5.4222 3.83041C5.64276 3.83212 5.85352 3.74659 6.01281 3.58901C6.17211 3.4307 6.26033 3.21872 6.25788 2.99227V1.29297H5.90008Z" fill="white"></path>
       <path d="M8.69151 1.28308H7.90484C7.19659 1.27328 6.61088 1.8389 6.60107 2.54371C6.61088 3.27034 7.19659 3.85483 7.90484 3.85165C8.05433 3.85434 8.19647 3.82812 8.33126 3.77813V3.40685H8.28959L8.25529 3.42302C8.14746 3.47155 8.03473 3.49409 7.90974 3.49188C7.3902 3.49409 6.96623 3.0689 6.95888 2.54396C6.96623 2.03397 7.38039 1.63598 7.90239 1.64333C7.90484 1.64333 8.27979 1.64333 8.51015 1.64333V3.7992H8.87041V1.28308H8.69151Z" fill="white"></path>
       <path d="M10.1768 3.47045C10.0567 3.46922 9.944 3.4207 9.85823 3.3337C9.77981 3.25258 9.73815 3.14794 9.7406 3.03888C9.7406 3.03643 9.7406 2.30025 9.7406 1.64322H10.6008V1.28297H9.7406C9.7406 0.915364 9.7406 0.635986 9.7406 0.635986H9.3828V3.03447C9.37545 3.23616 9.45387 3.43271 9.60091 3.58367C9.7504 3.74051 9.95626 3.828 10.1768 3.83021H10.6866V3.47045H10.1768Z" fill="white"></path>
       <path d="M12.7941 2.94002C12.6446 3.27748 12.3089 3.49412 11.9413 3.49192C11.6839 3.4929 11.4462 3.39487 11.2673 3.21597C11.0884 3.03756 10.9928 2.80034 10.9953 2.54767C10.9904 2.03229 11.4168 1.60906 11.9413 1.60171C12.2451 1.60906 12.5172 1.7512 12.6838 1.99087L12.9803 1.78551C12.7475 1.44976 12.3701 1.25126 11.9437 1.24146C11.2134 1.25126 10.6301 1.83795 10.635 2.54767C10.6326 2.89469 10.7649 3.22308 11.0124 3.47011C11.26 3.71763 11.5884 3.85315 11.9413 3.85168C12.4485 3.85486 12.9142 3.55466 13.1225 3.08682L12.7941 2.94002Z" fill="white"></path>
       <path d="M14.4629 1.24131C14.1957 1.2364 13.936 1.33443 13.7326 1.51823V0.635986H13.3723V3.79908H13.7326V2.33137C13.7301 2.13458 13.8061 1.94955 13.9458 1.80986C14.0855 1.67263 14.2693 1.59665 14.4629 1.60156C14.877 1.5942 15.2128 1.92431 15.2201 2.33701C15.2201 2.33382 15.2201 3.79908 15.2201 3.79908H15.5804V2.33382C15.5706 1.71919 15.0682 1.2315 14.4629 1.24131Z" fill="white"></path>
       <path d="M16.1025 1.35693H18.5434V3.79953H16.1025V1.35693Z" fill="#DA0021" stroke="#DA0021" stroke-width="0.00857739" stroke-miterlimit="3.864"></path>
       <path d="M18.3743 2.27015H17.6292V1.52808H17.0141V2.27015H16.2495V2.886H17.0141V3.65037H17.6292V2.886H18.3743V2.27015Z" fill="#FFFEFF"></path>
      </g>
      <defs>
       <clipPath id="clip0_1528_2">
        <rect width="19" height="4.14381" fill="white" transform="translate(0 0.162354)"></rect>
       </clipPath>
      </defs>
     </svg>
     <div>
      <div class="absolute w-12 h-0.5 mx-auto -rotate-45 bg-red-500 -mt-4 right-16 size-4">
      </div>
      <div class="absolute w-20 h-1 mx-auto rotate-45 bg-white -mt-7 left-9 size-4">
      </div>
     </div>
     <div class="z-50 mx-auto bg-white rounded-full size-6 rk"></div>
    </div>
   </div>
  </div>
 </div>
</section>
<div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center sm:px-6 sm:pb-5 lg:px-8">
 <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
  <div class="flex w-0 flex-1 items-center p-4">
   <div class="w-full">
    <p class="text-sm font-medium text-neutral-900">Creative moments</p>
    <p class="mt-1 text-sm text-neutral-500">
     A simple "Watch" </p>
    <p class="mt-2 text-xs text-red-500 underline"> <a href="https://michaelandreuzza.com">
      by © Michael Andreuzza</a> </p>
   </div>
  </div>

</div>
</div>

Related Examples

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

Author:
Coastal UI

4 months ago

887
Mac terminal mockup

Author:
Sean Gantly

7 months ago

866
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

6 months ago

1.3k
Active Beauty Main Page

Author:
Maxim

2 weeks ago

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

Author:
Prajwal Hallale

1 year ago

9k
Credit card mockup

Author:
Kofi Osei

2 years ago

12k
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 month ago

684
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Author:
Ameth Galarcio

8 months ago

1.5k
itskoti.com
ssdas

Author:
Tendy Rivaldo

2 months ago

385
Safari browser mockup

Author:
Leon Bachmann

2 years ago

7.3k
Tablet device mockup

Author:
Prajwal Hallale

2 years ago

8.8k
Credit card mockup

Author:
Manuela Bianka

2 years ago

9.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1