JSFiddle - React, Tailwind, and code Playground

by userdude

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
}
#thumbnailwrapper:hover{box-shadow:0 0 5px 5px #DDDDDD}
#artiststhumbnail {
    width:120px; 
    height:108px;
    margin: 0 auto;
    overflow:hidden;
    border-color:#DADADA;     
    border-style:solid; 
    border-width:thin; 
    background-color:white; 
}
#artiststhumbnail:hover {left:50px }
#genre {
    font-size:12px; 
    font-weight:bold;
    color:#2A2A2A
}
.artiststhumbnail a img {
    display:block;
    margin:auto;
    with: 50%;
}