JSFiddle - React, Tailwind, and code Playground

by techappetite

HTML

<ul class="sortable">
    <li>
        <div class="panel">
            <div class="panelTitle">
                Manage Posts
                <div class="panelTitleBtns">
                    <a href="#" class="panelMinBtn"><img src="http://cdn1.iconfinder.com/data/icons/diagona/icon/10/133.png" /></a>
                    <a href="#"><img src="http://cdn1.iconfinder.com/data/icons/diagona/icon/10/103.png" /></a>
                    <a href="#"><img src="http://cdn1.iconfinder.com/data/icons/diagona/icon/10/101.png" /></a>
                </div>
            </div>
            <div class="panelContent">
                Form for managing posts goes here.
            </div>
        </div>
    </li>
</ul>

CSS

*{margin:0;padding:0;}
body{
    font-family:Calibri;
}

.panel {
    border:1px solid black;
    border-radius:8px;
    float:left;
    padding:10px;
    overflow:hidden;
    box-shadow:0px 0px 3px gray;
    background: -moz-linear-gradient(top, #feffff 0%, #d2ebf9 100%); /* firefox */
}
.panel .panelTitle {
    margin:-10px;
    margin-bottom:10px;
    padding:5px;
    border-bottom:1px solid gray;
    font-weight:bold;
    position:relative; /* This is for the absolutely positioned title buttons */
    
    background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* firefox */
}
.panel .panelTitle .panelTitleBtns {
    position:absolute;
    top:5px;
    right:5px;
    bottom:5px;
    background-color:white;
}

JavaScript

$(document).ready(function(){
   $("ul.sortable").sortable();
    
    $(".panelMinBtn").click(function(){
        //$(this).parent("div").sibling(".panelContent").hide();
        $(this).parent(".panelTitle").find(".panelContent").fadeOut();
    });
});