JSFiddle - React, Tailwind, and code Playground

by Kesavamoorthi Subramanian

HTML

<div class="exhibition">
  <h1 class="suit"><a href="#">Suit Icon</a></h1>
  <p>
    <b class="lorem">Gilbert &amp; George: The Early Years</b>
    <br>
    <i class="lorem">May 9 - September 27, 2015</i>
  </p>
</div>

CSS

.exhibition {
  margin-left: %;
  margin-right: auto;
  width: 25%;
  max-width: 25%;
  float: left;
  /*border: 1px solid #000000;*/
}
.exhibition img {
  width: 180px;
  height: auto;
  margin: 0 auto;
}
.exhibition b {
  font-family: 'Open Sans', 'Arial', sans-serif;
  background-color: #ffffff;
}
.exhibition i {
  font-family: 'Source Sans Pro', 'Arial', sans-serif;
  background-color: #ffffff;
}
.exhibition p {
  padding-left: 1em;
  padding-right: 1em;
}
h1.suit a {
  display: block;
  width: 180px;
  height: 180px;
  background-color: #090;
  text-indent: -99999px;
  white-space: nowrap;
  float: left;
}
.exhibition:hover h1.suit a {
  background-color: #f00;
  -webkit-transition: background 150ms ease-in-out;
  -moz-transition: background 150ms ease-in-out;
  -ms-transition: background 150ms ease-in-out;
  -o-transition: background 150ms ease-in-out;
  transition: background 150ms ease-in-out;
}

.exhibition:hover p, .exhibition:hover b, .exhibition:hover i {
    background-color: #006;
    color: #fff;
}