Make clock divider blink

src/components/Datetime/Datetime.tsx

@@ -21,11 +21,8 @@ export default function Datetime() {
         year: "numeric",
     });
 
-    const time = today.toLocaleTimeString(locale, {
-        hour: "numeric",
-        hour12: false,
-        minute: "numeric",
-    });
+    const hour = today.getHours().toString().padStart(2, "0");
+    const minute = today.getMinutes().toString().padStart(2, "0");
 
     return (
         <div className={style.container}>
@@ -33,7 +30,11 @@ export default function Datetime() {
                 <img src="src/assets/clock.png" />
             </div>
             <div className={style.textContainer}>
-                <div className={style.time}>{time}</div>
+                <div className={style.time}>
+                    {hour}
+                    <span className={style.divider}>:</span>
+                    {minute}
+                </div>
                 <div className={style.date}>{date}</div>
             </div>
         </div>

src/components/Datetime/style.module.css

@@ -18,3 +18,13 @@ img {
   display: flex;
   flex-direction: column;
 }
+
+.divider {
+  animation: blink 3s step-end infinite;
+}
+
+@keyframes blink {
+    50% {
+    opacity: 0;
+  }
+}