JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<select name="car_brands_id" id="car_brands_id" class="form-control"></select>

CSS

#car_brands_id {
  width: 400px;
}

JavaScript

var jsondata = [{
  "id": 2,
  "text": "Audi",
  "children": [{
    "id": 4,
    "text": "A4",
    "children": [{
      "id": 6,
      "text": "B5 1.9TDI",
    }, {
      "id": 7,
      "text": "B6",
    }]
  }]
}, {
  "id": 3,
  "text": "BMW"
}, {
  "id": 5,
  "text": "Citroen",
  "children": [{
    "id": 11,
    "text": "C3",
  }]
}, {
  "id": 8,
  "text": "Mercedes-Benz",
  "children": [{
    "id": 9,
    "text": "Klasa C",
    "children": [{
      "id": 10,
      "text": "W202",
    }]
  }]
}];

$('#car_brands_id').select2({
  data: jsondata,
  multiple: false,
  placeholder: "Wybierz markÄ™ i model",
});