JSFiddle - React, Tailwind, and code Playground

HTML

<div id="home-gal-col"> <span class="span-homegal">
        <a href="/listings/category/accessories/">
            <div class="polaroid">
                <img src="/images/homegal/picture.jpg">
                <p>picture</p>
                </img>
            </div>
        </a>
       </span>
</div>

CSS

#home-gal-col {
    width:15%;
    float:left;
    padding:5px;
}
.polaroid {
    border: 10px solid #fff;
    border-bottom: 15px solid #fff;
    -webkit-box-shadow: 3px 3px 3px #777;
    -moz-box-shadow: 3px 3px 3px #777;
    box-shadow: 3px 3px 3px #777;
}
.polaroid img {
    margin: 0 auto;
    width: 100%;
}
.polaroid p {
    text-align: center;
    color: #D51386;
}
.span-homegal a {
    -webkit-transition: margin 0.2s ease-out;
    -moz-transition: margin 0.2s ease-out;
    -o-transition: margin 0.2s ease-out;
}
.span-homegal a:hover {
    margin-bottom: 5px;
}