JSFiddle - React, Tailwind, and code Playground

by Travis

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.css">
<!-- HEADER -->
<header id="header">
  <div class="measure">
    
    <div id="header-logo">
      <h1>Funk</h1>
    </div>
    
    <div id="header-menu">
      <ul class="menu">
        <li>
          <a href="">
            <i class="fa fa-eye"></i> 1
          </a>
        </li>
        <li>
          <a href="">
            <i class="fa fa-check"></i> 0
          </a>
        </li>
        <li>
          <a href="">
            <i class="fa fa-envelope"></i> 2
          </a>
        </li>
        <li>
          <a href="">
            <i class="fa fa-question-circle"></i>
          </a>
        </li>
        <li>
          <a href="">
            <i class="fa fa-search"></i>
          </a>
        </li>
        <li>
          <a href="">
            TM <i class="fa fa-caret-down"></i>
          </a>
        </li>
      </ul>
    </div>
    
    <div id="header-nav">
      <ul class="nav">
        <li><a href="">Launch!</a></li>
        <li><a href="">Jobs</a></li>
        <li><a href="">Candidates</a></li>
        <li><a href="">People</a></li>
        <li><a href="">Calendar</a></li>
        <li><a href="">Reports</a></li>
      </ul>
    </div>
    
  </div>
</header>

<!-- SUB HEADER -->
<header id="sub-header">
  <div class="measure">
      <h2>
        Underwater Basketweaving 
        <span class="fa fa-caret-down"></span>
      </h2>
  </div>
</header>

<!-- MAIN -->
<main id="main" class="measure">
    <section id="candidates">
        <!-- Candidate List -->
        <div id="candidates-list">
            <div class="box">
                <div class="box-header">
                      <h1 class="box-header-title text-uppercase">All Candidates</h1>
                </div>
                <div class="box-content">
                     <p>Lorem...

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);

body {font:300 14px 'Lato', sans-serif; background:#d3d8dd;}

p {line-height:1.5; margin:0 0 1em 0;}

/**********/
/* LAYOUT */
/**********/

#header {
  padding:1.5em 0; 
  background-image: linear-gradient(to right,#732582,#542d88 50%,#3859b6);
  overflow:hidden;
}
#header-logo {}
#header-logo > h1 {color:#fff; font-size:1.75em; font-weight:900; margin:0;}
#header-nav {width:100%;}
#header-menu {}

/* Sub Header */
#sub-header {background:#fff; padding:1em 0;}

/* Main */
#main {}

/* Candidates List */
#candidates {margin:2em 0;}
#candidates-list {margin:0 0 2em 0;}
#candidates-list-info {}


/***********/
/* MODULES */
/***********/

/* Box */
.box {}
.box-header {color:#fff; padding:1em; background:#732582;}
.box-header-title {
  font-size:1em;
  line-height:1;
  margin:0;
}
.box-content {padding:1em; background:#fff; overflow:hidden;}

/* Measure */
.measure {width:90%; max-width:1000px; margin:0 auto;}

/* Menu */
.menu {color:#fff; list-style:none; margin:1em 0 0 0; padding:0;}
.menu a {color:#fff; font-weight:600; text-decoration:none;}
.menu i {margin:0 .5em 0 0;}
.menu li {padding:.5em; box-sizing:border-box; display:inline-block;}

/* Nav */
.nav {
  width:100%;
  background:rgba(255, 255, 255, 0.05);
  list-style:none; 
  margin:1em 0 0 0; 
  padding:0;
  box-sizing:border-box;
}
.nav li {
  width:100%; 
  text-align:left; 
  padding:1em; 
  box-sizing:border-box; 
  display:inline-block;
}
.nav a {
  color:#9f83b9;
  font-weight:700;
  text-decoration:none;
  text-transform:uppercase;
  transition:color ease-in-out .25s;
}
.nav a:hover,
.nav a:focus,
.nav a.selected {color:#eee;}


/*************/
/* MODIFIERS */
/*************/

.is-visible {display:block;}
.is-hidden {display:none;}


/*****************/
/* MEDIA QUERIES */
/*****************/

@media screen and (min-width:420px) {
    /**********/
    /* LAYOUT */
    /**********/

    /* Header */
    #header-logo...

JavaScript

(function() {

	// Feature Check
    if (
    	!(
    		"querySelector" in document  && 
        	"addEventListener" in window  && 
       	 	"getComputedStyle" in window
        )
    ) 
    {
    	return;
    }
    
	// Progressively Enhance
    

})();