JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<ul class="the_list">
    <li>
        <a href="#" class="list_title">
            <span>Lorem ipsum dolor</span>
            <span class="list_title_arrow"><span>&diams;</span></span>
        </a>
        
        <ul class="list_ul_cont1">
            <li class="list_li_cont">
                <ul class="list_ul_cont2">
                    <li class="ul_arrow_cont"><span class="ul_arrow">&diams;</span></li>
                    <li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
                    <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
                    <li><a href="#">Vestibulum auctor dapibus ametuetera.</a></li>
                   <li>Consectetuer adipiscinor dapibus neque.</li>
                </ul>
            <li>
        </ul>
    </li>
</ul>

                
                <ul class="the_list">
    <li>
        <a href="#" class="list_title">
            <span>Lorem ipsum dolor</span>
            <span class="list_title_arrow"><span>&diams;</span></span>
        </a>
        
        <ul class="list_ul_cont1">
            <li class="list_li_cont">
                <ul class="list_ul_cont2">
                    <li class="ul_arrow_cont"><span class="ul_arrow">&diams;</span></li>
                    <li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
                    <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
                    <li><a href="#">Vestibulum auctor dapibus ametuetera.</a></li>
                   <li>Consectetuer adipiscinor dapibus neque.</li>
                </ul>
            <li>
        </ul>
    </li>
</ul>

CSS

body { font-family: arial; font-size: 12px; margin: 0px; padding: 0px; height: 100%; }

.the_list { 
    position: relative;
    overflow: visible;
    float: left;
}

.the_list li {
    position: relative;
    left: 0px;
    top: 0px;
    overflow: visible;
}

.list_title {    
    color: #ffffff;
    margin: 10px; 
    padding: 10px;
    text-decoration: none;
    float: left;
    clear: both;

/* SHADOW */
-webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);

/* RADIUS */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;

/* GRADIENT */
background: rgb(25,170,227);
background: -moz-linear-gradient(top, rgba(25,170,227,1) 0%, rgba(23,142,191,1) 50%, rgba(21,126,180,1) 51%, rgba(20,101,146,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(25,170,227,1)), color-stop(50%,rgba(23,142,191,1)), color-stop(51%,rgba(21,126,180,1)), color-stop(100%,rgba(20,101,146,1)));
background: -webkit-linear-gradient(top, rgba(25,170,227,1) 0%,rgba(23,142,191,1) 50%,rgba(21,126,180,1) 51%,rgba(20,101,146,1) 100%);
background: -o-linear-gradient(top, rgba(25,170,227,1) 0%,rgba(23,142,191,1) 50%,rgba(21,126,180,1) 51%,rgba(20,101,146,1) 100%);
background: -ms-linear-gradient(top, rgba(25,170,227,1) 0%,rgba(23,142,191,1) 50%,rgba(21,126,180,1) 51%,rgba(20,101,146,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19aae3', endColorstr='#146592',GradientType=0 );
background: linear-gradient(top, rgba(25,170,227,1) 0%,rgba(23,142,191,1) 50%,rgba(21,126,180,1) 51%,rgba(20,101,146,1) 100%);
}

.list_title span { float: left; }

.list_title_arrow {
    margin: 3px 0px 0px 13px;
    padding: 0px;
    width: 28px;
    height: 12px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.list_title_arrow span {
    color: #ffffff;
    font-size: 45px;
    position: absolute;
    left:...

JavaScript

var winH = $(window).height();
var winW = $(window).width();
var TheList= $('.the_list');
var ListUlCont1= $('.list_ul_cont1');


var ListRight= $('.list_right');
var ListButton = $('.list_title');
var eachListButton =  $(this).find('.list_title');
var ListTitleArrow= $('.list_title_arrow');
var ListArrow= $('.ul_arrow');
var ListBody = $('ul ul');
var ListLi= $('li li');
var ListLiH= $(this).find('ul ul').children();


$('.the_list').each( function(){
    
    var list = $(this),
        list_title= list.find('.list_title'),
        first_ul = list.find('.list_ul_cont1'),
        list_items = first_ul.find('li');
    
    first_ul.hide()
        .css({ 
            left: - $(this).find('.list_ul_cont1').offset().left 
        })
    
    list
        .css({ 
          height: $(this).outerHeight(), 
          width: $(this).outerWidth() + (5) 
        })
        .children('li').css({ position: 'absolute' });
    
    list_items
        .css({
          width: $(this).outerWidth() + (5)
        });
    
    first_ul
        .css({ 
            left: - $(this).find('.list_ul_cont1').position().left 
        });
    
    list_title.on("click", function( e ) {
        
        e.preventDefault();
        first_ul.stop(true,true).show('2200');
            
    });

    $(this).find('.ul_arrow').css({ 
        left: $(this).find('.list_title').width() - '23' 
    });


});   
    
    ListBody
        .find('.ul_arrow_cont').next('li').addClass('first_li')
        .end().find('li:last-child').addClass('last_li');

    ListLi
        .children().addClass('list_li_padding')
        .parent('li').css({ padding: '0' })
        .find('.ul_arrow').removeClass('list_li_padding');