JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<section class="abb-block">
  <div class="abb-accordion">
    <button class="abb-accordion__toggler js-accordion-toggler">
      Admin

      <span class="abb-button-action abb-button-action--position-right js-compare-license">Compare</span>
    </button>

    <div class="abb-accordion__content">
      <div class="abb-grid abb-grid--license abb-grid--one">
        <div class="abb-grid__item">
          <div class="abb-content">
            <div class="abb-content__group">
              <div class="abb-content__group-title">License</div>

              <div class="abb-content-row">
                <div class="abb-content-row__key">Version</div>
                <div class="abb-content-row__value">
                  <div class="abb-dropdown">
                    <select class="abb-dropdown__select">    
                      <option>1 - Inactive (Base)</option>
                      <option>2 - Inactive (Upgrade)</option>  
                      <option>3 - Inactive (Expansion)</option>
                      <option>4 - Inactive (Upgrade)</option>
                      <option>5 - Inactive (Expansion)</option>
                      <option selected>6 - Registred (Expansion)</option>
                    </select>
                  </div>
                </div>
              </div>

              <div class="abb-content-row">
                <div class="abb-content-row__key">Status</div>
                <div class="abb-content-row__value">Active</div>
              </div>
            </div>

            <div class="abb-content__group">
              <div class="abb-content__group-title">Product</div>

              <div class="abb-content-row">
                <div class="abb-content-row__key">Product</div>
                <div class="abb-content-row__value">Freelance 2019</div>
              </div>

              <div class="abb-content-row">
                <div class="abb-content-row__key">Version</div>
                <div...