prices-as-code/docs/components/pricing-calculator.html

Prices as Code (PaC) - Define your product pricing schemas with type-safe definitions

<div id="pricing-calculator" class="pricing-calculator">
  <h3>Price Calculator</h3>
  
  <div class="options">
    <div class="option">
      <input type="radio" id="basic-monthly" name="price-option" value="9.99" checked>
      <label for="basic-monthly">Basic Monthly ($9.99/mo)</label>
    </div>
    <div class="option">
      <input type="radio" id="basic-annual" name="price-option" value="7.99">
      <label for="basic-annual">Basic Annual ($7.99/mo)</label>
    </div>
    <div class="option">
      <input type="radio" id="pro-monthly" name="price-option" value="19.99">
      <label for="pro-monthly">Pro Monthly ($19.99/mo)</label>
    </div>
    <div class="option">
      <input type="radio" id="pro-annual" name="price-option" value="16.99">
      <label for="pro-annual">Pro Annual ($16.99/mo)</label>
    </div>
  </div>
  
  <div class="quantity">
    <label for="quantity">Quantity:</label>
    <input type="number" id="quantity" name="quantity" min="1" value="1">
  </div>
  
  <div class="total">
    <h4>Total Monthly Price: <span class="total-price">$9.99</span></h4>
  </div>
</div>