JSFiddle - React, Tailwind, and code Playground

by ewa

HTML

<div class="photos">
    <ul>
        <li><span><a href="#"><img src="http://cdn.androidbeat.com/wp-content/uploads/2013/07/android.jpg" width="200" height="150"   /></a></span>
 <span>Android</span>
 <a href="">See More...</a>

        </li>
        <li><a href="#"><img src="http://lotssports.com/wp-content/uploads/2013/07/zappy-android-300x300.jpg" width="200" height="150"  /></a>
 <span>Android</span>
 <a href="">See More...</a>

        </li>
        <li><a href="#"><img src="http://cdn.androidbeat.com/wp-content/uploads/2013/07/android.jpg" width="200" height="150"  /></a>
        </li>
        <li><a href="#"><img src="http://2.bp.blogspot.com/-65ZTcnMYW9c/TurVOon7PrI/AAAAAAAAA_s/07tBb3zCktI/s400/new%2Bprof.png" width="200" height="150"  /></a>
        </li>
    </ul>
</div>

CSS

/* gallery display */
 body {
    background:#000;
}
.photos {
    display: block;
}
.photos ul {
    list-style: none;
}
.photos ul li {
    display: inline;
    list-style: none;
    float: left;
    padding: 0 10px 0 0;
    text-align:center;
    background-color: #fff;
    margin:5px;
}
.photos ul li a {
    display: block;
    /*
  margin-right: 10px;
  margin-bottom: 7px; */
    opacity: 0.75;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.photos ul li a:hover {
    opacity: 1.0;
}
.photos ul li a img {
    border: 6px solid #e1d9ec;
}