JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<div class="container">
  <div class="img-container">
    <img src="https://www.placecage.com/g/800/300" alt="">
  </div>
  <div class="content">
    <h1>Hello testing blah</h1>
    <p>asdasd asdasda sdas daksjd askjd hasjkh ajksdhskjhdajk s shdjashdjahskd ahjkhdsjd hjakshda jds hdksjahdjkas ds das dhaj dhajks dsjkdhaskjd aks. asdasd asdasda sdas daksjd askjd hasjkh ajksdhskjhdajk.</p>
  </div>
</div>

SCSS

.container {
  position: relative;
  background-color: #ccc;
  overflow: hidden;
  color: #fff;
}
.img-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: auto;
  }
}
.content {
  margin: 10% auto;
  width: 80%;
  position: relative;
}
@media (max-width: 400px) {
  .img-container img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 150px;
    width: auto;
  }
  .content {
    margin-top: 100px;
    margin-bottom: 0;
  }
}
@media (min-width: 401px) and (max-width: 700px) {
  .img-container img {
    transform: scale(2);
  }
}