JSFiddle - React, Tailwind, and code Playground

by Bouteille Dimitri

HTML

<p>
<input type="radio" id="sexe-m" name="sexe">
<label for="sexe-m" class="sexe-field">
  <span class="sexe-field-checker"></span>
  <span class="sexe-field-icon"></span>Male
</label>
</p>

<p>

<input type="radio" id="sexe-g" name="sexe">
<label for="sexe-g" class="sexe-field">
  <span class="sexe-field-checker"></span>Male
</label>

</p>

SCSS

$_pink: #EC407A;

input{
  display: none;
  
  &:checked {
    ~ label{
      span {
        &:after{
          top: 100%;
          height: 23px;
        }
      }
    }
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

.sexe-field{
  display: flex;
  align-items: center;
  margin: 60px;
  cursor: pointer;
  &-checker{
    position:relative;
    height: 25px;
    width: 25px;
    margin-right: 15px;
    border: solid 4px $_pink;
    border-radius: 50%;
    &:before {
      
    }
  }
}


/**
&:after {
      content: "";
      width: 3px;
      height: 0;
      background: $_pink;
      position:absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%);
      transition: all 0.25s ease;
    }
    &:before{
      content: "";
      background: $_pink;
      position:absolute;
      top: calc(100% + 10px);
      width: 17px;
      height: 3px;
      left: 50%;
      transform: translateX(-50%);
    }
    
    */