JSFiddle - React, Tailwind, and code Playground

HTML

<section>
		<ul>
			<li>some text</li>
			<li>some text</li>
			<li>some text</li>
			<li>some text</li>
			<li>some text</li>
			<li>some text</li>
			<li>some text</li>
		</ul>
	</section>

CSS

*{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
			background-color: #f13e39;
			color: #f5f5f5;
			font-family: 'Inconsolata LGC';
			letter-spacing: -1px;
		}
		section{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
		ul{
			list-style: none;
			position: relative;
		}
		ul::after{
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 2px;
			height: calc(100% - 62px);
			background-color: white
		}

		li{
			margin: 10px 30px;
			padding: 20px;
			position: relative;
			text-transform: uppercase;
		}
		li::after{
			content: '';
			position: absolute;
			width: 34px;
			height: 2px;
			background-color: whitesmoke;
			left: -29px;
			top: 50%;
			transform: translateY(-50%); 
		}