JSFiddle - React, Tailwind, and code Playground

Flexbox Admin Template

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<nav>
  
  <header>
    <span></span>
    John Doe
    <a></a>
  </header>
  
  <ul>
    <li><span>Navigation</span></li>
    <li><a class="active">Dashboard</a></li>
    <li><a>Statistics</a></li>
    <li><a>Roadmap</a></li>
    <li><a>Milestones</a></li>
    <li><a>Tickets</a></li>
    <li><a>GitHub</a></li>
    <li><a>FAQ</a></li>
    <li><span>Other</span></li>
    <li><a>Search</a></li>
    <li><a>Settings</a></li>
    <li><a>Logout</a></li>
  </ul>
  
</nav>

<main>
  
  <h1>Flexbox Admin Template</h1>
  
  <div class="flex-grid">
    <div>
      <h2>Clean CSS Code</h2>
      <ul>
        <li>no position: absolute</li>
        <li>no float</li>
        <li>no clearfix</li>
        <li>no faux columns</li>
        <li>no javascript</li>
      </ul>
    </div>
    <div>
      <h2>Font Awesome</h2>
      <ul>
        <li>no images</li>
        <li>no extra retina sprites</li>
      </ul>
    </div>
    <div>
      <h2>Less</h2>
      <ul>
        <li>no headache :)</li>
      </ul>
    </div>
  </div>
  
  <div class="flex-grid">
    <div>
      <h2>Headline</h2>
      Some Content
    </div>
    <div>
      <h2>Headline</h2>
      Some Content
    </div>
  </div>
  
  <div class="flex-grid">
    <div>
      <h2>Headline</h2>
      <table>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
      </table>
    </div>
  </div>
  
</main>

CSS

@import url('http://fonts.googleapis.com/css?family=Lato:300,400,700');
@charset 'UTF-8';
@font-face {
  font-family: 'FontAwesome';
  font-style: 'normal';
  font-weight: 'normal';
  src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot');
  src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('eot'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.woff') format('woff'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
}
.fontawesome-glass:before {
  content: "\f000";
}
.fontawesome-music:before {
  content: "\f001";
}
.fontawesome-search:before {
  content: "\f002";
}
.fontawesome-envelope:before {
  content: "\f003";
}
.fontawesome-heart:before {
  content: "\f004";
}
.fontawesome-star:before {
  content: "\f005";
}
.fontawesome-star-empty:before {
  content: "\f006";
}
.fontawesome-user:before {
  content: "\f007";
}
.fontawesome-film:before {
  content: "\f008";
}
.fontawesome-th-large:before {
  content: "\f009";
}
.fontawesome-th:before {
  content: "\f00a";
}
.fontawesome-th-list:before {
  content: "\f00b";
}
.fontawesome-ok:before {
  content: "\f00c";
}
.fontawesome-remove:before {
  content: "\f00d";
}
.fontawesome-zoom-in:before {
  content: "\f00e";
}
.fontawesome-zoom-out:before {
  content: "\f010";
}
.fontawesome-off:before {
  content: "\f011";
}
.fontawesome-signal:before {
  content: "\f012";
}
.fontawesome-cog:before {
  content: "\f013";
}
.fontawesome-trash:before {
  content: "\f014";
}
.fontawesome-home:before {
  content: "\f015";
}
.fontawesome-file:before {
  content: "\f016";
}
.fontawesome-time:before {
  content: "\f017";
}
.fontawesome-road:before {
  content: "\f018";
}
.fontawesome-download-alt:before {
  content: "\f019";
}
.fontawesome-download:before {
  content:...