JSFiddle - React, Tailwind, and code Playground

by vpetrychuk

HTML

<ul class="photo-grid"><li class="photo">
  <a href="#" class="photo-link">
    <img src="http://www.mtv.com/movies/a-z/h/hudgens_vanessa/150x200.jpg" class="photo-img"/>
    <span class="photo-title">a girl</span>
  </a>
</li><li class="photo">
  <a href="#" class="photo-link">
    <img src="http://i1132.photobucket.com/albums/m566/Feargraphics/Others/150x200.png" class="photo-img"/>
    <span class="photo-title">bender_wants_to_kill_all_the_people</span>
  </a>
</li><li class="photo">
  <a href="#" class="photo-link">
    <img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img"/>
    <span class="photo-title">MrSpock</span>
  </a>
</li><li class="photo">
  <a href="#" class="photo-link">
    <img src="http://simp-tv.at.ua/simp4/20-15s.png" class="photo-img"/>
    <span class="photo-title">Marge Simpson</span>
  </a>
</li><li class="photo">
  <a href="#" class="photo-link">
    <img src="http://www.natalyvoyage.com.ua/assets/images/catalog/eu/swiss/grindenwald/grindenwald.jpg" class="photo-img"/>
    <span class="photo-title">My future place to live</span>
  </a>
</li><li class="photo">
  <a href="#" class="photo-link">
    <img src="http://www.prakse.lv/uploads/myEnterprise/section/40137_1.jpg?cec2be3a97f7ff89612ad39df976b45e" class="photo-img"/>
    <span class="photo-title">a ship</span>
  </a>
</li><li class="photo">
  <a href="#" class="photo-link">
    <img src="http://spoki.tvnet.lv/upload/articles/12/125171/thumbs/200x150Svarigi-Konkurss-uz-1.jpg" class="photo-img"/>
    <span class="photo-title">BOOOOM</span>
  </a>
</li><li class="photo">
  <a href="#" class="photo-link">
    <img src="http://www.hullumaja.com/files/pictures/2009/01/03/thumbs/y5gJRzJrrm.jpg" class="photo-img"/>
    <span class="photo-title">Moto</span>
  </a>
</li><li class="photo">
  <a href="#" class="photo-link">
    <img src="http://m.addfun.ru/2009/02/18/bonus/04.jpg" class="photo-img"/>
    <span class="photo-title">night</span>
  </a>
</li><li...

CSS

.photo {
  list-style: none;
  vertical-align: bottom;
  display: inline-block;
  text-align: center;
  margin: 0 0 10px 0;
  padding: 0;
  width: 25%;
}
.photo-link {
  display: block;
  margin-right: 10px;
}
.photo-img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
.photo-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  margin-top: 5px;
}