JSFiddle - React, Tailwind, and code Playground

HTML

<label class="radio"><input type="radio" name="productVariantSize" class="product-variant-size" value="XS"><span>XS</span></label> 
                
                
              
                
            <label class="radio"><input type="radio" name="productVariantSize" class="product-variant-size" value="S"><span>S</span></label> 
                
                
              
                
            <label class="radio"><input type="radio" name="productVariantSize" class="product-variant-size" value="M"><span>M</span></label> 
                
                
              
                
            <label class="radio"><input type="radio" name="productVariantSize" class="product-variant-size" value="L"><span>L</span></label> 
                
                
              
                
            <label class="radio"><input type="radio" name="productVariantSize" class="product-variant-size" value="XL"><span>XL</span></label> 
                
                
              
                
            <label class="radio"><input type="radio" name="productVariantSize" class="product-variant-size" value="XXL"><span>XXL</span></label> 
                
                
              
                
            <label class="radio"><input type="radio" name="productVariantSize" class="product-variant-size" value="XXXL"><span>XXXL</span></label> 
            
            <input checked="checked" type="checkbox"> Test with a real tracking company </input>

CSS

/* product size selector */
label.radio {
	display: inline; 
}

label.radio input[type="radio"] {
  	display:none;
}

label.radio span {
	display: inline-block;
    vertical-align:middle;
  	margin: 3px 3px 8px 3px;
	padding: 4px 4px;
	text-align: center;
	width: 32px;
	background-color: rgba(0,0,0,0.2);
	border-color: #ddd;
	font-size: 10px;
  	font-weight: normal;
}

label.radio :checked + span {
	background-image: none;
	background-color:rgba(0,0,0,0.5);
}