JSFiddle - React, Tailwind, and code Playground

by Jayson Buquia

HTML

<div class="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius maiores praesentium illo iusto, natus maxime unde eveniet explicabo ullam laborum sint et adipisci, quidem fuga iste esse reiciendis nesciunt atque.</div>
<div>
  <input type="radio" class="child">
  <input type="radio" class="child">
  <input type="radio" class="child">
  <input type="radio" class="child">
  <input type="radio" class="child">
  <input type="radio" class="child">
  <input type="radio" class="child">
  <input type="radio" class="child">
  <input type="radio" class="child">
  <input type="radio" class="child">
</div>

SCSS

.test {
  padding: 10px;
  width: 50%;
  height: 100px;
  background: #ddf;
}

.child {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 2px;
  background: #9c9;
  -webkit-appearance: n
  
  &::checked {
    background: red;
  }
}