JSFiddle - React, Tailwind, and code Playground

HTML

<div><div class="circle-1"></div>
<div class="circle-2"></div><br/><br/><br/><br/><br/>
<div class="circle-3"></div>
<div class="circle-4"></div></div>

CSS

.circle-1{
  float:left;
width: 90px;
height: 90px;
background: red;
-moz-border-radius: 90px 0 0 0;
-webkit-border-radius: 90px 0 0 0;
border-radius: 90px 0 0 0;
}
.circle-2 {
  float:left;
width: 90px;
height: 90px;
background: black;
-moz-border-radius: 90px 0 0 0;
-webkit-border-radius: 90px 0 0 0;
border-radius: 0 90px 0 0;
}
.circle-3 {
  float:left;
width: 90px;
height: 90px;
background: green;
-moz-border-radius: 90px 0 0 0;
-webkit-border-radius: 90px 0 0 0;
border-radius: 0 0 0 90px;
}
.circle-4 {
  float:left;
width: 90px;
height: 90px;
background: blue;
-moz-border-radius: 90px 0 0 0;
-webkit-border-radius: 90px 0 0 0;
border-radius: 0 0 90px 0;
}


.circle-1:hover{
  float:left;
width: 90px;
height: 90px;
background: orange;
-moz-border-radius: 90px 0 0 0;
-webkit-border-radius: 90px 0 0 0;
border-radius: 90px 0 0 0;
}
.circle-2:hover {
  float:left;
width: 90px;
height: 90px;
background: pink;
-moz-border-radius: 90px 0 0 0;
-webkit-border-radius: 90px 0 0 0;
border-radius: 0 90px 0 0;
}
.circle-3:hover {
  float:left;
width: 90px;
height: 90px;
background: brown;
-moz-border-radius: 90px 0 0 0;
-webkit-border-radius: 90px 0 0 0;
border-radius: 0 0 0 90px;
}
.circle-4:hover {
  float:left;
width: 90px;
height: 90px;
background: purple;
-moz-border-radius: 90px 0 0 0;
-webkit-border-radius: 90px 0 0 0;
border-radius: 0 0 90px 0;
}