JSFiddle - React, Tailwind, and code Playground

by sstur

HTML

<span class="checkbox">
    <input type="checkbox" />
    <span></span>
</span>
<span class="checkbox">
    <input type="checkbox" checked />
    <span></span>
</span>

<span class="radio">
    <input type="radio" name="x" />
    <span></span>
</span>
<span class="radio">
    <input type="radio" name="x" checked />
    <span></span>
</span>

CSS

.checkbox,
.radio {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  margin: 1px 6px 0 0;
  vertical-align: top;
  cursor: pointer;
}
.checkbox input,
.radio input {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  padding: 0;
  margin: 0;
  width: 18px;
  height: 18px;
  opacity: 0;
  z-index: 2;
}
.checkbox input + span,
.radio input + span {
  display: inline-block;
  position: relative;
  z-index: 1;
  border: 1px solid #e2e2e2;
  width: 16px;
  height: 16px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.checkbox input:checked + span,
.radio input:checked + span {
  background-color: #eee;
  border-color: #aaa;
}
.checkbox input:focus + span,
.radio input:focus + span {
  border-color: #66afe9;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6);
}
.checkbox input + span {
  border-radius: 2px;
}
.checkbox input:checked + span:before {
  content: "";
  display: block;
  width: 7px;
  height: 3px;
  border: 3px solid #545454;
  border-top-width: 0;
  border-right-width: 0;
  position: absolute;
  top: 4px;
  left: 3px;
  transform: rotate(-45deg);
}
.radio input + span {
  border-radius: 9px;
}
.radio input:checked + span:before {
  content: "";
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #444;
  top: 4px;
  left: 4px;
}