JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cascade-t1">
  <div class="overlay-t1"></div>  
  <div class="cascade-corner">Info</div>  
  <div class="cascade-overlay-content">
    <h2>Cool Text</h2>
    <p class="tilefont">This is some cool text about the building that I wanted to add in. I will stop writing it now if you want.</p>
  </div>

CSS

p.tilefont{font-size:15px;}
.cascade-t1 {
  background: url('http://www.studios.com/FILE/2629.jpg');
  padding-left:10px;
  width: 228px;
  height: 240px;
  overflow: hidden;
  position: relative;
}
.cascade-t1 .overlay-t1 {
  border-bottom: 100px solid #b263a3;
  border-left: 100px solid transparent;
  bottom: 0;
  height: 0;
  opacity: .95;
  position: absolute;
  right: 0;
  text-indent: -9999px;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  width: 0;
}
.cascade-t1:hover .overlay-t1 {
  border-bottom: 800px solid #b263a3;
  border-left: 800px solid transparent;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.cascade-t1 .cascade-corner {
  bottom: 15px;
  color: #fff;
  font-size:15px;
  position: absolute;
  right: 15px;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.cascade-t1:hover .cascade-corner {
  opacity: 0;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.cascade-t1 .cascade-overlay-content {
  bottom: 0;
  color: #fff;
  left: 0;
  opacity: 0;
  padding: 10px;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.cascade-t1 .cascade-overlay-content h2 {
  border-bottom: 1px solid #fff;
  padding: 0 0 12px;
}
.cascade-t1:hover .cascade-overlay-content {
  opacity: 1;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
 ...