JSFiddle - React, Tailwind, and code Playground

by gmdavis62

HTML

<div class="container">
    <h4><a href="http://www.amazon.com/Unbroken-World-Survival-Resilience-Redemption/dp/1400064163%3FSubscriptionId%3D0FY14YXN76X2KKF2F0G2%26tag%3Dhomeschoolbuzz-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D1400064163"><span class="link-spanner"></span>Unbroken: A World War II Story of Survival, Resilience, and Redemption</a></h4>
  <p>Hardcover, Laura Hillenbrand</p>
</div>

CSS

.container{
    width:200px;
    height:200px;
    background-color:black;
    color:white;
    /*Important:*/
    position:relative;
}

/*Important:*/
.link-spanner{
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;

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