JSFiddle - React, Tailwind, and code Playground

by niik

HTML

<ul>
  <li>
    <div class="title">List item 1</div>
    <div class="description">Wow, such description</div>
  </li>
  <li>
    <div class="title">List item 2</div>
    <div class="description">Wow, such description</div>
  </li>
  <li>
    <div class="title">List item 3</div>
    <div class="description">Wow, such description</div>
  </li>
  <li>
    <div class="title">List item 4</div>
    <div class="description">Wow, such description</div>
  </li>
</ul>

<ul class="secondary">
  <li>
    <div class="title">List item 1</div>
    <div class="description">Wow, such description</div>
  </li>
  <li>
    <div class="title">List item 2</div>
    <div class="description">Wow, such description</div>
  </li>
  <li>
    <div class="title">List item 3</div>
    <div class="description">Wow, such description</div>
  </li>
  <li>
    <div class="title">List item 4</div>
    <div class="description">Wow, such description</div>
  </li>
</ul>

CSS

:root {
  --primary-text-color: #666;
  --primary-background: white;
  --secondary-text-color: #999;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 4px;
  
  border-color: transparent;
  border-style: solid;
  border-width: 3px;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active, ::-webkit-scrollbar-thumb:hover {
  border-width: 0px 1px;
  border-radius: 3px;
}

:hover::-webkit-scrollbar-thumb:active, ::-webkit-scrollbar-thumb:active {
  background-color: var(--primary-text-color);
}

:hover::-webkit-scrollbar-thumb { 
  background-color: var(--secondary-text-color);
}

ul {
  margin: 0;
  padding: 10px;
  list-style-type: none;
  height: 200px;
  overflow: auto;
  margin-bottom: 20px;
  background: var(--primary-background);
}

ul li {
  background: var(--primary-background);
  padding: 10px;
}

ul li .title {
  color: var(--primary-text-color);
  font-size: 125%;
  font-weight: 600;
}

ul li .description {
  color: var(--secondary-text-color);
}

.secondary {
  --primary-background: #555;
  --primary-text-color: #eee;
  --secondary-text-color: #ccc;
}