JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.min.js"></script>
<div class="product single-product">

  <form class="cart">

    <div class="cart" data-bundled_item_id=99>

      <div class="nyp" data-minimum-error="Please enter at least %%MINIMUM%%." data-hide-minimum="" data-hide-minimum-error="Please enter a higher amount." data-max-price="" data-maximum-error="Please enter less than or equal to %%MAXIMUM%%." data-empty-error="Please enter an amount." data-min-price="50">


        <label id="nyp-label-1" for="nyp-1">Name your price ( $ )</label><input id="nyp-1" name="nyp" type="text" value="" title="Name your price ( $ )" class="input-text amount nyp-input text" aria-describedby="nyp-description-amount-1" aria-labelledby="nyp-error-1 nyp-label-1">
        <div id="nyp-description-amount-1" class="nyp-screen-reader-text screen-reader-text">Suggested price: $100.00. Minimum price: $50.00</div>
        <p class="minimum-price nyp-terms">Minimum price: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>50.00</span></p>
        <div id="nyp-error-1" class="woocommerce-nyp-message" aria-live="assertive" style="display: none">
          <ul class="woocommerce-error">
            <li>Please enter at least $50.00.</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="nyp" data-minimum-error="Please enter at least %%MINIMUM%%." data-hide-minimum="" data-hide-minimum-error="Please enter a higher amount." data-max-price="" data-maximum-error="Please enter less than or equal to %%MAXIMUM%%." data-empty-error="Please enter an amount." data-min-price="30">


      <label id="nyp-label-2" for="nyp-2">Name your price ( $ )</label><input id="nyp-2" name="nyp" type="text" value="" title="Name your price ( $ )" class="input-text amount nyp-input text" aria-describedby="nyp-description-amount-2" aria-labelledby="nyp-error-2 nyp-label-2">
      <div...

CSS

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  word-break: normal;
}

.product .nyp-disabled,
.wcopc .product-item .nyp-disabled {
  opacity: 0.2;
}

.product .single_variation_wrap .nyp,
.wcopc .product-item .single_variation_wrap .nyp {
  display: none;
}

.product .single_variation_wrap .suggested-text,
.wcopc .product-item .single_variation_wrap .suggested-text {
  margin-bottom: 1.5em;

}

.product .nyp,
.wcopc .product-item .nyp {
  margin-bottom: 1.5em;
}

.product .nyp label,
.wcopc .product-item .nyp label {
  font-weight: bold;
  display: block;
}

.product .nyp .nyp-input,
.wcopc .product-item .nyp .nyp-input {
  display: inline-block;
  margin-bottom: 0;
  text-align: center;
  font-weight: bold;
  min-width: 10em;
}

.product .nyp .minimum-price,
.wcopc .product-item .nyp .minimum-price {
  margin: 0;
  color: inherit;
  font-size: .75em;
  opacity: .7;
}

.product .nyp .woocommerce-nyp-message,
.wcopc .product-item .nyp .woocommerce-nyp-message {
  margin: 0 !important;
}

.product .nyp .woocommerce-nyp-message ul,
.wcopc .product-item .nyp .woocommerce-nyp-message ul {
  list-style-type: none;
  margin: 0;
}

.product .nyp .woocommerce-nyp-message ul li,
.wcopc .product-item .nyp .woocommerce-nyp-message ul li {
  margin: 0;
}

.product .nyp .woocommerce-nyp-message ul li:before,
.wcopc .product-item .nyp .woocommerce-nyp-message ul li:before {
  font-family: WooCommerce;
  content: "\e016";
  float: left;
  width: 1.4em;
}

.product .nyp:after,
.wcopc .product-item .nyp:after {
  content: "";
  display: table;
  clear: both;
}

.single-product .single_add_to_cart_button {


  background: #cd2653;

  border: none;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 1.3rem;
  font-weight:...

JavaScript

/* global woocommerce_nyp_params */
var woocommerce_nyp_params = {
  "currency_format_num_decimals": "2",
  "currency_format_symbol": "$",
  "currency_format_decimal_sep": ".",
  "currency_format_thousand_sep": ",",
  "currency_format": "%s%v",
  "annual_price_factors": {
    "day": "365",
    "week": "52",
    "month": "12",
    "year": "1"
  },
  "i18n_set_prices": "To continue, please enter valid amounts for all products\u2026",
  "i18n_set_prices_for": "To continue, please enter a valid amount for %s\u2026",
  "i18n_set_price_for_bundle": "To continue, please enter a valid amount\u2026"
};

/*-----------------------------------------------------------------*/
/*  Global script variable.                                        */
/*-----------------------------------------------------------------*/

var wc_nyp_scripts = [];

/*-----------------------------------------------------------------*/
/*  Global utility variables + functions.                          */
/*-----------------------------------------------------------------*/

// Format the price with accounting.js.
function woocommerce_nyp_format_price(price, currency_symbol, format) {

  if (typeof currency_symbol === 'undefined') {
    currency_symbol = '';
  }

  if (typeof format === 'undefined') {
    format = false;
  }

  var currency_format = format ? woocommerce_nyp_params.currency_format : '%v';

  return accounting.formatMoney(price, {
    symbol: currency_symbol,
    decimal: woocommerce_nyp_params.currency_format_decimal_sep,
    thousand: woocommerce_nyp_params.currency_format_thousand_sep,
    precision: woocommerce_nyp_params.currency_format_num_decimals,
    format: currency_format
  }).trim();

}

// Get absolute value of price and turn price into float decimal.
function woocommerce_nyp_unformat_price(price) {
  return Math.abs(parseFloat(accounting.unformat(price, woocommerce_nyp_params.currency_format_decimal_sep)));
}

/**
 * Container script object getter.
...