JSFiddle - React, Tailwind, and code Playground

by akogch

HTML

<div>
<h1>retro</h1>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap');

* {
  margin: 0;
}

div {
  display: inline-block;
  padding: 4px;
  height: 350px;
  background: rgb(223, 223, 215);
  border: 4px solid black;
}

h1 {
  position: relative;
  display: inline-block;
  background-color: black;
  background-image: url(https://www.mentoday.ru/upload/img_cache/af3/af3d9149e5dd2748ae0cbce92caf60eb_ce_5472x3648x0x0_cropped_1332x888.webp);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 200px;
  font-family: "Gowun Batang", serif;
  font-weight: 700;
  font-style: normal;
  line-height: 1em;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position-y: 74px;
}
h1::after {
  content: "";
  position: absolute;
  top: 85%;
  left: 0;
  right: 0;
  width: inherit;
  height: 180px;
  background-image: url(https://www.mentoday.ru/upload/img_cache/af3/af3d9149e5dd2748ae0cbce92caf60eb_ce_5472x3648x0x0_cropped_1332x888.webp);
  background-size: 100%;
  background-position-y: -95px
}