JSFiddle - React, Tailwind, and code Playground

HTML

<div class='cr-cat'>
              <select multiple>
                <option disable>Design</option>
                <option>Programming</option>
                <option>front-end</option>
                <option>Cooking</option>
                <option>Работает</option>
                <option>И это работает</option>
                <option>Стоит зажать Ctrl</option>
                <option>Cooking</option>
                <option>Design</option>
                <option>Programming</option>
                <option>front-end</option>
                <option>Cooking</option>
                <option>Design</option>
                <option>Programming</option>
                <option>front-end</option>
                <option>Cooking</option>
              </select>
</div>

CSS

.cr-cat select {
	height: 466px;
	width: 100%;
	display: block;
	overflow-x: hidden;
	background: #ebf0f1;
	border: 0;
}
.cr-cat select option {
	text-decoration: none;
	color: #5c5c5c;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.5;
	padding-bottom: 6px;
	padding-top: 6px;
	padding-left: 20px;
	padding-right: 100%;
}
.cr-cat select option:hover {
	background: #cbcbcb;
}