JSFiddle - React, Tailwind, and code Playground
by milz
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css">
<body>
<div id="content">
<div class="modal fade" id="addProductModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Add Product</h4>
</div>
<div class="modal-body">
<form method="POST" action="http://gastro.dev:8000/recipes/5" accept-charset="UTF-8">
<input name="_method" type="hidden" value="PUT"/>
<input name="_token" type="hidden" value="WrzUK4GOAl2VFhyE0JSR5NwLJajvuyxwBmhSGzJB"/>
<div class="form-group">
<label for="produkte">Produkte</label>
<select class="form-control" id="products" name="produkte">
<option value="7">Mein Produkt</option>
<option value="8">Anderes Produkt</option>
<option value="9">Noch ein test</option>
</select>
...
JavaScript
$('#addProductModal').modal();
$('#products').select2();