what2watch/scss/plugins/tabs/test.html

<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="img/forest.jpg" /></div>

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

        <div><img src="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>
    <div class="tabs six">
      <input id="tabE-1" type="radio" name="tabgroupE" checked />
      <label class="pseudo button toggle" for="tabE-1">•</label>
      <input id="tabE-2" type="radio" name="tabgroupE" />
      <label class="pseudo button toggle" for="tabE-2">•</label>
      <input id="tabE-3" type="radio" name="tabgroupE" />
      <label class="pseudo button toggle" for="tabE-3">•</label>
      <input id="tabE-4" type="radio" name="tabgroupE" />
      <label class="pseudo button toggle" for="tabE-4">•</label>
      <input id="tabE-5" type="radio" name="tabgroupE" />
      <label class="pseudo button toggle" for="tabE-5">•</label>
      <input id="tabE-6" type="radio" name="tabgroupE" />
      <label class="pseudo button toggle" for="tabE-6">•</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 class="tab">
          <div>
            <h2>This is the fifth 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 sixth 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>