JSFiddle - React, Tailwind, and code Playground

by famarinu

HTML

<div style="width: 150px; border-right: #868686 solid medium;">
<ul>
<li>
<input type="checkbox" checked>
<i></i>
<h5>FRANCIA</h5>
<p>VIA PINCO PALLO 13<BR>43212 Paris<BR>Tel. 00012344955<BR></p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h5>ITALIA</h5>
<ul>
<li>
<input type="checkbox" checked>
<i></i>
<h6>MILANO</h6>
<p>Via Napoleone 13<BR> Tel. 024345324</p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h6>NAPOLI</h6>
<p> Via Marconi 93<BR>Tel. 09871234</p>
</li>
</ul>
</li>
</ul>
</div>

CSS

.transition, p, ul li i:before, ul li i:after {
transition: all 0.25s ease-in-out;
}


.flipIn, h5, ul li {
animation: flipdown 0.5s ease both;
}


.transition, p, ul li ul li i:before, ul li ul li i:after {
transition: all 0.25s ease-in-out;
}

.flipIn, h6, ul li ul li {
animation: flipdown1 0.5s ease both;
}



.no-select, h5 {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}


.no-select, h6 {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}


h5 {
font-size: 20px;
color: #ff6873;
line-height: 10px;
font-weight: 300;
letter-spacing: 1px;
display: block;
background-color: transparent;
margin: 0;
cursor: pointer;
}


h6 {
font-size: 20px;
color: #00FF00;
line-height: 10px;
letter-spacing: 1px;
position: relative;
overflow: hidden;
background-color: transparent;
margin: 0;
cursor: pointer;
opacity: 1;
transform: translate(0, 0);
margin-top: 14px;
z-index: 2;
}


p {
color: #ff0000;
font-size: 17px;
line-height: 26px;
letter-spacing: 1px;
position: relative;
overflow: hidden;
max-height: 800px;
opacity: 1;
transform: translate(0, 0);
margin-top: 14px;
z-index: 2;
}


ul li p {
color: #ff0000;
font-size: 17px;
line-height: 26px;
letter-spacing: 1px;
position: relative;
overflow: hidden;
max-height: 800px;
opacity: 1;
transform: translate(0, 0);
margin-top: 14px;
z-index: 3;
}


ul {
list-style: none;
perspective: 900;
padding: 0;
margin: 0;
}


ul li ul {
list-style: none;
perspective: 900;
padding: 0;
margin: 0;
}

ul li {
position: relative;
padding: 0;
margin: 0;
padding-bottom: 4px;
padding-top: 18px;
border-top: 1px dotted #dce7eb;
}
ul li:nth-of-type(1) {
animation-delay: 0.5s;
}
ul li:nth-of-type(2) {
animation-delay: 0.75s;
}
ul li:nth-of-type(3) {
animation-delay: 1s;
}
ul...