JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="wrap">
    <ul class="ttl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>   
    <div class="one">One</div>
<form><div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
    </form>
</div>

CSS

.wrap {width:290px; overflow:hidden;}
.wrap div {padding:10px; font-family:arial; color:#FFF; font-size:18px; text-align:center; float:left; margin:0 10px; height:200px; width:50px; border:2px solid black; border-top:none;}
.ttl {overflow:hidden; width:290px;}
.ttl li {float:left; padding:10px; margin:0 10px; font-family:arial; font-size:18px; text-align:center; float:left; width:50px; border:2px solid black; border-bottom:none;}
.wrap .one {background:red; height:50px; margin-top:0; border-bottom:none;}
.wrap .two {background:crimson; clear:both; margin-top:0;}
.wrap .three {background:firebrick; margin-top:-70px;}
.wrap .four {background:orange; margin-top:-70px;}
.wrap .nivel {margin-top:0;}

JavaScript

$('.one').click(function(){
$(this).toggle();
    $('.three,.four').toggleClass('nivel');
});