Final registration form

by Francisco Presencia Fandos

HTML

<!-- Made for Picnic CSS 4.0, with love -->
<form class="row" style="max-width: 600px; margin: 80px auto 0;">
  <div class="tabs three" style="text-align: center;">
    <input id='tabC-1' type='radio' name='tabgroupC' checked />
    <label class="pseudo button" for="tabC-1">1</label>
    ❭
    <input id='tabC-2' type='radio' name='tabgroupC'>
    <label class="pseudo button" for="tabC-2">2</label>
    ❭
    <input id='tabC-3' type='radio' name='tabgroupC'>
    <label class="pseudo button" for="tabC-3">3</label>
    <div class="row" style="text-align: left;">
      <div>
        <div class="card" style="margin: 10px 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: 10px 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: 10px 20px;">
          <header>
            <h3>Create account</h3>
          </header>
          <section>
            <input type="email" placeholder="Email" />
          </section>
          <section>
            <input...

CSS

/*
This CSS is from the full Picnic library imported from SCSS
Follow github.com/picnicss/picnic for updates when published
*/


/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio, canvas, progress, video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden], template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active, a:hover {
  outline: 0; }

/* Text-level semantics
  ...