<!doctype html>
<html>
  <head>
    <title>Przykład: zakładki</title>
    <style type="text/css">

      *,
      *:after,
      *:before {
      box-sizing: border-box;
      }

      body {
        margin: 0;
        padding: 0;
      }

      /**
       * Style komponentu zakładki
       */

      .tab {
        background-color: #F2F2F2;
        margin-left: 0;
        margin-right: 0;
        position: relative;
      }

      .tab:hover {
        background-color: #F9F9F9;
      }

      .tab.active {
        background-color: #FFFFFF;
        color: #000000;
      }

      .tab > a {
        color: inherit;
        display: block;
        height: 100%;
        padding: 12px;
        text-decoration: none;
        width: 100%;
      }

      /**
       * Kontenery komponentu zakładki
       */

      .tab-group,
      .tab-group-vertical {
        list-style: none;
        margin: 0;
        padding-left: 0;
      }

      .tab,
      .tab-group,
      .tab-group-vertical {
        border-color: #EEEEEE;
        border-style: solid;
        border-width: 0;
      }

      /**
       * Grupy zakładek poziomych
       */

      .tab-group {
        border-bottom-width: 1px;
      }

      .tab-group .tab {
        border-bottom-width: 1px;
        border-top-width: 1px;
        bottom: -1px;
        display: inline-block;
      }

      .tab-group .tab:first-child {
        border-left-width: 1px;
        border-top-left-radius: 4px;
      }

      .tab-group .tab:last-child {
        border-right-width: 1px;
        border-top-right-radius: 4px;
      }

      .tab-group .tab.active {
        border-bottom-color: #2196F3;
        border-bottom-width: 1px;
      }

      /**
       * Grupy zakładek pionowych
       */

      .tab-group-vertical {
        border-left-width: 1px;
      }

      .tab-group-vertical .tab {
        border-left-width: 1px;
        border-right-width: 1px;
        left: -1px;
        display: block;
      }

      .tab-group-vertical .tab:first-child {
        border-top-width: 1px;
        border-top-right-radius: 4px;
      }

      .tab-group-vertical .tab:last-child {
        border-bottom-width: 1px;
        border-bottom-right-radius: 4px;
      }

      .tab-group-vertical .tab.active {
        border-left-color: #2196F3;
        border-left-width: 1px;
      }

      /**
       * Kontenery komponentu zakładki
       */

      .tabbed-pane {
        display: block;
        width: 100%;
      }

      .tabbed-pane .tab-group {
        float: left;
        width: 45%;
      }

      .tabbed-pane .tab-group:first-child {
        margin-right: 5%;
      }

      .tabbed-pane .tab-group:last-child {
        margin-left: 5%;
      }

      /**
       * Style strukturalne
       */

      .global-nav {
        float: left;
        padding: 5% 0;
        width: 10%
      }

      .content {
        float: left;
        padding: 5%;
        width: 80%;
      }

    </style>
  </head>
  <body>
    <nav class="global-nav">
      <ul class="tab-group-vertical">
        <li class="tab"><a href="#">Strona główna</a>
        <li class="tab active"><a href="#">Reguły &amp; opłaty</a>
        <li class="tab"><a href="#">Dokumenty</a>
        <li class="tab"><a href="#">Faktury</a>
      </ul>
    </nav>

    <main class="content">
      <nav class="tabbed-pane">
        <ul class="tab-group">
          <li class="tab active"><a href="#">Reguła pierwsza</a>
          <li class="tab"><a href="#">Reguła druga</a>
          <li class="tab"><a href="#">Reguła trzecia</a>
        </ul>
        <ul class="tab-group">
          <li class="tab active"><a href="#">Opłata pierwsza</a>
          <li class="tab"><a href="#">Opłata druga</a>
          <li class="tab"><a href="#">Opłata trzecia</a>
        </ul>
      </nav>
    </main>
  </body>
</html>
