JSFiddle - React, Tailwind, and code Playground

by ttquang1063750

HTML

<div class="container">
  <svg class="circle yellow" width="100%" height="100%" viewBox="0 0 18 18">
   <circle cx="9" cy="9" r="9" opacity="0.25"/>
   <circle cx="9" cy="9" r="5" stroke-width="1" stroke="white"/>
  </svg> 

  <svg class="circle green" width="100%" height="100%" viewBox="0 0 18 18">
   <circle cx="9" cy="9" r="9" opacity="0.25"/>
   <circle cx="9" cy="9" r="5" stroke-width="1" stroke="white"/>
  </svg> 

  <svg class="circle pink" width="100%" height="100%" viewBox="0 0 18 18">
   <circle cx="9" cy="9" r="9" opacity="0.25"/>
   <circle cx="9" cy="9" r="5" stroke-width="1" stroke="white"/>
  </svg> 
</div>

SCSS

.container {
  width: 100%;
  height: 500px;
  font-size: 60px; // Adjust font-size to see the result
}


.circle {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  
  &.yellow {
    fill: #ffc20e;
  }
  
  
  &.green {
    fill: #72d6a1;
  }
  
  &.pink {
    fill: #ec3c8e;
  }
}