JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="wrapper dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

CSS

.wrapper { overflow-x:hide; overflow-y:scroll; height:100px; background-color: #FFFFFF; border-radius: 0; }

.wrapper::-webkit-scrollbar-track
{
	background-color: #FFFFFF;
  border-radius: 10px;
}

.wrapper::-webkit-scrollbar
{
	width: 20px;
	background-color: #FFFFFF;
}

.wrapper::-webkit-scrollbar-thumb
{
	background-color: #000000;
  border-radius: 10px;
	border: 5px solid #FFFFFF;
}