JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="banner">

  <div class="container_background-image">

    <div class="banner_text container">

      <span class="rabbits">

        <p>Do you like rabbits?</p>

      </span>

      <span class="oranges">

        <p>Do you like oranges?</p>

      </span>

    </div>

  </div>

</div>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

.banner {
  font-family: 'Roboto', sans-serif;
  height: 200px;
  position: relative;
  z-index: 1;
  background: url(https://picsum.photos/1280/200);
}

.banner_text {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 1;
  left: 20%;
  bottom: 20%;
  line-height: 20px;
  text-transform: uppercase;
}

.rabbits,
.oranges {
  margin-top: 10px;
  padding: 5px 10px;
  background: brown;
  color: orange;
}

.oranges {
  background: orange;
  color: brown;
}

p {
  margin: 0;
}