JSFiddle - React, Tailwind, and code Playground

by leongaban

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<div class="container">
        <div class='topbar'>
            <ul>
                <li class="short btn-off">Short</li>
                <li class="tall btn-off">Tall</li>
            </ul>
        </div>
    
    <div class="tall-content">
        <div>
            Tall Content<br/>
            Tall Content<br/>
            Tall Content<br/>
            Tall Content<br/>
        </div>  
    </div>
    
    <div class="short-content">
        <div>
            Short Content
        </div> 
    </div>
    
    <div id='form-bg'></div>
</div>

CSS

body {
    height: 100%;
    width: 100%;
    font-family: Arial;
}

.container {
    position: absolute;
    top: 10%;
    left: 30%;
}

.topbar {
    background: #ccc;
    color: white;
    width: 150px;
    height: 40px;
    text-align:center;
}

.topbar ul li {
    padding: 10px;
    margin-right: 20px;
    float: left;
    list-style:none;
    /* background: blue; */
    cursor: pointer;
}

#form-bg {
    margin-top: -120px;
    width: 150px;
    height: 100px;
    background: orange;
    background: #333;
    -webkit-box-shadow: 0px 5px 15px rgba(50, 50, 50, 0.5);
    -moz-box-shadow:    0px 5px 15px rgba(50, 50, 50, 0.5);
    box-shadow:         0px 5px 15px rgba(50, 50, 50, 0.5);
    z-index: -1;
}

.short-content {
    display: none;
    color: red;
}

.tall-content {
    display: none;
    color: blue;
}

.btn-on {
    color: blue;
}

.btn-off {
    color: #333;
    background: #666;
}






}

JavaScript

$(".short").click(function(){
    $('.tall-content').hide();
    $("#form-bg").animate({height:100},200);
    $('.short-content').fadeIn();
});
            
$(".tall").click(function(){
    console.log("clicked tall");
    $('.short-content').hide();
    $("#form-bg").animate({height:200},200);
    $('.tall-content').fadeIn();
});