JSFiddle - React, Tailwind, and code Playground

by HaitraMysh

HTML

<div class="input-container">
  <input id="cb1" type="checkbox" checked />
</div>
<div class="input-container">
  <input id="cb2" type="checkbox" />
</div>

<div class=radio-container>
  <div class="input-container">
    <input id="r1" type="radio" name="test-radio" checked />
  </div>
  <div class="input-container">
    <input id="r2" type="radio" name="test-radio" />
  </div>
  <div class="input-container">
    <input id="r3" type="radio" name="test-radio" />
  </div>
  <div class="input-container">
    <input id="r4" type="radio" name="test-radio" />
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.input-container {
  height: 25px;
}

input[type="checkbox"],
input[type="radio"] {
  width: 14px;
  height: 14px;
  margin: 3px;
}

input[type="checkbox"] {
  border-radius: 2px;
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="checkbox"], input[type="radio"] {
  accent-color: red;
}

input[type="checkbox"]:not(:checked),
input[type="radio"]:not(:checked) {
  appearance: none;
  background-color: #a8f8a8;
  border: 2px solid red;
}

.radio-container {
  margin-top: 20px;
}