JSFiddle - React, Tailwind, and code Playground

by von

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Timer</title>
    <script src="https://unpkg.com/[email protected]/dayjs.min.js"></script>
    <style>
      *,
      *::after,
      *::before {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
        background-color: #f2f2f2;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Arial, Helvetica, sans-serif;
      }
      #root {
        opacity: 1;
      }
      .zoomIn {
        animation-name: zoomIn;
        animation-duration: 1s;
        animation-timing-function: ease-in;
        animation-fill-mode: forwards;
      }
      @keyframes zoomIn {
        0% {
          transform: scale(5);
          opacity: 0;
        }
        50% {
          transform: scale(1);
          opacity: 1;
        }
        100% {
          transform: scale(0);
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script>
      let numPic = 2;
      const rootEl = document.querySelector("#root");
      const countDown = () => {
        let count = 5;
        const interval = setInterval(() => {
          rootEl.classList.remove("zoomIn");
          rootEl.innerHTML = `<h1 class="zoomIn">${count--}</h1>`;
          if (count === 0) {
            clearInterval(interval);
            setTimeout(pictureTimer, 0);
          }
        }, 1000);
      };
      const pictureTimer = () => {
        const image = document.createElement("img");
        const display = document.createElement("h1");
        display.style.textAlign = "center";
        image.src = `https://source.unsplash.com/random/1250x720?time,${new Date()}`;
        rootEl.innerHTML = "";
        rootEl.append(image);
        rootEl.append(display);
        const START_DATE = dayjs();
       ...