JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<form>
    <select class="select-select2" multiple="multiple" data-placeholder="Please choose one or more" data-allow-clear="true" data-close-on-select="false">
<option>Lorem</option>
<option>ipsum</option>
<option>dolor</option>
<option>sit amet</option>
<option>consectetur</option>
<option>adipisicing</option>
<option>elit sed</option>
<option>do eiusmod</option>
<option>tempor</option>
<option>incididunt</option>
<option>ut labore</option>
<option>et dolore</option>
<option>magna aliqua</option>
<option>Ut enim ad</option>
</select>
    <button type="submit">Submit</button>
</form>

CSS

select,
.select2 {
    width: 90%;
    margin: 0 auto;
    border-radius: 0 !important;
    display: block;
}
.select2-container .select2-selection {
    height: 60px;
    overflow: scroll;
} 
.select2-container--default .select2-selection--multiple {
    border-radius: 0;
    line-height: 30px;
    font-size: 14p;
    border: 1px solid #fafafa;
}
form {
    background: #f0f0f0;
    padding: 20px 0;
    width: 100%;
}
button {
    width: 90%;
    margin: 20px auto 0;
    line-height: 30px;
    border-radius: 0;
    background: #fab100;
    display: block;
    border: none;
    color: #ffffff;
    font-size: 14px;
}

JavaScript

$(".select-select2").select2();