JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container mt-3">

  <h4 class="mt-3 mb-3">Scroll Horizontal</h4>

  <div class="scroll-x">
  
    <div class="top-block"><code>position: relative; top: 20px;</code></div>
    <div class="scolling-content"></div>
    
  </div>

</div>

SCSS

BODY {
  width: 100%;
  overflow: hidden;
}

.scroll-x {
  overflow-x: scroll;
  height: 400px;
  border: 2px dotted #e83e8c;
}

.top-block {
  position: relative;
  top: 20px;
  height: 40px;
  background: rgba(0,0,0,0.75);
  color: #ffffff;
  line-height: 40px;
  text-align: center;
}

.scolling-content {
  background-image: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
  width: 10000px;
  height: 400px;
}