JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="utf-8">
        <title>BMRF Moderator Panel</title>
        <!-- Stylesheets -->
        <link rel="stylesheet" href="css/style.css">
        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>
    </head>
    
    <body>
        <div id="top-bar">
            <div class="page-full-width clearfix">
                <ul id="nav" class="fl">
                    <li class="v-sep"><a href="#" class="button round dark image-left ic-left-arrow"> Return to BMRF</a>

                    </li>
                    <li>	<a href="#" class="button round dark image-left ic-user-menu">Logged in as Moderator</a>

                        <ul>
                            <li><a href="#" class="password list-item-bullet">Change password</a>

                            </li>
                        </ul>
                    </li>
                    <li><a href="#" class="button round dark image-left ic-log-out">Log out</a>

                    </li>
                </ul>
                <form action="#" id="search-form" class="fr">
                    <fieldset>
                        <input type="text" id="search-keyword" placeholder="Search..." class="button round dark image-right ic-search" />
                        <input type="hidden" value="submit" />
                    </fieldset>
                </form>
            </div>
            <!-- end page-full-width -->
        </div>
        <!-- end top-bar -->
        <div id="header-width-tabs">
            <div class="page-full-width clearfix">
                <ul id="tabs" class="tabs">
                    <li><a href="#" class="dashboard-tab active-tab">Dashboard</a>

                    </li>
                    <li><a href="#">Second Tab</a>

                    </li>
                    <li><a href="#">Third...

CSS

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* slightly enhanced, universal clearfix hack */
 .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content:" ";
    clear: both;
    height: 0;
}
.clearfix {
    display: inline-block;
}
/* start commented backslash hack \*/
 * html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* close commented backslash hack */

/* --------- General -----------*/
 .round {
    border-radius: 0.3125em;
    /* 5/16 */
    -moz-border-radius: 0.3125em;
    /* 5/16 */
    -webkit-border-radius: 0.3125em;
    /* 5/16 */
}
.text-upper {
    text-transform: uppercase;
}
.fl {
    float: left;
}
.fr {
    float:right;
}
p {
    margin-bottom: 1.66em;
    /* 20/12*/
}
/* --------- Buttons -----------*/
 .button {
    padding: 0.833em;
    /* 10/12 */
    display: inline-block;
    text-decoration: none;
   ...