JSFiddle - React, Tailwind, and code Playground

by parkji

HTML

<script src="http://tarnic.com/wip/shadowbox-3.0.3/shadowbox.js"></script>
<link rel="stylesheet" href="http://tarnic.com/wip/shadowbox-3.0.3/shadowbox.css">
<ul>
    <li class="block">
        <a rel="shadowbox;height=600;width=800" href="http://tarnic.com"  class="bInfo">
            <span>Content</span>
        </a>
    </li>
    <li class="block">
        <a rel="shadowbox;height=600;width=800" href="http://tarnic.com"  class="bInfo">
            <span>Content</span>
        </a>
    </li>
    <li class="block">
        <a rel="shadowbox;height=600;width=800" href="http://tarnic.com"  class="bInfo">
            <span>Content</span>
        </a>
    </li>
    <li class="block">
        <a rel="shadowbox;height=600;width=800" href="http://tarnic.com"  class="bInfo">
            <span>Content</span>
        </a>
    </li>
</ul>

CSS

.block a{
    width:190px;
    height:190px;
    margin:15px;
    background-color:#333;
    float:left;
    clear:none;
    opacity: 0.50;
    display:block;
    border: 2px solid #609fef;
    position: relative;
    text-decoration:none;
    color:#FFFFFF;
    -webkit-transition: all 0.230s ease-in;
    -moz-transition: all 0.230s ease-in;
    -o-transition: all 0.230s ease-in;
    transition: all 0.230s ease-in;
}
.block a:hover{
    box-shadow: 0px 0px 8px #666666;
    opacity: 1;
}
.block a:hover span {
    height: 50px;
}
.block span{
    background-image: url(http://tarnic.com/wip/images/block_bg.png);
    display: block;
    height: 0px;
    overflow:hidden;
    width: 190px;
    margin-top: 120px;
    position: absolute;
    bottom: 0px;
    -webkit-transition: all 0.230s ease-in;
    -moz-transition: all 0.230s ease-in;
    -o-transition: all 0.230s ease-in;
    transition: all 0.230s ease-in;
}