JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="hero">
  <img src="https://placeimg.com/1000/500/any" alt="" class="_img">
  
  <div class="_content">
    <h1>hello</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, fuga.</p>
  </div>
  <div class="_other"></div>
</div>

SCSS

.hero {
  display: grid;
  grid-template: 1fr / [left-start full-start] 2fr [left-end right-start] 1fr [right-end full-end];
  font-family: sans-serif;
  justify-items: center;
  align-items: center;
 
  
  > * {
    grid-area: full;
  }
  
  ._img {
    width: 100%;
    align-self: stretch;
    object-fit: cover;
  }
  
  ._content {
    grid-area: left;
    margin: 3rem;
    padding: 1rem 3rem;
    background: linear-gradient(to bottom right, #fff8, #fff1);
    box-shadow: 0 0 3rem #0004;
    backdrop-filter: blur(.5rem);
    border-radius: .5rem;
  }
}