picnic/src/plugins/tabs/test.html

A lighweight CSS library with nice defaults and many plugins to kickstart your projects

<h2>Tab</h2>


<div class="flex two">
  <div>
    <div class="tabs three">
      <input id='tab-1' type='radio' name='tabgroupB' checked />
      <label class="pseudo button toggle" for="tab-1">Forest</label>
      <input id='tab-2' type='radio' name='tabgroupB'>
      <label class="pseudo button toggle" for="tab-2">Lake</label>
      <input id='tab-3' type='radio' name='tabgroupB'>
      <label class="pseudo button toggle" for="tab-3">Balloon</label>
      <div class="row">
        <div>
          <img src="web/img/forest.jpg">
        </div>

        <div>
          <img src="web/img/lake.jpg">
        </div>

        <div>
          <img src="web/img/balloon.jpg">
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="tabs three" style="text-align: center;">
      <input id='tabC-1' type='radio' name='tabgroupC' checked />
      <label class="pseudo button toggle" for="tabC-1">1</label>
      /
      <input id='tabC-2' type='radio' name='tabgroupC'>
      <label class="pseudo button toggle" for="tabC-2">2</label>
      /
      <input id='tabC-3' type='radio' name='tabgroupC'>
      <label class="pseudo button toggle" for="tabC-3">3</label>
      <div class="row">
        <div>
          <div class="card" style="margin: 0 20px;">
            <header>
              <h3>Super important notice!</h3>
            </header>
            <p>Thank you for registering! By doing so you agree to the <a href="#">Terms and conditions</a></p>
            <footer>
              <label class="button" for="tabC-2">Agree</label>
            </footer>
          </div>
        </div>

        <div>
          <div class="card" style="margin: 0 20px;">
            <header>
              <h3>Your basic data</h3>
            </header>
            <section>
              <input type="text" placeholder="Full Name">
            </section>
            <section>
              <div class="select">
                <select>
                  <option>Where did you find us?</option>
                  <option>Facebook</option>
                  <option>Twitter</option>
                  <option>Linkedin</option>
                </select>
              </div>
            </section>
            <footer>
              <label class="button" for="tabC-3">Next</label>
              <label class="button dangerous" for="tabC-1">Back</label>
            </footer>
          </div>
        </div>

        <div>
          <div class="card" style="margin: 0 20px;">
            <header>
              <h3>Create account</h3>
            </header>
            <section>
              <input type="email" placeholder="Email">
            </section>
            <section>
              <input type="password" placeholder="Password">
            </section>
            <footer>
              <button class="success">Finish!</button>
              <label class="button dangerous" for="tabC-2">Back</label>
            </footer>
          </div>
        </div>
      </div>
    </div>
  </div>

  
  <div>
    <div class="tabs two">
      <input id='tabA-1' type='radio' name='tabgroupA' checked />
      <label class="button toggle" for="tabA-1">Tab 1</label>
      <input id='tabA-2' type='radio' name='tabgroupA'>
      <label class="button toggle" for="tabA-2">Tab 2</label>
      <div class="row">
        <div class='tab'>
          <div>
            <h2>This is the first tab</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>

        <div class="tab">
          <div>
            <h2>This is the second tab</h2>
            <p>
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            </p>
          </div>
        </div>
      </div>
    </div>

  </div>
  <div>

    <div class="tabs four">
      <input id='tabD-1' type='radio' name='tabgroupD' checked />
      <label class="pseudo button toggle" for="tabD-1">•</label>
      <input id='tabD-2' type='radio' name='tabgroupD'>
      <label class="pseudo button toggle" for="tabD-2">•</label>
      <input id='tabD-3' type='radio' name='tabgroupD'>
      <label class="pseudo button toggle" for="tabD-3">•</label>
      <input id='tabD-4' type='radio' name='tabgroupD'>
      <label class="pseudo button toggle" for="tabD-4">•</label>
      <div class="row">
        <div class='tab'>
          <div>
            <h2>This is the first tab</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>

        <div class="tab">
          <div>
            <h2>This is the second tab</h2>
            <p>
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            </p>
          </div>
        </div>
        <div class='tab'>
          <div>
            <h2>This is the third tab</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>

        <div class="tab">
          <div>
            <h2>This is the fourth tab</h2>
            <p>
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>