JSFiddle - React, Tailwind, and code Playground

by vgoklani

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js&quot;"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
		<nav class="navbar navbar-dark navbar-fixed-top">
			<div class="container-fluid">

				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
						<i class="fa fa-chevron-down fa-2x" style="font-size: 16px;color:#fff"></i>
					</button>
					<a class="navbar-brand">NAME</a>
				</div>

				<div class="collapse navbar-collapse" id="navbar">
					<form class="navbar-form navbar-left" role="search">
						<div class="form-group">
							<select multiple class="Search1" multiple="multiple" id="Search1" style="width:400px;height:34px"></select>
						</div>
					</form>

					<form class="navbar-form navbar-left" role="search">
						<div class="form-group">
							<select multiple class="Search2" multiple="multiple" id="Search2" style="width:400px;height:34px"></select>
						</div>
					</form>

				</div>
			</div>
		</nav>

CSS

* {
	border-radius: 0 !important;
}

body {
	overflow-x: hidden;
	overflow-y: hidden;
}

JavaScript

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

alert("please resize the Result window to make the search boxes appear!")

$("#Search1").select2({data:data})

$("#Search2").select2({data:data})