JSFiddle - React, Tailwind, and code Playground

by techappetite

HTML

<div id="panelContainer">
    <ul>
        <li>
            <div class="panel">
                <div class="panelTitle">
                    Edit Post
                </div>
                <div class="panelContent">
                    Form for editing post
                </div>
            </div>
        </li>
        <li>
            <div class="panel">
                <div class="panelTitle">
                    Edit Page
                </div>
                <div class="panelContent">
                    Form for editing hte page goes in here.
                </div>
            </div>
        </li>
        <li>
            <div class="panel">
                <div class="panelTitle">
                    Manage Pages
                </div>
                <div class="panelContent">
                    Form for managing pages goes here.
                </div>
            </div>
        </li>
    </ul>
</div>

CSS

*{margin:0;padding:0;}
body{
    font-family:Calibri;
}
#panelContainer{
    margin:0 auto;
    width:95%;
    min-height:100px;
    min-width:50px;
    
    border:1px solid black;
    border-radius:5px;
    
    overflow:hidden;
}

.panel {
    border:1px solid black;
    border-radius:5px;
    background: -moz-linear-gradient(top, #d6f9ff 0%, #9ee8fa 100%); /* firefox */
    margin:10px;
    overflow:hidden;
    padding:10px;
    float:left;
    width:200px;
}

.panel .panelTitle {
    background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* firefox */
    margin:-10px;
    margin-bottom:10px;
    border-bottom:1px solid gray;
    padding:5px;
    font-weight:bold;
    font-size:1.1em;
}