JSFiddle - React, Tailwind, and code Playground

HTML

<div class="one">первый</div>
<div class="two">второй</div>
<div class="three">третий</div>
<div class="four">четыре</div>
<div class="fife">пять</div>

CSS

.one {

    width: 15%;
    height: 20%;
    border-radius: 100px;
    border: 9px solid #ff3399;
    float: left;
    top: 10%;
    left: 10%;
    position: relative;
    
    }

  .two {

    width: 15%;
    height: 20%;
    float: left;
    border: 9px solid #ffcc99;
    border-radius: 100px;
    left: 130px;
    top: 10%;
    position: relative;
  }

  .three {

    width: 15%;
    height: 20%;
    float: left;
    border: 9px solid #ffcc33;
    border-radius: 100px;
    left: 135px;
    top: 10%;
    position: relative;
        
    
    

  }


.four {
    width: 15%;
    height: 20%;
    float: left;
     border: 9px solid #ffcc55;
    border-radius: 100px;
    left: -30%;
    top: 200px;
    position: relative;


    }

  .fife {

      width: 15%;
    height: 20%;
    float: left;
     border: 9px solid #ffcc66;
    border-radius: 100px;
    left: -30%;
    top: 200px;
    position: relative;v
  }