JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<header id="site-header">
    <div class="site-header-logo">
        <h1 class="site-header-logo-text"><span>Faszel</span></h1>
        <a href="#" class="site-header-logo-link"><img src="//ssl.gstatic.com/s2/oz/images/google-logo-plus-0fbe8f0119f4a902429a5991af5db563.png" alt="faszel.com"></a>
    </div>
    <div class="site-header-toolbar">
        <nav class="page-header-nav" role="navigation">
            <a href="#" target="_top" class="page-header-nav-link first" aria-label="Home">
                <span class="page-header-nav-link-icon Tt" data-tooltip="Home"></span>
            </a>
            <a href="#" target="_top" class="page-header-nav-link active" aria-label="Profile">
                <span class="page-header-nav-link-icon profile" data-tooltip="Profile"></span>
            </a>
            <a href="#" target="_top" class="page-header-nav-link" aria-label="Gossip">
                <span class="page-header-nav-link-icon gossip" data-tooltip="Gossip"></span>
            </a>
            <a href="#" target="_top" class="page-header-nav-link last" aria-label="Closet">
                <span class="page-header-nav-link-icon closet" data-tooltip="Closet"></span>
            </a>
        </nav>
        
        <div class="site-header-searcharea">
            <h2 class="site-header-searcharea-title">Search</h2>
            <form id="search-box" method="get" action="#" target="_blank">
                <input class="site-header-search" id="site-search" autocomplete="off" type="text" name="q" label="Find" placeholder="Find">
            </form>
        </div>
        
    </div>
</header>

<section id="site-content">
    Section Content    
</section>

<footer id="site-footer" class="a-f-kb-o-R a-kb-o-R a-kb-o-R-ta-fc a-kb-o-Yb-ad">
    <label>© Faszel</label>
    <a href="#" class="b-j" target="_blank">Terms</a>
    <a href="#" class="b-j" target="_blank">Content Policy</a>
    <a href="#" class="b-j" target="_blank">Privacy</a>
</footer>

CSS

/* General Stuff */
body {
    font: normal 13px arial,sans-serif;
    visibility: visible;
}

/* Input Elements */
input[type="text"]:hover,
input[type="text"]:focus {
    border: 1px solid #4d90fe;
    outline: none;
    box-shadow: inset inset 0 1px 2px rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
input[type="text"]:hover,
input[type="text"]:focus {
    border: 1px solid #4d90fe;
    outline: none;
    box-shadow: inset inset 0 1px 2px rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
input[type="text"].site-header-search {
    font-size: 100%;
    width: 362px;
}
input[type="text"] {
    border: 1px solid #d9d9d9;
    border-top: 1px solid #c0c0c0;
    height: 27px;
    margin-top: 2px;
    padding: 0 10px 0 6px;
    font-size: 100%;
}

header#site-header {
    background: transparent;
    height: 60px;
    padding: 13px 0 0 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 0 auto;
    position: relative;
    width: 960px;
}
.site-header-logo {
    float: left;
}
.site-header-logo-text {
    height: 1px;
    overflow: hidden;
    position: absolute;
    top: -1000em;
    width: 1px;
}
.site-header-toolbar {
    margin-left: 162px;
}
.site-header-searcharea {
    vertical-align: top;
    white-space: nowrap;
    margin-left: 16px;
    position: relative;
    display: -moz-inline-box;
    display: inline-block;
}
.site-header-searcharea-title {
    height: 1px;
    overflow: hidden;
    position: absolute;
    top: -1000em;
    width: 1px;
}

footer#site-footer {
    margin: 2em auto 0 auto;
    padding: 1em 0;
    position: relative;
    width: 960px;
    color: #666;
    font-size: 11px;
    text-align: center;
    border-top: 1px dotted #eee;
}
#site-footer a {
    color: #36c;
    cursor: pointer;
    outline: none;
   ...