Stylish Digital Clock Made With JavaScript And TailwindCSS

Preview:

Description:

A stylish and responsive digital clock UI made with JavaScript and TailwindCSS framework.

How to use it:

1. Import the TailwindCSS framework.

<script src="https://cdn.tailwindcss.com"></script>

// config the Tailwind as per your needs
tailwind.config = {
  theme: {
    extend: {
      colors: {
        "light-gray": "#303640",
        seconds: "rgba(6, 252, 63, 1)",
        minutes: "rgba(252, 230, 0, 1)",
        hours: "rgba(253, 41, 112, 1)",
      },
      fontFamily: {
        body: ["Ubuntu", "sans-serif"],
      },
    },
  },
};

2. Add HOURS, MINUTES, and SECONDS slots to the digital clock.

<main class="container flex flex-col lg:flex-row gap-8 lg:gap-10">
  <article
    class="relative w-48 h-48 lg:w-56 lg:h-56 xl:w-60 xl:h-60 inline-grid place-content-center text-center border-8 border-[#191919] rounded-full before:rounded-full after:rounded-full after:absolute before:absolute before:-inset-2 pie no-round"
    style="--p: 20; --c: rgba(253, 41, 112, 1)"
  >
    <span
      class="absolute inset-0 w-full h-full before:absolute before:inset-0 before:w-7 before:h-7 before:left-[4.5rem] lg:before:left-24 before:-top-4 before:bg-hours before:rounded-full transition-all duration-500 dot"
      id="dot-hour"
    ></span>
    <h3
      class="font-bold text-base lg:text-lg xl:text-xl flex flex-col gap-1 lg:gap-3"
    >
      <span
        class="text-4xl md:text-5xl lg:text-6xl xl:text-7xl"
        id="hour"
      ></span>
      <span>HOURS</span>
    </h3>
  </article>
  <article
    class="relative w-48 h-48 lg:w-56 lg:h-56 xl:w-60 xl:h-60 inline-grid place-content-center text-center border-8 border-[#191919] rounded-full before:rounded-full after:rounded-full after:absolute before:absolute before:-inset-2 pie no-round"
    style="--p: 20; --c: rgba(252, 230, 0, 1)"
  >
    <span
      class="absolute inset-0 w-full h-full before:absolute before:inset-0 before:w-7 before:h-7 before:left-[4.5rem] lg:before:left-24 before:-top-4 before:bg-minutes before:rounded-full transition-all duration-500 dot"
      id="dot-minute"
    ></span>
    <h3
      class="font-bold text-base lg:text-lg xl:text-xl flex flex-col gap-1 lg:gap-3"
    >
      <span
        class="text-4xl md:text-5xl lg:text-6xl xl:text-7xl"
        id="minutes"
      ></span>
      <span>MINUTES</span>
    </h3>
  </article>
  <article
    class="relative w-48 h-48 lg:w-56 lg:h-56 xl:w-60 xl:h-60 inline-grid place-content-center text-center border-8 border-[#191919] rounded-full before:rounded-full after:rounded-full after:absolute before:absolute before:-inset-2 pie no-round"
    style="--p: 20; --c: rgba(6, 252, 63, 1)"
  >
    <span
      class="absolute inset-0 w-full h-full before:absolute before:inset-0 before:w-7 before:h-7 before:left-[4.5rem] lg:before:left-24 before:-top-4 before:bg-seconds before:rounded-full transition-all duration-500 dot"
      id="dot-second"
    ></span>
    <h3
      class="font-bold text-base lg:text-lg xl:text-xl flex flex-col gap-1 lg:gap-3"
    >
      <span
        class="text-4xl md:text-5xl lg:text-6xl xl:text-7xl"
        id="seconds"
      ></span>
      <span>SECONDS</span>
    </h3>
  </article>
  <article
    class="text-4xl md:text-5xl lg:text-6xl xl:text-7xl lg:relative absolute right-5"
    id="ampm"
  >
    PM
  </article>
</main>

3. Load the main script app.js in the document. Done.

<script src="./app.js" defer></script>

4. The required CSS styles for the ditigal clock.

.dot::before {
  box-shadow: 0 0 20px var(--c), 0 0 60px var(--c);
}
.pie {
  --p: 20;
}
.pie:before {
  background: radial-gradient(farthest-side, var(--c) 98%, #0000) top/8px 8px
      no-repeat,
    conic-gradient(var(--c) calc(var(--p) * 1%), #0000 0);
  -webkit-mask: radial-gradient(
    farthest-side,
    #0000 calc(99% - 8px),
    #000 calc(100% - 8px)
  );
  mask: radial-gradient(
    farthest-side,
    #0000 calc(99% - 8px),
    #000 calc(100% - 8px)
  );
}
.no-round:before {
  background-size: 0 0, auto;
}
.no-round:after {
  content: none;
}