JSFiddle - React, Tailwind, and code Playground

by ecropolis

HTML

<div class="minicart-subscription-widget">
  <div class="minicart-subscription-widget-wrapper">
    <button>
      <span>Click to subscribe <b>&amp; Save 10%</b></span>
    </button>
  </div>

  <div class="minicart-subscription-dropdown">
    <div class="minicart-subscription-dropdown-wrapper">
      <div class="minicart-subscription-dropdown-list">
        <ul class="minicart-subscription-options">
          <li>
            <h3>Pay Full Price</h3>
          </li>
          <li>
            <input id="onetime" type="radio" name="sellingPlan" value="0">
            <label for="onetime">One-time Only</label>
          </li>
          <li>
            <h3>Subscribe &amp; Save 10%</h3>
          </li>
          <li>
            <input id="deliver30" type="radio" name="sellingPlan" value="1159200855">
            <label for="deliver30">Deliver every 30 Days</label></li>
          <li>
            <input id="deliver45" type="radio" name="sellingPlan" value="618594391">
            <label for="deliver45">Deliver every 45 Days</label></li>
          <li>
            <input id="deliver60" type="radio" name="sellingPlan" value="618627159">
            <label for="deliver60">Deliver every 60 Days</label>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS

.minicart-subscription-widget .minicart-subscription-widget-wrapper {
    display: flex;
    height: 36px;
    margin-top: 10px;
    width: 100%;
  }

  /* Ecropolis */
  .minicart-subscription-widget {
    font-family: Zurich, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    width: 90%;
    max-width: 220px;
  }

  .minicart-subscription-widget button.btn-upgrading {
    color: #a9a9a9;
  }

  .minicart-subscription-widget button {
    position: relative;
    display: inline-block;
    padding: 8px 16px;
    background: #fcfcfc;
    border: 1px solid #dadada;
    border-radius: 4px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    width: 100%;
  }

  .minicart-subscription-widget.minicart-subscription-dropdown--open button {
    border-radius: 4px 4px 0 0;
  }

  .minicart-subscription-widget.minicart-subscription-dropdown--options button {
    padding-right: 28px;
  }

  .minicart-subscription-widget.minicart-subscription-dropdown--options button::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #333 transparent transparent transparent;
  }
  
   .minicart-subscription-widget.minicart-subscription-dropdown--open button::after {
     transform: rotate(180deg);
  }

  .minicart-subscription-widget button:hover {
    background-color: #ddd;
  }

  .minicart-subscription-dropdown {
    z-index: 2;
    background: #fff;
    overflow: hidden;
    transition: all 5s ease-in-out;
    height: 0;
    width: 99%;
    border-radius: 0 0 4px 4px;
  }

  .minicart-subscription-dropdown-list h3 {
    font-size: 1em;
    margin: .6em 0 0 .6em;
  }

  .minicart-subscription-dropdown-list ul {
    list-style: none;
    margin-left: 1em;
    margin: 0 0 15px;
    padding: 0;
  }

  .minicart-subscription-dropdown-list ul>li {
    line-height: 1.2em;
   ...

JavaScript

const addEventListenerToInputs = (widget) => {
  //console.log('target', target);
  const listItems = widget.options.querySelectorAll('li');
  listItems.forEach((listItem) => {
    const input = listItem.querySelector('input');
    const label = listItem.querySelector('label');
    //console.log('input', input)
    if (input)
      input.addEventListener('input', function() {
        console.log('Input value changed:', input.value);
        widget.classList.remove('minicart-subscription-dropdown--open');
        if (input.value === '0') {
          widget.classList.remove('minicart-subscription-dropdown--options');
          localStorage.removeItem('sub');
          widget.btn.innerHTML = '<span>Click to subscribe <b>&amp; Save 10%</b></span>';
        } else {
          widget.btn.innerHTML = '<span>' + label.textContent + '</span>';
          setChecked(widget.options, input.id);
          setSubscription(input.value);
        }
      });
  });
}
const setOption = (widget, option) => {
  widget.classList.add('minicart-subscription-dropdown--options');
  widget.btn.innerHTML = '<span>Deliver every '+(option.slice(-2))+' days</span>';
  setChecked(widget.options, option);
}
const setChecked = (form, inputId) => {
  const input = document.getElementById(inputId);
  console.log('input', input);
  console.log('setChecked', inputId);
  if (input) {
    input.checked = true;
    localStorage.setItem('sub', inputId);
  }
}

const widgets = document.getElementsByClassName("minicart-subscription-widget");

for (let widget of widgets) {
  widget.dropdown = widget.getElementsByClassName("minicart-subscription-dropdown")[0];
  widget.options = widget.dropdown.getElementsByClassName("minicart-subscription-options")[0];
  widget.btn = widget.querySelectorAll('button')[0];
  widget.btn.txt = widget.btn.children[0];

addEventListenerToInputs(widget);

/*
if(typeof sub !== undefined){
	console.log('subscription set ***', sub);
  setOption(widget,...