JSFiddle - React, Tailwind, and code Playground

by Vladimir Kutepov

HTML

<div>
  <img src="https://goo.gl/jjhtMT" width="320" height="250">
  <a class="overlay" href="#">
    <h1 class="title">34 nye boliger I fana</h1>
    <p class="desc">Start <b>360 opplevelsen</b></p>
  </a> 
</div>

CSS

div { position: relative; float: left; }
img { vertical-align: top; }
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(0,0,0,.4) 20%, rgba(0,0,0,0));
  font: 300 normal 18px/normal Helvetica Neue, Helvetica, Arial, sans-serif;
}
.overlay,
.overlay:hover,
.overlay:focus,
.overlay:active {
  color: #fff;
  text-decoration: none;
}
.title {
  position: absolute;
  left: 30px;
  width: 30%;
  top: 50%;
  transform: translateY(-50%);
  text-transform: uppercase;
  font: inherit;
  font-weight: 500;
  font-size: 24px;
  margin: 0;
  padding: 0;
}
.desc {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 30px;
  margin: 0;
  padding: 0;
  font: inherit;
}
.desc b {
  font-weight: 500;
}
.desc:before,
.desc:after {
  position: absolute;
  right: 0;
  bottom: -5px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  content: '';
}
.desc:before {
  background: linear-gradient(to right, #91a99d, #658173);
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
}
.desc:after {
  /*<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 54 54" width="100%" height="100%"><path style="fill:#fff;" d="M22.294,40c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414L32.88,27 L21.587,15.707c-0.391-0.391-0.391-1.023,0-1.414s1.023-0.391,1.414,0l11.498,11.498c0.667,0.667,0.667,1.751,0,2.418 L23.001,39.707C22.806,39.902,22.55,40,22.294,40z"/></svg>*/
  background:...