JSFiddle - React, Tailwind, and code Playground

by Alaksandar Jesus Gene

HTML

<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, quisquam, itaque. Voluptates laudantium amet tenetur, voluptate nihil harum ipsam nisi optio, quidem, nostrum numquam porro alias molestias velit. Nobis, repellat?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum quisquam magnam consectetur id. Aperiam optio unde voluptate inventore, saepe nulla perspiciatis necessitatibus distinctio repellendus laudantium, odio dicta quis nisi, ut?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam fugiat blanditiis neque assumenda omnis exercitationem porro cum hic sint accusamus doloremque, repudiandae commodi distinctio! Quaerat, nostrum id molestias optio veniam.</p>
</div>

CSS

body{
 width:800px;
 
}

.content{
  width:400px;
white-space: nowrap;
  height:100px;
  overflow-x:scroll;
  overflow-y:hidden;
}


/* Let's get this party started */
.content::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
.content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
.content::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.content::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
}