JSFiddle - React, Tailwind, and code Playground

HTML

<div class="thumbnail">
      <img src="http://dummyimage.com/70x70/000/fff&text=MyImage">
          <a href="http://jsfiddle.net/aqKn5/9/"><span class="tag"></span></a>
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Blah Blah Blah</p>
        
      </div>
    </div>

CSS

.thumbnail {
    position:relative;
    width: 150px;
	display:block;
	padding:4px;
	margin-bottom:20px;
	line-height:1.42857143;
	background-color:#fff;
	border:1px solid #ddd;
	border-radius:4px;
	-webkit-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out
}
.thumbnail>img,.thumbnail a>img {
	margin-left:auto;
	margin-right:auto
}
a.thumbnail:hover,a.thumbnail:focus,a.thumbnail.active {
	border-color:#428bca
}
.thumbnail .caption {
	padding:9px;
	color: #333
}
.tag{ 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;

  /* edit: added z-index */
  z-index: 1;

  /* edit: fixes overlap error in IE7/8, 
     make sure you have an empty gif */
  background-image: url('empty.gif');
}