JSFiddle - React, Tailwind, and code Playground

by Sergey Shaliapin

HTML

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
          <li class="item-4">4</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>





    
    











































<!-- EPAM LOGO © EPAM Systems Inc. jQuery course -->
<div id="epam-logo-button">
    <span id="epam-left-bracket">&lt;</span>
    <span id="epam-name-text">epam</span>
    <span id="epam-right-bracket">&gt;</span>
</div>

CSS

.item-ii {
    position: relative;
}

ul {
    background: #FFF;
}

li {
    margin:  0 0 10px;
    line-height: 30px;
    background: #CCC;
}

















































/* EPAM LOGO © EPAM Systems Inc. jQuery course */
#epam-left-bracket,
#epam-name-text,
#epam-right-bracket {
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;    
    width: initial !important;    
    height: initial !important;
    line-height: 18px !important;
    font-family: sans-serif !important;
    font-size: 16px !important;
    text-transform: none !important;
    text-decoration: none !important;
    color: rgb(58, 186, 205) !important;
    background: transparent !important;
}

#epam-name-text {
    color: rgb(255,255,255) !important;
}

#epam-logo-button {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    width: 72px !important;
    height: initial !important;
    line-height: initial !important;
    text-align: center !important;
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    background: rgb(70, 69, 71) !important;
    box-shadow: 0 0 5px 4px rgb(70, 69, 71) !important;
}

#epam-logo-button:hover {
    cursor: pointer !important;
}

JavaScript

//$( "ul.level-2" ).children().css( "background", "#FF0000" );
//$( "li.item-a" ).closest( "ul" ).css( "background", "#FF0000" );
//$( "li.item-ii" ).find( "li" ).css( "background", "#FF0000" );

//$( "li.item-1" ).next().css( "background", "#00FF00" );
//$( "li.item-1" ).next( ".item-3" ).css( "background", "#00FF00" );
//$( "li.item-1" ).nextAll().css( "background", "#00FF00" );
//$( "li.item-1" ).nextAll( ".item-3" ).css( "background", "#00FF00" );
//$( "li.item-1" ).nextUntil( ".item-4" ).css( "background", "#00FF00" );

//$( "li.item-a" ).offsetParent().css( "background", "#0000FF" );
//$( "li.item-a" ).parent().css( "background", "#0000FF" );
//$( "li.item-a" ).parents().css( "background", "#0000FF" );
//$( "li.item-a" ).parents( "ul" ).css( "background", "#0000FF" );

//$( "li.item-4" ).prev().css( "background", "#FF00FF" );
//$( "li.item-4" ).prev( ".item-3" ).css( "background", "#FF00FF" );
//$( "li.item-4" ).prevAll().css( "background", "#FF00FF" );
//$( "li.item-4" ).prevAll( ".item-2" ).css( "background", "#FF00FF" );
//$( "li.item-4" ).prevUntil( ".item-1" ).css( "background", "#FF00FF" );

//$( "li.item-2" ).siblings().css( "background", "#FFFF00" );







































// EPAM LOGO © EPAM Systems Inc. jQuery course
// epam shake animation
jQuery.fn.epamShake = function(intShakes, intDistance, intDuration) {
	$(this).css("position","relative"); 
	for (var x=1; x<=intShakes; x++) {
        $(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
    		.animate({left:intDistance}, ((intDuration/intShakes)/2))
    		.animate({left:0}, (((intDuration/intShakes)/4)));
	}
	return this;
};

var epamButtonFlag = true;

$("#epam-logo-button").on("click", function(){
    if (epamButtonFlag === false) {window.open("http://www.epam.com/careers/job-listings?sort=best_match&query=JavaScript+Developer&department=all&city=all&country=Belarus");}
    epamButtonFlag = false;
    changeEpamName();
	$("#epam-left-bracket,...