JSFiddle - React, Tailwind, and code Playground

by Gass_snippets

HTML

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

CSS

body{
  height:100vh;
  display:grid;
  place-items:center;
  background:#0b2429;
}

section{
  height:200px; 
  width:200px;
  display:grid;
  grid-template-columns: auto auto auto auto;
}

div:nth-child(3),
div:nth-child(4),
div:nth-child(8),
div:nth-child(9),
div:nth-child(10),
div:nth-child(13),
div:nth-child(14){
  background-color:gold;
}

div:nth-child(6),
div:nth-child(7),
div:nth-child(11){
  background-color:darkOliveGreen;
}

div:nth-child(3),
div:nth-child(6),
div:nth-child(9){
  border-radius:100% 0 0 0;
}

div:nth-child(4){
  border-radius:0 100% 0 0;
}
div:nth-child(8),
div:nth-child(14),
div:nth-child(11){
  border-radius:0 0 100% 0;
}

div:nth-child(13){
  border-radius:0 0 0 100%;
}