JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
<p><a href="#" data-trigger="open">Open Select2 and watch no placeholder...</a></p>
<div class="hidden" data-target="open">
  <select name="select" id="select" class="select2" multiple data-placeholder="Select one or more...">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

CSS

.hidden {
  display:none;
}

JavaScript

$('[data-trigger="open"]').on('click', function(){
	$('[data-target="open"]').toggleClass('hidden');
})

$('.select2').select2({
	width: '100%'
});