JSFiddle - React, Tailwind, and code Playground

by michananya

HTML

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  
  <div class="checkbox">
    <input type="checkbox" id="checkbox-1" class="checkbox__input">
    <label for="checkbox-1" class="checkbox__label">Checkbox 1</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="checkbox-2" class="checkbox__input">
    <label for="checkbox-2" class="checkbox__label">Checkbox 2</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="checkbox-3" class="checkbox__input">
    <label for="checkbox-3" class="checkbox__label">Checkbox 3</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="checkbox-4" class="checkbox__input">
    <label for="checkbox-4" class="checkbox__label">Checkbox 4</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="checkbox-5" class="checkbox__input">
    <label for="checkbox-5" class="checkbox__label">Checkbox 5</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="checkbox-6" class="checkbox__input">
    <label for="checkbox-6" class="checkbox__label">Checkbox 6</label>
  </div>
    <div class="checkbox">
    <input type="checkbox" id="checkbox-7" class="checkbox__input">
    <label for="checkbox-7" class="checkbox__label">Checkbox 7</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="checkbox-8" class="checkbox__input">
    <label for="checkbox-8" class="checkbox__label">Checkbox 8</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="checkbox-9" class="checkbox__input">
    <label for="checkbox-9" class="checkbox__label">Checkbox 9</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="checkbox-10" class="checkbox__input">
    <label for="checkbox-10" class="checkbox__label">Checkbox 10</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="checkbox-11" class="checkbox__input">
    <label...

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
    margin: 50px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

}

.checkbox {
  font-family: 'open-sans', sans-serif;
  line-height: 30px;
  height: 30px;
}

.checkbox__input {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.checkbox__label {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.87);
  position: relative;
  cursor: pointer;
  line-height: 30px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 28px;
}

.checkbox__label:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  margin: 3px;
  border: 2px rgba(0, 0, 0, 0.54) solid;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

.checkbox__input:checked ~ .checkbox__label:before {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K");
  background-color: #266268;
  border-color: #266268;
  -webkit-mask-image:...