JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<p class="form-row form-row-wide cart-tips" id="cart-tip_field" data-priority="">
  <span class="woocommerce-input-wrapper">
    <input type="radio" class="input-radio cart-tip" value="0" name="cart-tip" id="cart-tip_0">
    <label for="cart-tip_0" class="radio ">None</label>
    <input type="radio" class="input-radio cart-tip" value="10" name="cart-tip" id="cart-tip_10">
    <label for="cart-tip_10" class="radio ">10%</label>
    <input type="radio" class="input-radio cart-tip" value="15" name="cart-tip" id="cart-tip_15">
    <label for="cart-tip_15" class="radio ">15%</label>
    <input type="radio" class="input-radio cart-tip" value="18" name="cart-tip" id="cart-tip_18">
    <label for="cart-tip_18" class="radio ">18%</label>
    <input type="radio" class="input-radio cart-tip" value="20" name="cart-tip" id="cart-tip_20" checked="checked">
    <label for="cart-tip_20" class="radio ">20%</label>
  </span>
</p>