JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<main>
	<div class="lined">
		<h1><span>Hello this is some text, you shit</span></h1>
	</div>

	<div class="lined dark">
		<h1><span>Hello this is some text you shit!</span></h1>
	</div>
</main>

CSS

main {
	background-color: red;
	background-image: url('https://picsum.photos/200/300');
	-webkit-background-size: cover;
	background-size: cover;
	font-family: 'Space Grotesk', sans-serif;
	padding: 1rem;
}

.lined {
	--color: #fff;
	--bg-color: #000;
	/* background-color: var(--bg-color); */
	background-image: linear-gradient(to bottom,
		var(--color) 3px,
		transparent 3px,
		transparent calc(1em - 3px)
	);
	background-repeat: repeat-y;
	background-size: 100% 1em;
	isolation: isolate;
	padding-bottom: 0.7rem;
	padding-right: 3rem;
	padding-top: 0.7rem;
	mix-blend-mode: lighten;
}

.lined.dark {
	--color: #000;
	--bg-color: #fff;
	mix-blend-mode: multiply;
}

h1 {
	background: var(--bg-color);
	box-shadow: 0.25em 0 0 var(--bg-color);
	-moz-box-decoration-break:clone;
	-webkit-box-decoration-break:clone;
	box-decoration-break:clone;	color: var(--color);
	display: inline;
	font-size: 3.05rem;
	line-height: 0.982;
	position: relative;
	text-transform: uppercase;
	z-index: 1;
}