JSFiddle - React, Tailwind, and code Playground

by Kaleb Hornsby

HTML

<div id="container">
  <header id="site-header">
  <hgroup><h1>Mobile Web</h1><h2>Development</h2></hgroup>
  <a href="#site-sidebar">Navigation</a>
  </header>
  <div id="main" role="main">
    <section id="forms">
    <form id="form">
      <p>
        <label for="Telephone">Telephone</label>
    <input type="tel" id="Telephone" name="Telephone" maxlength="25"
    pattern="\+1 \([2-9]\d\d\) \d{3}-\d{4}x?\d*"
    placeholder="+1 (234) 567-8900x123" />
      </p>
      <p>
        <label for="Name">Name</label>
        <input type="text" id="Name" name="Name" />
      </p>
      <input type="submit" name="Submit" value="Submit" />
    </form>
    </section>
  </div>
  <aside id="site-sidebar">
  <nav>
    <h1>Navigation</h1>
    <ul>
      <li>Responsive Design</li>
      <li>Forms</li>
      <li>Semantics</li>
    </ul>
    </nav>
  </aside>
  <footer id="site-footer">
  By Kaleb Hornsby
  </footer>
</div> <!--! end of #container -->

CSS

@import url('normalize.css');
/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */
body { background:lightyellow; }
/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 480px) {
body { background:lightblue; }
#site-header, #site-footer {
    background:black;
    color:white;
    position:absolute;
    left:0;
    width:100%;
    height:2.5em;
}
#site-header {
    top:0;
}
#site-header h1, #site-header h2 {
    display:inline-block;
    margin-top:0;
}
#site-header h1 {
    /* #site-sidebar width */
    width:200px;
}
#site-footer {
    bottom:0;
}
#site-sidebar {
    background:black;
    color:white;
    position:absolute;
    width:200px;
    left:0;
    top:2.5em; /* #site-header height */
    bottom:2.5em; /* #site-footer height */
}
#main {
    /* #site-header height, 0, #site-footer height, #site-sidebar width */
    margin: 2.5em 0 2.5em 200px;
    padding: 1em;
}
.narrow-only {
    display:none;
    visibility:hidden;
}
}

@media only screen and (min-width: 768px) {
body { background:lightgreen; }

}
label {
    display:inline-block;
    width:8em;
}


/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none...