JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://hosttree.ch/janzz/css/janzz.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>

<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->

<header>
	    <div class="navbar">
        <nav class="nav-top-wrapper">
            <div class="container">

                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-2 col-xs-4">
                        <a class="navbar-brand" href="/index.html"></a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 hidden-xs">
                        <div class="username">
                            <button class="dropdown-btn" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
                                <span>hannelore.mustermann@company-xyz.com</span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                <li><a href="#">Sign out</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-8">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav" aria-expanded="true">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="hamburger-icon"></span>
                            </button>
                            <div...

CSS

[class$="-icon"]:before, [class*="-icon "]:before {
  width: auto; }

/*------------------------------------------------------------------
 * 3. Global styles
 *----------------------------------------------------------------*/
body {
  background-color: #f2f3f3;
  font-size: 18px;
  line-height: 25px;
  color: #51596c;
  font-family: "museo_sans300", sans-serif;
  font-style: normal; }
  @media screen and (max-width: 991px) {
    body {
      font-size: 13.5px;
      line-height: 19px; } }

h1, h2, h3, h4, h5, h6 {
  font-family: "museo_sans700", sans-serif;
  font-weight: normal;
  margin: 0;
  padding: 0; }

h1, h2, h3 {
  margin: 0 0 35px; }
  @media screen and (max-width: 991px) {
    h1, h2, h3 {
      margin: 0 0 25px; } }
  @media screen and (max-width: 479px) {
    h1, h2, h3 {
      margin: 0 0 15px; } }

h1 {
  font-size: 32px;
  line-height: 35px;
  color: #d40074;
  margin: 0 0 20px; }
  @media screen and (max-width: 991px) {
    h1 {
      font-size: 24px;
      line-height: 25px;
      margin: 0 0 20px; } }

h2, h3 {
  font-size: 24px; }
  @media screen and (max-width: 991px) {
    h2, h3 {
      font-size: 18px;
      margin: 0 0 17px; } }

ul {
  list-style: none;
  padding: 0;
  margin: 0; }

ol {
  counter-reset: section;
  list-style-type: none;
  padding-left: 35px; }
  ol ol {
    padding-left: 0px; }

li h2:before {
  counter-increment: section;
  content: counters(section,".") ". ";
  margin-left: -35px;
  text-align: left;
  float: left; }
li ol li p:before {
  counter-increment: section;
  content: counters(section,".") " ";
  margin-left: -35px;
  float: left; }

b, strong, label,
.bold {
  font-weight: normal;
  font-family: "museo_sans700", sans-serif; }

i,
.italic {
  font-weight: normal;
  font-family: "museo_sans300_italic", sans-serif; }

a {
  text-decoration: underline;
  color: #51596c; }

a, a:hover, a:focus, a:active {
  outline: 0;
  border: 0; }

a:hover,
a:active {
  color: #d40074;
  text-decoration: none; }

select {
 ...