JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<ul class="checkee">
  <li>This is something</li>
  <li>This is something</li>
  <li>This is something</li>
  <li>This is something Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque nesciunt ex corporis soluta, commodi ab officia exercitationem. Expedita tempore iure harum accusamus libero voluptas officiis deserunt. Blanditiis non hic omnis.</li>

</ul>

SCSS

.checkee {
  
  list-style-type:none;
  padding:0;
  
  li {
    margin: 0;
    padding: 0 0 0 40px;
    position:relative;
    min-height: 35px;
    padding-top: 5px;
          transition: all 0.3s linear;

    
    &::before {
      width: 30px;
      height: 30px;
      content: '';
      display:block;
      border: 1px solid #00BCF2;
      position: absolute;
      top: -2px;
      left: 0;
      border-radius: 20px;
      
      transform: scale(0.3);
                transition: all 0.3s linear;

    }
      &::after {
      width: 10px;
      height: 16px;
      content: '';
      display:block;
      /* border: 1px solid blue; */
      box-shadow: 1px 1px 0 #00BCF2;
      position: absolute;
      top: 3px;
      left: 12px;
      transform: rotate(45deg) scale(0);
      transition: all 0.1s linear;
      opacity:0;
      
      //setup
      
    }
    
     &:hover{
    
      &::after {
        opacity: 1;
        transform: scale(1) rotate(45deg);
       
        
      }
        &::before {
        opacity: 1;
        transform: scale(1);
       
        
      }
    } 
  }
}