JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<div
  data-block-name="woocommerce/add-to-cart-form"
  data-is-descendant-of-same-page-checkout="false"
  data-is-descendent-of-single-product-block="true"
  data-quantity-selector-style="stepper"
  class="wp-block-add-to-cart-form wc-block-add-to-cart-form product wc-block-add-to-cart-form--stepper wp-block-woocommerce-add-to-cart-form"
  data-wp-interactive="woocommerce/add-to-cart-form"
>
  <form
    class="cart"
    action="https://sandbox.lndo.site/product/grape-soda/"
    method="post"
    enctype="multipart/form-data"
    data-dashlane-rid="c81db9906838df26"
    data-dashlane-classification="shopping_basket"
  >
    <div class="quantity wc-block-components-quantity-selector">
      <label class="screen-reader-text" for="quantity_67323da792380"
        >Grape Soda quantity</label
      >
      <button
        aria-label="Reduce quantity of Grape Soda"
        type="button"
        data-wp-on--click="actions.removeQuantity"
        class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus"
      >
        –</button
      ><input
        type="number"
        id="quantity_67323da792380"
        class="input-text qty text wc-block-components-quantity-selector__input"
        name="quantity"
        value="1"
        aria-label="Product quantity"
        min="1"
        max=""
        step="1"
        placeholder=""
        inputmode="numeric"
        autocomplete="off"
        data-dashlane-rid="141625ce889a8178"
        data-dashlane-classification="other"
      /><button
        aria-label="Increase quantity of Grape Soda"
        type="button"
        data-wp-on--click="actions.addQuantity"
        class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus"
        data-dashlane-label="true"
        data-dashlane-rid="290adffa6dcf630c"
        data-dashlane-classification="other"
      >
        +
      </button>
    </div>

    <input
      type="hidden"
     ...