JSFiddle - React, Tailwind, and code Playground

by Gass_snippets

HTML

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

CSS

body{
  background:deepPink;
  height:100vh;
  display:grid;
  place-items:center;
}
body > *{aspect-ratio:1}
section{
  height: 200px;
  display:grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
}
section > *{
  box-sizing:border-box;
  height:100px; 
}
div:nth-child(1){
  background:darkCyan;
  border-radius:100% 0 0 0;
}
div:nth-child(2){
  background:khaki;
  border-radius:0 100% 0 0;
}
div:nth-child(3){
  background:AntiqueWhite;
  border-radius:0 0 0 100%;
}