JSFiddle - React, Tailwind, and code Playground

by mstalfoort

HTML

<article>
<img src="http://www.vacanzattivaguide.com/images/percorsi/7851567614/rifugio-tuckett-rifugio-brentei.jpg?MHgwOjptaWRkbGUtY2VudGVyOjY3N2RlN2U5NjJjYzY0NmJlZmNhNTVkOGNkZGQyOWM0" alt="">
<p>
Vakanties in Italië, mooie 16 jaar van mijn jeugdige leven, waar we regelmatig de bergen in trokken  met de gezelligheid van onze groep en genieten van al het moois om ons heen.
</p>
</article>

CSS

@import url('https://fonts.googleapis.com/css?family=Caveat');
p {
  font-family: 'Caveat', cursive;
}

img {
  max-width: 100%;
  height: auto;
}

article {
  position: relative;
}

article p {
  position: absolute;
  color: #666;
  bottom: -140px;
  font-size: 2em;
  /* text-shadow: 0 1px 1px rgba(0,0,0,0.5); */
  margin: 0 1em;
  background-color: white;
  border-radius: 20px;
  line-height: 1;
  padding: 0.5em;
  box-shadow: 0px 5px 10px -2px rgba(0,0,0,0.25);
}