JSFiddle - React, Tailwind, and code Playground

by edent

HTML

<select multiple>
  <option>Alan</option>
  <option selected>Bob</option>
  <option>Carrol</option>
  <option>David</option>
  <option selected>Edgar Allan Poe</option>
  <option>Frederick</option>
  <option>Gallahad</option>
  <option>Hildergard</option>
  <option>Isambard</option>
  <option>Jake</option>
  <option>Kelly</option>
  <option>Leopold</option>
</select>

CSS

select {
  padding: 2em;
  border: none;
  background-color: #7d2d2d;
  max-width: 512px;
  overflow: auto;
  height: 6em;
}

option {
  height: 2em;
  padding: 1em;
  margin: .25em;
  width: 100px;
  border: 1px solid #000;
  display: inline;
  text-align: center;
  background: white;
}

option:checked {
  color: blue;
  background: red;
  background: linear-gradient(#FFFEFF, #5A2569);
}

option:checked:after {
	content: " ✅";
	font-size: 75%;
  vertical-align: super;
}