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();


$(window).load(function(){
    $(window).resize(function(){
        
        TheList.each(function(){
            $(this).find('.list_ul_cont1').width( $(this).find('.list_ul_cont2') ).height( $(this).find('.list_ul_cont2') )
                   .find('.list_ul_cont2').css({ top: $(this).find('.the_list').outerHeight() + (15) });
        });
        
    }).resize();
});


TheList.find('.list_ul_cont1').hide();

TheList.each(function(){
        $(this).find('.list_ul_cont1').css({ left: - $(this).find('.list_ul_cont1').offset().left });
        $(this).css({ height: $(this).outerHeight(), width: $(this).outerWidth() + (5) }).children('li').css({ position: 'absolute' });
    
    $(this).find('.list_ul_cont1').css({ left: - $(this).find('.list_ul_cont1').position().left })
    
    $(this).find('.list_title').click(function(event) {
        event.preventDefault();

        $(this).next('ul').stop(true,true).toggle('500', function() {
            // animation complete.
       });
    });

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


});   
ListRight.each(function(){
        $(this).css({ float: 'right' }).children('li').css({ right: '0', left: 'auto' });
        $(this).find('.list_title').css({ float: 'right' });
        $(this).find('ul').css({ right: '0', left: 'auto' });
        $(this).find('.ul_arrow').css({ right: $(this).find('.list_title').width() - '23' })
});
    
    ListBody.find('.ul_arrow_cont').next('li').addClass('first_li')
    ListBody.find('li:last-child').addClass('last_li');

   ...