JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<script src="https://fonts.googleapis.com/css?family=Gochi+Hand"></script>
<div class='image-box'>
  <div class='text'>
    <div>
    <p>
    "This was their first encounter with the fact that a full stomach meant good spirits; an empty one, bickering and gloom."
    </p>
    </div>
  </div>
  <div class='author'>
    - Harry Potter and the Deathly Hollows
  </div>
  <div class='below'>
    <p>
      Food is important to our mood and well-being, don't take it for granted
    </p>
  </div>
</div>

SCSS

.image-box {
  position: relative;
  width: 800px;
  height: 426px;
  background-image: url(https://www.consciouslifestylemag.com/wp-content/uploads/2017/03/depression-foods-diet-healthy-organic.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: red;
}

.text {
  position: absolute;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  top: 20px;
  left: 20px;
  border: 1px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  font-family: ;
  font-size: 30px;
  line-height: 40px;
  box-sizing: border-box;
  padding: 100px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
  text-align: center;
  font-family: sans-serif;
}

.author {
  position: absolute;
  bottom: 30px;
  right: 30px;
  color: white;
  font-family: sans-serif;
  color: white;
  font-size: 18px;
  font-style: italic;
}

.below {
  position: absolute;
  width: 100%;
  height: auto;
  background: white;
  top: 100%;
  left: 0;
  font-family: sans-serif;
  color: #444444;
  text-align: center;
  box-sizing: border-box;
  padding: 30px 50px;
  font-size: 35px;
  line-height: 45px;
  background: linear-gradient(-15deg, #1d1d1d, #292929);
  color: white;
}