JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

HTML

<div class="appendage">
    <div class="app_container">
        <div class="header"> <span class="icon">
            i
        </span>
 <span class="header_text">
            facebook|Twitter|Instagram
        </span>

        </div>
        <div class="content_container">
            <div class="content"> <span class="icon">
                +
            </span>
Bacon ipsum dolor sit amet short ribs pork chop filet mignon</div>
            <div class="content"> <span class="icon">
                +
            </span>
leberkas spare ribs flank bresaola sausage pig jowl t-bone beef ribs.</div>
            <div class="content"> <span class="icon">
                +
            </span>
Andouille meatball boudin pork chop bresaola biltong salami pork belly prosciutto rump.</div>
            <div class="content"> <span class="icon">
                +
            </span>
Filet mignon sausage venison</div>
        </div>
    </div>
</div>
<button>x</button>

CSS

.appendage{
   display: inline-block;
    width: 250px;
    height: 250px;
    background-color: lightgrey; 
}
.app_container {
    position: relative;
    right: 100px;
    display: inline-block;
    width: 200px;
    height: 100px;
    background-color: red;
}
.minimize {
    overflow: hidden;
    width: 20px;
}
.header {
    display: inline-block;
    width: 200px;
    height: 20px;
    background-color: blue;
}
.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    background-color: lightblue;
}
.header_text {
    color: white;
}
.content_container {
    display: inline-block;
    width: 200px;
    height: 80px;
    overflow-y:scroll;
}
.content {
    border: 1px solid lightgrey;
}

JavaScript

$("button").click(function () {
    $("app_container").toggleClass("minimize");
});