JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div class="grid">

  <label class="item-checkbox item-checkbox-path">
    <input type="checkbox">
    <svg viewBox="0 0 16 16">
      <path d="M3.688,8.938l4.344,2.344L13.938,1H1V15H15V1" />
    </svg>
    <span>Test</span>
  </label>

  <label class="item-checkbox item-checkbox-path">
    <input type="checkbox" checked>
    <svg viewBox="0 0 16 16">
      <path d="M3.688,8.938l4.344,2.344L13.938,1H1V15H15V1" />
    </svg>
    <span>Lorem ipsum</span>
  </label>

  <!-- -- -->
  <div class="options">
    <input name="option" type="radio" id="click" checked>
    <label for="click">Click Me</label>


    <input name="option" type="radio" id="touch">
    <label for="touch">Touch Me</label>
  </div>

  <!--<label for="rdo-1" class="btn-radio">
    <input type="radio" id="rdo-1" name="radio-grp">
    <svg width="18px" height="18px" viewBox="0 0 18 18">
      <path d="M4,0A4,4,0,1,1,0,4,4,4,0,0,1,4,0Z" class="inner"></path>
      <path d="M4,0A4,4,0,1,1,0,4,4,4,0,0,1,4,0Z" class="inner"></path>
      <path d="M10,1h0a9,9,0,0,1,9,9h0a9,9,0,0,1-9,9h0a9,9,0,0,1-9-9H1a9,9,0,0,1,9-9Z" class="outer"></path>
    </svg>
    <span>One</span>
  </label>
  
  <label for="rdo-2" class="btn-radio">
    <input type="radio" id="rdo-2" name="radio-grp">
    <svg width="18px" height="18px" viewBox="0 0 18 18">
      <circle cx="8" cy="8" r="7"></circle>
      <path d="M10,7 C8.34314575,7 7,8.34314575 7,10 C7,11.6568542 8.34314575,13 10,13 C11.6568542,13 13,11.6568542 13,10 C13,8.34314575 11.6568542,7 10,7 Z" class="inner"></path>
      <path d="M10,1 L10,1 L10,1 C14.9705627,1 19,5.02943725 19,10 L19,10 L19,10 C19,14.9705627 14.9705627,19 10,19 L10,19 L10,19 C5.02943725,19 1,14.9705627 1,10 L1,10 L1,10 C1,5.02943725 5.02943725,1 10,1 L10,1 Z" class="outer"></path>
    </svg>
    <span>Two</span>
  </label>-->

</div>

SCSS

$background: #fff;
$border: #043C77;
$stroke: #DB2242;

.item-checkbox {
    
    position: relative;
    cursor: pointer;
    
    span {
      display: inline-block;
    }
    
    input,
    svg {
        width: 16px;
        height: 16px;
        display: inline-block;
    }
    input {
        -webkit-appearance: none;
        -moz-appearance: none;
        position: relative;
        outline: none;
        background: $background;
        border: none;
        margin: 0;
        padding: 0;
        cursor: pointer;
        border-radius: 0px;
        transition: box-shadow .4s;
        box-shadow: inset 0 0 0 1px $border;
    }
    svg {
        pointer-events: none;
        fill: none;
        stroke-width: 2px;
        stroke-linecap: square;
        stroke-linejoin: square;
        stroke: $stroke;
        position: absolute;
        top: 0;
        left: 0;
        width: 16px;
        height: 16px;
        transform: scale(1) translateZ(0);
    }
    &.item-checkbox-path {
        input {
            &:checked {
                transition-delay: .4s;
                & + svg {
                    stroke-dasharray: 14.8 86;
                    stroke-dashoffset: 102.22;
                }
            }
        }
        svg {
            stroke-dasharray: 86.12;
            stroke-dashoffset: 86.12;
            transition: stroke-dasharray .6s, stroke-dashoffset .6s;
        }
    }
}

/*================================================================================*/

$spacing-unit: 16px;
$half-spacing-unit: $spacing-unit / 2;
$quarter-spacing-unit: $spacing-unit / 4;

.options {
  
  & input {
    display: none;
  }
  // .options > label
  & > label {
    display: inline-block;
    position: relative;
    margin-right: $spacing-unit;
    padding-left: $spacing-unit + $half-spacing-unit;
    cursor: pointer;

    &:before {
      content: "";
      display: block;
      position: absolute;
      width: 18px;
      height: 18px;
      left: 0;
      top:...