Daumix reusaball components

    <div class="js-module-accordion" aria-label="Accordion Control Group Buttons">
    <div class="c-accordion">
      <button class="c-accordion__control" aria-controls="accordion-content-1" aria-expanded="false">Apples</button>
      <div class="c-accordion__content" aria-hidden="true" id="accordion-content-1">
        <div class="c-accordion__content__inner">
          <p>Apples are a fine fruit often associated with good health, and fewer doctor's appointments.</p>
          <p>Example. An apple a day keeps the doctor away.</p>
        </div>
      </div>
    </div>

    <div class="c-accordion">
      <button class="c-accordion__control" aria-controls="accordion-content-2" aria-expanded="false">Content2</button>
      <div class="c-accordion__content" aria-hidden="true" id="accordion-content-2">
        <div class="c-accordion__content__inner">
          <p>Content2 wsup</p>
        </div>
      </div>
    </div>
  </div>

    <div class="c-tabs js-module-tabs">
    <ul class="c-tabs__tabs-list" role="tablist">
      <li class="c-tabs__tab c-tabs__tab--active">
        <a class="c-tabs__tab--selected" aria-controls="apples" aria-selected="true" href="#apples" id="tab-apples" role="tab"> Apples </a>
      </li>

      <li class="c-tabs__tab">
        <a aria-controls="bananas" aria-selected="false" href="#bananas" id="tab-bananas" role="tab" tabindex="-1">Bananas</a>
      </li>
    </ul>

    <div class="c-tabs__panels-container">
      <div aria-labelledby="tab-apples" class="c-tabs__tab-panel c-tabs__tab-panel--open c-tabs__tab-panel--animate-in" id="apples" aria-hidden="false" role="tabpanel">
        <div class="c-tabs__tab-panel__content">
          tab content for apples
        </div>
      </div>

      <div aria-labelledby="tab-bananas" class="c-tabs__tab-panel" role="tabpanel" aria-hidden="true" id="bananas">
        <div class="c-tabs__tab-panel__content">
          tab content for bananas
        </div>
      </div>
    </div>
  </div>

    <button class="popup-button" data-target="popup--some-popup">Open popup</button>

    <div class="popup popup--some-popup" aria-hidden="true" role="dialog" aria-labelledby="dialog1_label" aria-modal="true">
      <div class="popup__overlay"></div>

      <div class="popup__container">
        <div class="popup__content">
          <button class="popup__close-button">close</button>

          <p id="dialog1_label">hello hello popup content here</p>
        </div>
      </div>
    </div>

//window height offset until active class is added
    var offset = window.innerHeight * 0.75;
    
    var osActive = function () {
      for (var i = 0; i < document.querySelectorAll(".e-in").length; i++) {
        var el = document.querySelectorAll(".e-in")[i];
    
        if (el.getBoundingClientRect().top < offset) {
          if (!el.classList.contains("active")) {
            el.classList.add("active");
          }
        } else {
          el.classList.remove("active");
        }
      }
    };
    
    if (document.querySelectorAll(".e-in").length > 0) {
      window.addEventListener("load", function () {
        osActive();
      });
    
      window.addEventListener("scroll", function () {
        osActive();
      });
    }
    

    <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>

    <div class="swiper-button-prev">prev</div>
    <div class="swiper-button-next">next</div>
  </div>

    <div style="text-align: center">
    <button class="tooltip-button" aria-describedby="tooltip-1" aria-controls="tooltip-1">Tooltip button</button>
  </div>

  <div class="tooltip" id="tooltip-1">
    <div class="tooltip__content">I'm a tooltip<a href="#">hello test link</a> <a href="#">another link</a></div>
  </div>

  <button class="menu-trigger first">
    <span></span>
    <span></span>
    <span></span>
  </button>


  <button class="menu-trigger second">
    <span></span>
    <span></span>
    <span></span>
  </button>