JSFiddle - React, Tailwind, and code Playground

by Dan Wright

HTML

<div id="page-wrap">
    <div id="row-col3-col1">
        <div class="skillsBox">
            <ul>
                <li><a href="#"><span>Menu 1</span></a>

                </li>
                <li><a href="#"><span>Menu Item 1</span></a>

                    <ul>
                        <li class="moreBttn" id="skill1"><a href="#">Menu Skill 1</a>

                        </li>
                        <li class="moreBttn" id="skill2"><a href="#">Menu Skill 2</a>

                        </li>
                        <li class="moreBttn" id="skill3"><a href="#">Menu Skill 3</a>

                        </li>
                    </ul>
                </li>
                <li><a href="#"><span>Menu Item 2</span></a>

                    <ul>
                        <li class="moreBttn" id="skill4"><a href="#">Menu Skill 1</a>

                        </li>
                        <li class="moreBttn" id="skill5"><a href="#">Menu Skill 2</a>

                        </li>
                    </ul>
                </li>
                <li><a href="#"><span>Menu Item 3</span></a>

                    <ul>
                        <li class="moreBttn" id="skill6"><a href="#">Menu Skill 1</a>

                        </li>
                        <li class="moreBttn" id="skill7"><a href="#">Menu Skill 2</a>

                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div id="row-col3-col2">
        <div class="skillsBox">
            <ul>
                <li><a href="#"><span>Menu 2</span></a>

                </li>
                <li><a href="#"><span>Menu Item 1</span></a>

                    <ul>
                        <li class="moreBttn" id="skill8"><a href="#">Menu Skill 1</a>

                        </li>
                        <li class="moreBttn" id="skill9"><a href="#">Menu Skill 2</a>

                        </li>
                    </ul>
                </li>
                <li><a...

CSS

#pagewrap {
    padding: 5px;
    width: 960px;
    margin: 20px auto;
}
#mask {
    display: none;
    background: #D3D3D3;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 999;
}
#skillBox {
    text-align: left;
}
.displayBox {
    display:none;
    background: #333;
    padding: 10px;
    border: 2px solid #ddd;
    z-index: 99999;
    box-shadow: 0px 0px 20px #999;
    -moz-box-shadow: 0px 0px 20px #999;
    /* Firefox */
    -webkit-box-shadow: 0px 0px 20px #999;
    /* Safari, Chrome */
    border-radius:3px 3px 3px 3px;
    -moz-border-radius: 3px;
    /* Firefox */
    -webkit-border-radius: 3px;
    /* Safari, Chrome */
}
#row-col3-col1 {
    width: 290px;
    float: left;
    padding: 5px 15px;
}
#row-col3-col2 {
    width: 294px;
    float: left;
    padding: 5px 15px;
    margin: 0px 5px 5px 5px;
}
#row-col3-col3 {
    width: 270px;
    padding: 5px 15px;
    float: left;
}
/* Base Styles */
 .skillsBox, .skillsBox ul, .skillsBox li, .skillsBox a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    font-weight: normal;
    text-decoration: none;
    line-height: 1;
    font-family:"Times New Roman", Georgia, Serif;
    font-size: 1em;
    position: relative;
}
.skillsBox a {
    line-height: 1.3;
}
.skillsBox {
    width: 250px;
    border-bottom: 4px solid #656659;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.skillsBox > ul > li:first-child {
    background: #66665e;
    background: -moz-linear-gradient(#66665e 0%, #45463d 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66665e), color-stop(100%, #45463d));
    background: -webkit-linear-gradient(#66665e 0%, #45463d 100%);
    background: linear-gradient(#66665e 0%, #45463d 100%);
    border: 1px solid #45463d;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0...

JavaScript

$(document).ready(function () {

    showSkills();

});

function showSkills() {
    $('.skillsBox ul li a').hover(function () {
        var hasSkills = $(this).next();

        $('.skillsBox li').removeClass('active');
        $(this).closest('li').addClass('active');

        if ((hasSkills.is('ul')) && (hasSkills.is(':visible'))) {
            $(this).closest('li').removeClass('active');
            hasSkills.slideUp('normal');
        }

        if ((hasSkills.is('ul')) && (!hasSkills.is(':visible'))) {
            $('.skillsBox ul ul:visible').slideUp('normal');
            hasSkills.slideDown('normal');
        }

        if (hasSkills.is('ul')) {
            return false;
        } else {
            return true;
        }

    });
    screenMask();
}

function screenMask() {
    $('.moreBttn').click(function () {

        displayContent = $(this).attr('id');

        $('#skillBox').addClass(displayContent);
        
        //Fade in the Popup
        $('#skillBox').fadeIn(300).center();

        //selects type of content and appends it to mask
        selectContent();

        // Add the mask to body
        $('body').append('<div id="mask"></div>');
        $('#mask').fadeIn(300);
        return false;
    });
}

function selectContent() {
    //Add content to the Popup
    $('#skillBox.skill1').append('<div id="skill"><h2>Header1</h2><div class"text"> No1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div><div class"pic"></div></div>');
    $('#skillBox.skill2').append('<div id="skill"><h2>Header2</h2><div class"text"> No2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen...