JSFiddle - React, Tailwind, and code Playground

by Kang Yuan

HTML

<body>

     <div class="div">

           <ul>

           <li><span>1</span></li>

            <li><span>2</span></li>

            <li><span>3</span></li>

             <li><span>4</span></li>

       </ul>

     </div>

 </body>

CSS

.div

           {

               width: 240px;

           position: absolute;

           }

         ul

         {

              list-style: none;

              margin-left: -50px;

         }

       ul li

      {

              width: 50px;

             height: 50px;

               margin-left: 10px;

              float: left;

             border: 1px solid #ccc;

             background-color: #ccc;

          border-radius:25px;

            text-align: center;

        }

          li:hover

        {

              background-color: red;

        }

        span

          {

           font-size: 30px;

           line-height: 50px;

       }