JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<div class="thumb">
	hello
</div>

CSS

body {
	background: #010101;
}

.thumb {
	width: 100%;
	height: 100vh;
	background-image: url('https://images.unsplash.com/photo-1542640244-7e672d6cef4e?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
	background-size: cover;
	background-position: center;
  mask-image: linear-gradient(to bottom, transparent, #000),
    linear-gradient(to bottom, #000, transparent), linear-gradient(
      to bottom,
      transparent,
      #000
    ), linear-gradient(to bottom, #000, transparent), linear-gradient(to
        bottom, transparent, #000);
  mask-size: 18% 70%;
  mask-position:
    0 100%,
    25% 25%,
    50% 50%,
    75% 0,
    100% 50%;
  mask-repeat: no-repeat;
}