JSFiddle - React, Tailwind, and code Playground

by Kazzkiq

HTML

<label class="checkbox-customizado">
  <input type="checkbox" checked>
  <div class="novo-checkbox"></div>
  <span>Hop Hop! (clique em mim)</span>
</label>

<label class="checkbox-customizado">
  <input type="checkbox">
  <div class="novo-checkbox"></div>
  <span>Hop Hop! (clique em mim)</span>
</label>

<label class="checkbox-customizado">
  <input type="checkbox">
  <div class="novo-checkbox"></div>
  <span>Hop Hop! (clique em mim)</span>
</label>

<label class="checkbox-customizado">
  <input type="checkbox">
  <div class="novo-checkbox"></div>
  <span>Hop Hop! (clique em mim)</span>
</label>

<label class="checkbox-customizado">
  <input type="checkbox">
  <div class="novo-checkbox"></div>
  <span>Hop Hop! (clique em mim)</span>
</label>

SCSS

.checkbox-customizado {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  user-select: none;
  
  input {
    display: none;
    
    &:checked+.novo-checkbox {
      background: tomato;
    }
  }
  
  .novo-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background: #eee;
    margin-right: 10px;
    transition: all 0.4s linear;
  }
}