JSFiddle - React, Tailwind, and code Playground

by Cerlin ST

HTML

<div class="whatwedo">
    <ul class="wwd_list">
        <li class="employers">
            <div>employer</div>
            <div class="employer_content">some content.</div>
        </li>
        <li class="court">
            <div>court</div>
            <div class="court_content">some content.</div>
        </li>
        <li class="companies">
            <div>companies</div>
            <div class="companies_content">some content.</div>
        </li>
        <li class="laborunion">
            <div>labour union</div>
            <div class="labor_content">some content.</div>
        </li>
    </ul>
</div>

CSS

.whatwedo {
    
    padding:20px;
    color:#fff;
    max-width:480px;
    margin:0 auto;
}
ul li {
    list-style-type:none;
}
ul > li {
    background-color:#08588c;
    display: inline-block;
    width: 100%;
    cursor:pointer;
    float:left;
    max-width:100px;
    padding:10px;
}
.whatwedo {
  
}
ul.wwd_list {
    padding: 0;
    margin: 0;
}
.employer_content, .court_content, .companies_content, .labor_content {
    display:none;
    clear: right;
}

.bluehover {
    background-color:#01395d;
    
}

JavaScript

$('li.employers').mouseenter(function () {
    $('.employer_content').stop().show("slow");
    $(this).addClass( "bluehover" );

});
$('li.employers').mouseout(function () {
    $('.employer_content').stop().hide("slow");
    $(this).removeClass( "bluehover" );

});

$('li.court').mouseenter(function () {
    $('.court_content').stop().show("slow");

});
$('li.court').mouseout(function () {
    $('.court_content').stop().hide("slow");

});

$('li.companies').mouseenter(function () {
    $('.companies_content').stop().show("slow");

});
$('li.companies').mouseout(function () {
    $('.companies_content').stop().hide("slow");

});

$('li.laborunion').mouseenter(function () {
    $('.labor_content').stop().show("slow");

});
$('li.laborunion').mouseout(function () {
    $('.labor_content').stop().hide("slow");

});