JSFiddle - React, Tailwind, and code Playground

by oktaviardi pratama

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ice Cream Flavors</title>
    <style>
      li {
        width: 118px;
        padding: 5px;
        text-align: center;
        list-style-type: none;
      }
      /* Write your CSS solution here (do not edit the surrounding HTML or CSS) */
      
      ul {
          margin: 0 auto;
          width: 600px;
      }
      @media (min-width: 600px) {
        ul {
          text-align:center;
        }
        li:first-child {
          border-top: solid 1px #000;
          border-left: solid 1px #000;
          border-bottom: solid 1px #000;
        }
        li {
          border-top: solid 1px #000;
          border-bottom: solid 1px #000;
          display:inline-block;
        }
        li:last-child {
          border-top: solid 1px #000;
          border-right: solid 1px #000;
          border-bottom: solid 1px #000;
        }
      }
      @media (max-width: 599px) {
         ul {
          width: 118px;
        }
        li:first-child {
          border-top: solid 1px #000;
          border-left: solid 1px #000;
          border-right: solid 1px #000;
        }
        li {
          display:block;
          border-left: solid 1px #000;
          border-right: solid 1px #000;
        }
        li:last-child {
          border-left: solid 1px #000;
          border-right: solid 1px #000;
          border-bottom: solid 1px #000;
        }
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Butterscotch</li>
      <li>Caramel Apple</li>
      <li>Chocolate</li>
      <li>Vanilla</li>
    </ul>
  </body>
</html>

JavaScript

function countdown(seconds) {
var delay = 0;
while(seconds >=0) {
(function() {
var time = seconds;
setTimeout(function () {
console.log(time);
}, delay++)
}())
seconds--;
}
}
countdown(10)