JSFiddle - React, Tailwind, and code Playground

by niki4810

HTML

<div class="gallery">
    <div class="thumb">
        <img src="http://i44.photobucket.com/albums/f14/alefrancha/50x50.png" />
        <p>Lorem ipsum dore</p>
        <p>02/02/2012</p>
    </div>
    <div class="thumb">
        <img src="http://i44.photobucket.com/albums/f14/alefrancha/50x50.png" />
        <p>Lorem ipsum dore</p>
        <p>02/02/2012</p>
    </div>
    <div class="thumb">
        <img src="http://i44.photobucket.com/albums/f14/alefrancha/50x50.png" />
        <p>Lorem ipsum dore</p>
        <p>02/02/2012</p>
    </div>
    <div class="thumb">
        <img src="http://i44.photobucket.com/albums/f14/alefrancha/50x50.png" />
        <p>Lorem ipsum dore</p>
        <p>02/02/2012</p>
    </div>
    <div class="thumb">
        <img src="http://i44.photobucket.com/albums/f14/alefrancha/50x50.png" />
        <p>Lorem ipsum dore</p>
        <p>02/02/2012</p>
    </div>
    <div class="thumb">
        <img src="http://i44.photobucket.com/albums/f14/alefrancha/50x50.png" />
        <p>Lorem ipsum dore</p>
        <p>02/02/2012</p>
    </div>
    <div class="thumb">
        <img src="http://i44.photobucket.com/albums/f14/alefrancha/50x50.png" />
        <p>Lorem ipsum dore</p>
        <p>02/02/2012</p>
    </div>
</div>

CSS

.gallery {
    width:100%;
}
.thumb:hover {
    background: #d2ebf9;
    border:1px solid #61BFF3;
}
.thumb {
    padding: 10px 30px 10px 30px;
    float:left;
    border: solid 1px transparent;
    text-align:middle;
}

.thumb p {
    width:50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thumb p:nth-of-type(1){
    font-weight:bold;
}
.thumb p:nth-of-type(2){
    color: #ccc;
}