Zerolines.js | Headless UI components without writing a single line of JavaScript.

Demo

All you need is attaching rolls and behaviors to your styled elements by using data-zl.

Above tabs are working by below code.

<div data-zl="tab-list">
  <button type="button" data-zl="tab-item target-[#tab1] default active-style-[active]">
    Tab 1
  </button>
  <button type="button" data-zl="tab-item target-[#tab2] active-style-[active]">
    Tab 2
  </button>
</div>
<div id="tab1">
  <!-- Tab1 Content Here -->
</div>
<div id="tab2" zl-cloak>
  <!-- Tab2 Content Here -->
</div>

<button type="button" data-zl="modal-toggle target-[#modal1]">
  Modal Open
</button>
<div id="modal1" data-zl="modal-backdrop" zl-cloak>
  <div data-zl="modal-content move-down-md">
    <!-- Content Here -->
    <button data-zl="modal-dismiss">Cancel</button>
  </div>
</div>

Modal Here!

Dismiss by clicking outside of modal content or dismiss button.
Scroll lock by default.

Action
Another action
Something else here

<!-- You may need relative/absolute position to the elements -->
<button type="button" data-zl="dropdown-toggle target-[#dropdown1]">
  Dropdown Button
</button>
<ul id="dropdown1" zl-cloak>
  <!-- List Content Here -->
</ul>