JSFiddle - React, Tailwind, and code Playground

by techappetite

HTML

<div id="widgetCanvas">
    <div id="columns">
        <ul id="column1" class="column">
            <li class="widget blue">
                <div class="widget-head">
                    <h3>Manage Users</h3>
                </div>
                <div class="widget-content">
                </div>
            </li>
            <li class="widget blue">
                <div class="widget-head">
                    <h3>Manage Users</h3>
                </div>
                <div class="widget-content">
                </div>
            </li>
            <li class="widget blue">
                <div class="widget-head">
                    <h3>Manage Users</h3>
                </div>
                <div class="widget-content">
                </div>
            </li>
        </ul>
        <ul id="column2" class="column">
            <li class="widget blue">
                <div class="widget-head">
                    <h3>Manage Users</h3>
                </div>
                <div class="widget-content">
                </div>
            </li>
        </ul>
        <ul id="column3" class="column">
            <li class="widget blue">
                <div class="widget-head">
                    <h3>Manage Users</h3>
                </div>
                <div class="widget-content">
                </div>
            </li>
        </ul>
    </div>
</div>

CSS

/* Reset basic styles */
* {margin:0; padding:0; list-style:none; border:none;}
/* END of 'Reset basic styles' */

body { font-family: Calibri; }

/* "Widget Canvas" Section */
#widgetCanvas {
    
}

/* END "Widget Canvas" Section */

/* Column styles */
#widgetCanvas .column {
    float:left;
    min-width:300px;
    min-height:100px;
    
    border:1px solid gray;
    border-radius:7px;
    
    width:30%;
    
    padding:10px;
    
    overflow:hidden;
}
#column1 { margin-right:20px; }
#column2 { margin-right:20px; }
#column3 { margin-right:0px; }
/* END Column Styles */