JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<header>
  <div id="banner">
    <div class="container">
      <div id="banner-inner">
        <div id="banner-left">
          <h1>Site Name</h1>
          <p>Some catchy slogan...</p>
        </div>
        <div id="banner-right">
          <div id="banner-top">
            <ul>
              <li>Find Me On:</li>
              <li><a href+ "#" title="Facebook"><i class="fa fa-facebook-square"></i></a></li>
              <li><a href+ "#" title="Twitter"><i class="fa fa-twitter-square"></i></a></li>
              <li><a href+ "#" title="LinkedIn"><i class="fa fa-linkedin-square"></i></a></li>
              <li><a href+ "#" title="Instagram"><i class="fa fa-instagram"></i></a></li>
            </ul>
          </div>
          <div id="banner-bottom">
            <nav>
              <ul id="menu-menu-1" class="nav navbar-nav">
                <li><a title="Home" href+ "#">Home</a></li>
                <li><a title="Blog" href+ "#">Blog</a></li>
                <li><a title="Resources" href+ "#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Resources <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-menu">
                    <li><a title="HTML &amp; CSS" href+ "#">HTML &#038; CSS</a></li>
                    <li><a title="JavaScript &amp; jQuery" href+ "#">JavaScript &#038; jQuery</a></li>
                    <li><a title="PHP" href+ "#">PHP</a></li>
                    <li><a title="MySQL" href+ "#">MySQL</a></li>
                  </ul>
                </li>
                <li><a title="Portfolio" href+ "#" data-toggle="dropdown" class="dropdown-toggle"...

CSS

header {
	background: #D7DADB;
	margin: 0px;
	padding: 0px 15px;
	border-bottom: 15px solid #FC4349;
	display: table;
	position: relative;
	width: 100%;
}

header #banner {
	padding: 5px;
	display: table;
	position: relative;
	width: 100%;
	color: #2C3E50;
	margin: 0px;
}

header #banner #banner-inner {
	width: 100%;
}

header #banner #banner-left {
	padding: 0px 25px 0px 0px;
	float: left;
}
header #banner #banner-left h1 {
	font-size: 4em;
	color: #FC4349;
	font-family: PowerChord;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #fff;
	margin: 0px;
	padding: 0px;
	line-height: 1.3em;
}

header #banner-left p {
	font-size: 1.7em;
	font-family: Nirmala;
	color: #2C3E50;
	margin: 0px 0px 10px 0px;
	line-height: 1.3em;
}

header #banner #banner-right {
	text-align: right;
	height: 100%;
	float: right;
}

header #banner #banner-right #banner-top {
	text-align: right;
	height: 50%;
	overflow: auto;
}
header #banner #banner-right #banner-top ul {
	list-style: none;
	width: 100%;
	text-align: right;
	margin: 0;
	padding: 0;
}

header #banner #banner-right #banner-top > ul > li {
	display: inline-block;
	margin-right: 15px;
}

header #banner #banner-right #banner-top > ul > li a {
	font-size: 1.5em;
	color: #FC4349;
}
header #banner #banner-right #banner-bottom {
	border-top: 1px solid #6DBCDB;
	text-align: right;
}
header #banner #banner-right #banner-bottom > nav {
	position: relative;
}
.nav.navbar-nav {
	position: relative;
}
.nav.navbar-nav > li > a {
	color: #2C3E50;
	font-family: NirmalaBold;
	font-size: 1.3em;
	padding: 5px 5px;
}
.nav.navbar-nav > li > a:hover {
	background: #FC4349;
	color: #fff;
}
.nav.navbar-nav > li > a:focus {
	background: #6DBCDB;
	color: #fff;
}
.dropdown-menu {
	background: #fff;
	border: 1px solid #FC4349;
	border-bottom: 0px;
	padding: 0px;
}
.dropdown-menu > li {
	border-bottom: 1px solid #FC4349;
}
.dropdown-menu > li > a {
	color: #FC4349;
	text-decoration: none;
	padding: 15px 25px 15px 10px;
}
.dropdown-menu > li >...