JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="stack">
  <img src="https://www.imarc.com/writable/images/2022-about-people-lifestyle-headshots/_bioImage/matt_sahagian_12-16-21.jpg" alt="">
  <h1>but such<br>is the<br>way<br>of<br>capitalism.</h1>
  <h2>Matt Sahagian, 2021</h2>
</div>

SCSS

@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,700;1,400&display=swap');

body {
  background: #000;
}

.stack {
  width: 80vw;
  margin: 5vh auto;
  display: grid;
  grid: "a";
  align-items: center;
  justify-items: center;
  
  > * {
    grid-area: a;
  }
  
  &::before {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #0008, transparent);
    grid-area: a;
    z-index: 10;
    position: relative;
  }
}

img {
  filter: grayscale(1) contrast(1.5);
  width: 100%;
}
h1, h2 {
  color: white;
  z-index: 100;
  font-family: 'PT Serif', serif;
}

h1 {
  font-size: 64px;
  justify-self: start;
  align-self: start;
  padding-left: 1rem;
  text-shadow: 0 0 1rem black;
}

h2 {
  justify-self: end;
  align-self: end;
  padding: 2rem 4rem;
}