JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="pizza" name="food"> 
<label for="pizza">Pizza</label>

CSS

input[type="checkbox"]{
  display:none;
}

label{
  padding-left: 20px;
}

label::before{
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-left: -10px;
  margin-right: 10px;
  transition: transform 2s, opacity 2s; /* можно отдельным свойствам задать свои параметры перехода */
  transition: all 2s; /* а можно всем сразу (менее производительно) */
 ...