JSFiddle - React, Tailwind, and code Playground

by nzkiwis

HTML

<div class="container">
  <div class="text">
    <h1>This is a test</h1>
  </div>
  <div class="background">
    <div class="color"></div>
    <div class="img">
      <img src="https://randomwordgenerator.com/img/picture-generator/50e5d646424faa0df7c5d57bc32f3e7b1d3ac3e45659764f752d7adc92_640.jpg" alt="">
    </div>
  </div>
</div>

CSS

.container{
  background: red;
  width: 100%;
  height: 400px;
  position: relative;
}
.text{
  position: absolute;
  z-index: 4;
  display:flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.background{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.color{
  width: 100%;
}

.color::after{
  content: '';
  width: 200px;
  height: 100%;
  background: blue;
}

.img{
  width: 30%;
  min-width: 300px;
  height: 100%;
}

.img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}