JSFiddle - React, Tailwind, and code Playground

by Bouteille Dimitri

HTML

<label class="checked">
  <input type="radio" class="checked-input">
  <span class="checked-label">Document</span>
</label>

<label class="checked">
  <input type="radio" class="checked-input">
  <span class="checked-label">Document</span>
</label>

SCSS

.checked {

  
  &-input {
    
    display: none;
    &:checked {
      ~ .checked-label {
        &:after {
          opacity: 1;
        }
      }
    }
  }

  position: relative;
  &-label {
    background: rgba(186,104,200, 0.6);
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 8px;
    &:after {
      content: "";
      background: rgb(186,104,200);
      width: 12px;
      height: 12px;
      display: inline-block;
      margin-left: 5px;
      z-index: 5;
      margin-top: 2px;
      border-radius: 50%;
      transition: all 0.3s ease;
      opacity: 0;
    }
  }
  
  
}