JSFiddle - React, Tailwind, and code Playground

by marvo

HTML

<div id="thumbnailwrapper">
<div id="artiststhumbnail">
    <a href="#">
        <!--image here-->
        <img src="http://goo.gl/QrKCc" height="100%" alt="artist" border="1" />
    </a>
</div>
</div>

CSS

#thumbnailwrapper {
    color:#2A2A2A;margin-right:5px;
    border-radius:0.2em;
    margin-bottom:5px;
    background-color:#E9F7FE;
    padding:5px;
    border-color:#DADADA;
    border-style:solid;  
    border-width:thin;
    font-size:15px
    text-align: center;
}
#thumbnailwrapper:hover{box-shadow:0 0 5px 5px #DDDDDD}

#artiststhumbnail {
    width:420px;
    height:108px;
    overflow:hidden;
    border-color:#DADADA;     
    border-style:solid;
    border-width:thin;
    background-color:pink;
}
#artiststhumbnail:hover {left:50px }
#genre {
    font-size:12px;
    font-weight:bold;
    color:#2A2A2A
}


#artiststhumbnail a img {
    display : block;
    margin : auto;
}