JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

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

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;
}
#arrow1, #arrow2 {
    position:absolute;
    top:0;
    height:100%;
    width:2%;
    z-index:3;
    background-color:red;
}
#arrow1 {
    left:0;
}
#arrow2 {
    right:0;
}
#content {
    height:100%;
    margin-left:2%;
    position:relative;
    z-index:1;
}
#scrollmenu:after {
    background-image: linear-gradient(to right, rgba(255,255,255,0), black);
    content:" ";
    width:15%;
    position:absolute;
    right:0;
    top:0;
    height:100%;
    z-index:2;
}
.transparencys {
    float:right;
    height:100%;
    width:2ex;
    background-color:black;
    z-index:5;
}