JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<div class="master">
<div class="header">
    <div class="container">
        <div class="logo"></div>
        <div class="navigation">
            <ul>
                <li class="home"><a href="#">Home</a></li>
                <li><a href="#">Products</a>
                    <ul>
                        <li><a href="#">Mobile Carts</a></li>
                        <li><a href="#">Cart Storage</a></li>
                        <li><a href="#">Wall Stations</a></li>
                        <li><a href="#">Power Systems</a></li>
                        <li><a href="#">Charging Stations</a></li>
                    </ul>
                </li>
                <li><a href="#">Company</a>
                    <ul>
                        <li><a href="#">News</a></li>
                        <li><a href="#">Events</a></li>
                        <li><a href="#">Jobs</a></li>
                    </ul>
                </li>
                <li><a href="#">Partners</a>
                    <ul>
                        <li><a href="#">CDW</a></li>
                        <li><a href="#">Dell</a></li>
                        <li><a href="#">Insight</a></li>
                        <li><a href="#">PC Connection</a></li>
                        <li><a href="#">PDS</a></li>
                        <li><a href="#">Synnex</a></li>
                        <li><a href="#">Liquid PC</a></li>
                        <li><a href="#">More Direct</a></li>
                        <li><a href="#">SHI</a></li>
                    </ul>
                 </li>
                 <li><a href="#">Support</a>
                    <ul>
                        <li><a href="#">Warranty</a></li>
                        <li><a href="#">Login</a></li>
                    </ul>
                </li>
                <li class="last"><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- ↓↓BODY↓↓ -->

<div class="content">
    <div class="section grid_8" style="height:...

CSS

body {min-width: 920px;}
.content {
    margin-left: auto;
    margin-right: auto;
    width: 920px;
}
.grid,
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
    z-index: 20;
}
.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8 {position:relative;}
.alpha {margin-left: 0;}
.omega {margin-right: 0;}
.content .grid_1 {width:55px;}
.content .grid_2 {width:170px;}
.content .grid_3 {width:285px;}
.content .grid_4 {width:400px;}
.content .grid_5 {width:515px;}
.content .grid_6 {width:630px;}
.content .grid_7 {width:745px;}
.content .grid_8 {width:860px;}
.content .prefix_1 {padding-left:115px;}
.content .prefix_2 {padding-left:230px;}
.content .prefix_3 {padding-left:345px;}
.content .prefix_4 {padding-left:460px;}
.content .prefix_5 {padding-left:575px;}
.content .prefix_6 {padding-left:690px;}
.content .prefix_7 {padding-left:805px;}
.content .suffix_1 {padding-right:115px;}
.content .suffix_2 {padding-right:230px;}
.content .suffix_3 {padding-right:345px;}content .suffix_4 {padding-right:460px;}
.content .suffix_5 {padding-right:575px;}
.content .suffix_6 {padding-right:690px;}
.content .suffix_7 {padding-right:805px;}
.content .push_1 {left:115px;}
.content .push_2 {left:230px;}
.content .push_3 {left:345px;}
.content .push_4 {left:460px;}
.content .push_5 {left:575px;}
.content .push_6 {left:690px;}
.content .push_7 {left:805px;}
.content .pull_1 {left:-115px;}
.content .pull_2 {left:-230px;}
.content .pull_3 {left:-345px;}
.content .pull_4 {left:-460px;}
.content .pull_5 {left:-575px;}
.content .pull_6 {left:-690px;}
.content .pull_7 {left:-805px;}
.content .group_1 {width: 100px;}
.content .group_2 {width: 200px;}
.content .group_3 {width: 300px;}
.content .group_4 {width: 400px;}
.content .group_5 {width: 500px;}
.content .group_6 {width:...

JavaScript

$('.navigation ul li').hover(function menu() {
    $(this).find('ul').stop(true, true).slideToggle(200, 'linear');
});

$(document).ready(function(){
    $('#turn-on-js-stoopid').hide(0);
    $('#ie-compatiblity-mode-wth').hide(0);
    $('#r-enovate').show().delay(4000).slideUp(500);

    $(function itabs() {
       var $tabSys = $('div.tabs').addClass('js-on');
       $tabSys.each(function() {
            var $tabs = $(this).find('ul.switch li'),
                $panes = $(this).find('ul.set .tabpage');
           $panes.hide().eq(0).show();
           $tabs.filter(':first').addClass('first');
           $tabs.filter(':last').addClass('last');
            $tabs.find('a').click(function() {
                $panes.hide().filter(this.hash).show();
                $tabs.removeClass('selected');
                $(this).parent().addClass('selected');
                $(this).closest(".tabs").find(".container").animate({height: $panes.filter(this.hash).height()+40});
               return false;
            }).eq(0).click();
        });
    });
});