JSFiddle - React, Tailwind, and code Playground

by Pritam Bohra

HTML

<html>
  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis incidunt natus dolorum est iusto deserunt culpa veritatis, impedit quod, eum facere quae quia, alias sit dicta rerum eligendi harum, facilis. Soluta accusantium excepturi nulla culpa eius minus ex voluptas impedit beatae doloribus placeat fuga ut nam voluptatum veritatis, et ullam suscipit maxime ad laudantium eos mollitia! Dicta illum sint enim architecto quod. Asperiores consequuntur omnis at, autem deserunt odit aspernatur hic! Quo tempore, eveniet beatae nemo odit id nesciunt incidunt? Dicta deleniti, tenetur consequuntur culpa saepe esse error velit perferendis tempora dolores commodi quisquam temporibus quas cupiditate quasi earum amet dolorum enim! Ipsam, ullam explicabo iste quisquam accusamus, excepturi, ex officiis minima ratione aut ab praesentium, provident aliquam aspernatur libero. Repellendus ipsam mollitia cumque. Autem veniam deserunt ab similique aut officia voluptatibus repellat et, perferendis labore alias, excepturi sequi sed repellendus itaque. Eligendi ratione nostrum distinctio accusamus tempore maiores fuga veniam? Illum quasi incidunt recusandae? Eaque nemo explicabo officia quos perspiciatis aliquid et ducimus nostrum eveniet sint ullam nam, quaerat, accusamus. Nesciunt placeat, culpa aliquid exercitationem adipisci obcaecati quia atque saepe, fugit molestias doloribus dolore, tenetur delectus hic esse soluta perferendis! A ex adipisci ipsum ad repudiandae quo explicabo itaque sequi, deleniti nam rem architecto laudantium voluptatibus cum doloremque veritatis nulla, magnam delectus molestias eligendi illum. Non quisquam id odit a eveniet, cum facilis sequi, nemo rerum quam fugit consequuntur aperiam alias aut distinctio necessitatibus nostrum. Commodi enim iure debitis hic fugiat maxime est consequuntur quia pariatur magni eum, minima voluptatibus voluptates iusto, dignissimos et doloribus vitae mollitia sequi magnam....

CSS

html, body {
  height: 100%;
}
.container {
  width: 50%;
  border: 1px solid #ff0000;
  height: 50%;
  overflow: auto;
}

::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}