JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div>
  <input htmlFor="check" 
    type="checkbox" 
    id="check" 
    name="check" 

    

    />
  <label for="check" class="checkbox"></label>
</div>

CSS

.checkbox {
  display: block;
  width: 16px;
  height: 16px;
  background-color: #FFFF;
  border-radius: 0px;
  border-style: hidden;
  position: relative;
  margin-top: 4px;
}

.checkbox::after {
  content:'';
  position: absolute;
  display:block;
  width: 9px;
  height: 9px;
  align-content: center;
  background-color: #006972;
  opacity: 0;
  transition: all 0.4s;
}

#check:checked ~ .checkbox {
  opacity: 1;
}