JSFiddle - React, Tailwind, and code Playground

HTML

<body id="background">
    <div id="content">
        <div class="container">
            <header class="page-header"></header>
            <div>
                <nav class="top-menu">
                    <header class="underline header-wrap">
                         <h1 class="top-header"><span class="base-header">Lorem ipsum <a class="highlighted dropdown-area" aria-owns="dropdown-trigger" role="listbox" href="#dropdown-trigger">Header</a></span></h1>

                        <div class="dropdown-container">
                            <ul class="dropdown-1" id="dropdown-trigger"></ul>
                        </div>
                    </header>
                    <ul class="navbar ul-submenu">
                        <li><a href="">
                                    <div class="menu-box selected">
                                        <div class="selected-arrow arrow-under"></div>
                                        <div class="selected-arrow arrow-over"></div>
                                        <h2>Top menu <br>lorem ipsum 
                                        </h2>
                                    </div></a>
                            <ol class="top-menu submenu">
                                <li><a href="">
                                            <div class="navbox">
                                                <div class="box"><span class="nav-link"><span class="large-font">1. </span><span class="submenu-align mid-font">Submenu</span></span></div>
                                                <div class="right-arrow-end"></div>
                                            </div></a>
                                </li>
                                <li><a href="">
                                            <div class="navbox">
                                                <div class="box selected"><span class="nav-link selected"><span class="selected-menuitem large-font">2. </span><span class="selected-menuitem...

CSS

a, p, span, li {
    font-family:ModusRegular;
    text-decoration:none;
    color:#675c53;
    margin:0;
    line-height: 24px;
    outline: none;
}
html, body {
    height:100%;
    margin: 0 0 -30px 0;
    padding: 0;
}
h1, h2, h3 {
    margin:0;
    font-family:ModusBold
}
ul {
    margin:0;
}
ul li {
    float:left;
    list-style-type:none;
}
#content {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -70px;
}
.group:after, .container:after {
    content:"\0020";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    overflow:hidden;
}
#background {
    z-index:-1;
    background:#ccc no-repeat center center fixed;
    background-size:cover;
}
.top-menu {
    height: 129px;
    background:#ffffff;
    box-shadow:1px 1px 2px -1px rgba(0, 0, 0, 0.25);
    padding: 14px;
    margin-bottom: 138px;
}
.last-topbox {
    margin-left: 5px !important;
}
.submenu {
    height: 68px;
    margin: 104px 10px 20px -14px;
    padding: 14px;
    width: 982px;
}
.right-submenu {
    margin: 104px 0 20px -501px;
    padding: 14px;
    height: 68px;
    width: 982px;
}
.submenu > li {
    width: 33%;
}
.submenu-align {
    margin:5px 0 0 8px;
}
.no-topsubmenu {
    margin-bottom: 22px;
}
.to-know-topmenu {
    margin-bottom:22px;
}
.container {
    margin:0 auto;
    width:1010px;
    position:relative;
    height:100%;
}
.navbar {
    padding: 0;
    width: 1005px;
}
.ul-submenu > li {
    width: 488px;
}
.navbox {
    display: inline-block;
    position: relative;
}
.menu-box {
    position:relative;
    display:inline-block;
    float:left;
    height: 68px;
    width: 488px;
    background:none repeat scroll 0 0 #dfded7;
    text-align: center;
}
.menu-box h2, .menu-box span {
    text-align:center;
    margin-top: 8px;
    font-size: 20px;
}
.menu-box-center h2, .menu-box span {
    margin-top: 20px;
}
.base-header {
    display:inline-block;
    font-size:32px;
    font-family: ModusBold;
}
.box {
   ...