JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<body>
  <div class="game">
    <div id="center">
      <div class="count"></div>
    </div>
    <div id="tl"></div>
    <div id="tr"></div>
    <div id="bl"></div>
    <div id="br"></div>
  </div>
</body>

CSS

.game{
  height:500px;
  width:600px;
  background-color:violet;
  margin:0px auto;
  transform: translateY(5%);
  border-radius:0px; !important
}
div{
  width:200px;
  height:200px;
  background-color:#ccc;
  border-radius:100px;
}
#center{
  border: solid #fff 1px;
  margin: 0px auto 0px auto;
  -webkit-transform: translateY(75%);
  position:relative;
}
#tl, #tr, #bl, #br{
  height:200px;
  width:200px;
  position:absolute;
  z-index:-1;
}
#tl{
  border-radius:200px 0 0 0;
  background-color:yellow;
  margin:-152.5px auto 0px 95px;
}
#tr{
  border-radius:0 200px 0 0;
  background-color:blue;
  margin:-152.5px auto 0px 305px; 
}
#bl{
  border-radius:0 0 0 200px;
  background-color:green;
  margin:52.5px auto 0px 95px;
}
#br{
  border-radius:0 0 200px 0;
  background-color:red;
  margin:52.5px auto 0px 305px;
}
.count{
  height:50px;
  width:75px;
  background-color:orange;
  border-radius:25%; !important
  margin:100px auto 0px 20px;
      margin:75px auto;
    
}