JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scrollmenu">
		<div id="content">
		THIS CONTENT WILL SCROLL! Theres will always be a different word cut of in the end.  
		somecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontent
		somecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontentsomecontent
		</div>
	</div>
	<div id="transparencydiv">
	
	</div>

CSS

body, html{height:100%; width:100%;}
		*{padding:0; margin:0;}
		
		#scrollmenu{
			position:absolute;
			top:45%;
			height:10%; width:100%;
			overflow:hidden;
			white-space:nowrap;
			background-color:black;color:white;
		}
		#content{
			margin-left:2%;
			z-index:1;
		}
		#transparencydiv{
			position:absolute;
			top:45%;
			right:0;
			height:10%; width:15%;
			background-image: linear-gradient(to right, rgba(255,255,255,0), black)
		}