Tabs

<div class="ln-tabs" data-ln-tabs>
  <div class="ln-tabs__list">
    <button class="ln-tabs__tab" id="t1" aria-controls="p1" aria-selected="true">Overview</button>
    <button class="ln-tabs__tab" id="t2" aria-controls="p2" aria-selected="false">Features</button>
    <button class="ln-tabs__tab" id="t3" aria-controls="p3" aria-selected="false">Pricing</button>
  </div>
  <div class="ln-tabs__panel" id="p1" aria-labelledby="t1">
    A general overview of the product and its key benefits.
  </div>
  <div class="ln-tabs__panel" id="p2" aria-labelledby="t2">
    Detailed feature list with comparisons across plans.
  </div>
  <div class="ln-tabs__panel" id="p3" aria-labelledby="t3">
    Flexible pricing tiers for teams of any size.
  </div>
</div>

<div class="ln-tabs ln-tabs--pills" data-ln-tabs>
  <div class="ln-tabs__list">
    <button class="ln-tabs__tab" id="pill1" aria-controls="pp1" aria-selected="true">Day</button>
    <button class="ln-tabs__tab" id="pill2" aria-controls="pp2" aria-selected="false">Week</button>
    <button class="ln-tabs__tab" id="pill3" aria-controls="pp3" aria-selected="false">Month</button>
  </div>
  <div class="ln-tabs__panel" id="pp1" aria-labelledby="pill1">
    Showing today's schedule with hourly breakdown.
  </div>
  <div class="ln-tabs__panel" id="pp2" aria-labelledby="pill2">
    Weekly overview across all active projects.
  </div>
  <div class="ln-tabs__panel" id="pp3" aria-labelledby="pill3">
    Monthly summary with milestones and deadlines.
  </div>
</div>

<div class="ln-tabs ln-tabs--boxed" data-ln-tabs>
  <div class="ln-tabs__list">
    <button class="ln-tabs__tab" id="box1" aria-controls="bp1" aria-selected="true">Code</button>
    <button class="ln-tabs__tab" id="box2" aria-controls="bp2" aria-selected="false">Preview</button>
    <button class="ln-tabs__tab" id="box3" aria-controls="bp3" aria-selected="false">Tests</button>
  </div>
  <div class="ln-tabs__panel" id="bp1" aria-labelledby="box1">
    Source code for the selected component.
  </div>
  <div class="ln-tabs__panel" id="bp2" aria-labelledby="box2">
    Live rendered output of the component.
  </div>
  <div class="ln-tabs__panel" id="bp3" aria-labelledby="box3">
    Unit and integration test results.
  </div>
</div>