JSFiddle - React, Tailwind, and code Playground

by Gass_snippets

HTML

<body>
<section>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</section>
</body>

CSS

body{
  margin:0;
  background-color:rebeccaPurple;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}
section{
  display:grid;
  grid-template-columns: auto auto auto;
  height:200px;
  width:300px;
}
div:nth-child(even){
  background-color:khaki;
  border-radius:0% 0% 50% 50%;
}
div:nth-child(2){
  transform:rotate(180deg);
}