JSFiddle - React, Tailwind, and code Playground

by codef0rmer

HTML

<div id="container">
    <div id="content">
        <div class='wrapper'>
            <div class='col pad'>
                <div class='img'></div>
                <div class='zoom'><div></div></div>
            </div>
            <div class='col pad'>
                <div class='img'></div>
                <div class='zoom'><div></div></div>
            </div>
            <div class='col pad'>
                <div class='img'></div>
                <div class='zoom'><div></div></div>    
            </div>
            <div class='col'>
                <div class='img'></div>
                <div class='zoom'><div></div></div>
            </div>
            <div class='clear'></div>
        </div>
    </div>
    <div id="footer">
       sdfds
    </div>
</div>

<!--<div class='wrapper'>
    <div class='col-normal'>
        <div class='img'></div>
        <div class='zoom'><div></div></div>
    </div>
    <div class='col-normal'>
        <div class='img'></div>
        <div class='zoom'><div></div></div>
    </div>
    <div class='col-normal'>
        <div class='img'></div>
        <div class='zoom'><div></div></div>    
    </div>
    <div class='col-last'>
        <div class='img'></div>
        <div class='zoom'><div></div></div>
    </div>
    <div class='clear'></div>
</div>-->

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: red;
}
div#container {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: auto !important;
    height: 100%;
    min-height: 100%;
}
div#content {
    width: auto;
    height: auto !important;
    height: 100%;
    min-height: 100%;   
    background: blue;
    
}
div#footer {
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 0;
    background: black;
    color: white;    
}    

div.wrapper {
   width: auto;
   height: auto;   
   padding: 75px 29px 75px 29px;
}
div.clear {clear: both;}
div.col {
    width: 200px;
    height: 200px;
    float: left;    
}
div.col.pad {
    margin-right: 20px;
}
div.img {
    background: pink;
    width: 150px;
    height: 200px;
    display: table-cell;
}
div.zoom {
   display: table-cell;
   vertical-align: bottom;
}
div.zoom div {
   width: 50px;  
   height: 50px;
   background: white;
   color: black;
}
div.bottom {
   background: black;
   height: 50px;
   with: 100%;   
}

JavaScript

// PHN20 - Drag and Drop