JSFiddle - React, Tailwind, and code Playground

by Brett Miley

HTML

GRID

<div class="dsm-blockwrap">
    <div class="dsm-gridwrap">
        <div class="dsm-griditem dsm-small">test</div>
        <div class="dsm-griditem dsm-small">test</div>
    </div>
    <div class="dsm-gridwrap">
        <div class="dsm-griditem dsm-large">test</div>
    </div>
</div>

CSS

/* ================================================== */

/* GRID ITEM                                          */

/* ================================================== */
 .dsm-gridwrap, .dsm-blockwrap {
    box-sizing:border-box;
    display:inline-block;
    text-align:center;
    width:100%;
    overflow:hidden;
    margin-right:-2px;
    vertical-align:top;
    padding: 8px;
}
.dsm-gridwrap {
    max-width: 320px;
}
.dsm-griditem.dsm-large {
    max-width:304px;
    height:396px;
}
.dsm-griditem.dsm-small {
    max-width:304px;
    height:190px;
    margin-bottom:16px;
}
.dsm-griditem:last-child {
    margin-bottom:0;
}
.dsm-griditem {
    display:inline-block;
    width:100%;
    position:relative;
    box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.5);
    vertical-align:middle;
    overflow:hidden;
    border-radius:2px;
    transition: all 0.5s ease-in;
    z-index: 2;
}
.dsm-griditem:hover {
    box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.5);
}
.dsm-griditem img {
    width:100%;
    height:auto;
    position: absolute;
    top:0;
    left:0;
    z-index: 0;
    opacity: 1;
    transition: all 0.5s ease-in;
}
.dsm-griditem h3 {
    color: #fff;
    text-align: left;
    padding: 8px;
    padding-left: 16px;
    opacity: 0;
    position: relative;
    z-index: 1;
    transition: all 0.5s ease-in;
}
.dsm-griditem p {
    padding: 0px 24px;
    color: #fff;
    text-align: left;
    opacity: 0;
    position: relative;
    z-index: 1;
    transition: all 0.5s ease-in;
}
.dsm-griditem .dsm-pagelink h3, .dsm-griditem .dsm-pagelink p {
    opacity: 1;
}
.dsm-griditem:hover h3, .dsm-griditem:hover p {
    opacity: 1;
}
.dsm-griditem:hover img {
    opacity: 0;
}
.dsm-griditem:after {
    content:"+";
    background-color: #025675;
    border-radius:;
    width: 32px;
    height: 32px;
    display: inline-block;
    line-height: 25px;
    color: #fff;
    font-size: 30px;
    position: absolute;
    bottom: 8px;
    right:...