JSFiddle - React, Tailwind, and code Playground

by Milan Karagunović

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><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><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>
			</ul>
          </div>

CSS

/* gallery display */
.photos {
  display: block;
}

.photos ul {
  list-style: none;

}

.photos ul li {
    background: #fff;
	display: inline;
	list-style: none;
  	float: left;
    margin: 0 10px 10px 0;
  	padding: 0;
  	text-align:center; 
    color: #000;
    border: 1px solid #ccc;
}

.photos ul li a {
  display: block;
  margin-bottom: 2px; 
  opacity: 0.75;
  font-family: Verdana;
  font-size: 11px;
  text-decoration: none;
  letter-spacing: 1px;
  -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;
}