JSFiddle - React, Tailwind, and code Playground

by techunter

HTML

<div id="jQ-menu"> 
	<ul>
		<li><span class="toggle">Pielęgnacja twarzy</span> 
			<ul class="submenu1"> 
				<li><span class="toggle">Zabiegi instytutowe</span> 
						<ul class="submenu2"> 
							<li><span class="toggle">Living dimension</span>
								<ul class="submenu3">
									<li><a href="livemosttreatment.html">Live moist treatment</a></li>
									<li><a href="vitaleffect.html">Vital effect</a></li>
								</ul>
							</li>
							<li><span class="toggle">Isabelle Lancray</span>
								<ul class="submenu3">
									<li><a href="vitaminarevi.html">Vitamina Revitalisant</a></li>
									<li><a href="alabaster.html">Alabaster</a></li>
								</ul>
							</li>
							<li><span class="toggle">Mia Pharm</span>
								<ul class="submenu3">
									<li><a href="liftingjonowy.html">Lifting Jonowy</a></li>
								</ul>
							</li>
							<li><span class="toggle">Werner Gerlinger Cosmetics</span>
								<ul class="submenu3">
									<li><a href="energyshock.html">Energy Schock Lift</a></li>
									<li class="current"><a href="vitapeel.html">Vita Peel</a></li>
								</ul>
							</li>
							<li><a href="purles.html">Purles</a></li>
							<li><a href="synesis.html">Synesis</a></li>
							<li><a href="medex.html">Medex</a></li>
							<li><a href="jadwiga.html">Jadwiga</a></li>
						</ul> 
				</li>
				<li><span class="toggle">Oczyszczanie skóry</span>
					<ul class="submenu2">
						<li><a href="manualne.html">Manualne oczyszczanie</a></li>
						<li><a href="ultradzwieki.html">Peeling kawitacyjny</a></li>
						<li><a href="ozonowanie.html">Ozonowanie D'arsonval</a></li>
					</ul>
				</li>
				<li><a href="polzabiegi.html">Pół zabiegi</a></li>
				<li><span class="toggle">Masaże twarzy i dekoltu</span>
					<ul class="submenu2">
						<li><a href="manualnymasaz.html">Manualny masaż twarzy</a></li>
					</ul>
				</li>
				<li><span class="toggle">Pielęgnacja okolicy oka</span>
					<ul class="submenu2">
						<li><a...

CSS

body {
	font-family: "Trebuchet MS", Helvetica, Sans-Serif;
	font-size: 14px;
}

#jQ-menu ul {
	list-style-type: none;
}

#jQ-menu a {
	color: gray;
	text-decoration: none;
	padding-bottom: 3px;
}

#jQ-menu li {
	color: gray;
	text-decoration: none;
	padding-bottom: 3px;
}

#jQ-menu li.current a{
	color: #000000;
	text-decoration: none;
}
#jQ-menu ul {
	padding-left: 15px;
}

#jQ-menu ul.submenu1 {
	font-size:13px;
}

#jQ-menu ul.submenu2{
	font-size:12px;
}

#jQ-menu ul.submenu3{
	font-size:11px;
}

JavaScript

//jQuery Color Animations
//Copyright 2007 John Resig
//Released under the MIT and GPL licenses.
(function(d){d.each(['backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor','color','outlineColor'],function(i,b){d.fx.step[b]=function(a){if(a.state==0){a.start=getColor(a.elem,b);a.end=getRGB(a.end)}a.elem.style[b]="rgb("+[Math.max(Math.min(parseInt((a.pos*(a.end[0]-a.start[0]))+a.start[0]),255),0),Math.max(Math.min(parseInt((a.pos*(a.end[1]-a.start[1]))+a.start[1]),255),0),Math.max(Math.min(parseInt((a.pos*(a.end[2]-a.start[2]))+a.start[2]),255),0)].join(",")+")"}});function getRGB(a){var b;if(a&&a.constructor==Array&&a.length==3)return a;if(b=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(a))return[parseInt(b[1]),parseInt(b[2]),parseInt(b[3])];if(b=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(a))return[parseFloat(b[1])*2.55,parseFloat(b[2])*2.55,parseFloat(b[3])*2.55];if(b=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(a))return[parseInt(b[1],16),parseInt(b[2],16),parseInt(b[3],16)];if(b=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(a))return[parseInt(b[1]+b[1],16),parseInt(b[2]+b[2],16),parseInt(b[3]+b[3],16)];return e[d.trim(a).toLowerCase()]}function getColor(a,b){var c;do{c=d.curCSS(a,b);if(c!=''&&c!='transparent'||d.nodeName(a,"body"))break;b="backgroundColor"}while(a=a.parentNode);return getRGB(c)};var...