JSFiddle - React, Tailwind, and code Playground

by biggAye

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css">
<select class="main-category" placeholder="Category"></select>

CSS

select{
  width: 200px;
}

.select-option {
		margin-top: 2px;
		margin-left: 5px;
	}

	.select-optgroup-option {
		margin-left: 15px;
	}

	.select-optgroup-header {
		margin-left: 5px;
	}

JavaScript

$('select').selectize({
  options: [{
      type: "Apparel & Accessories",
      value: "100",
      name: "Eyewear"
    },
    {
      type: "Apparel & Accessories",
      value: "101",
      name: "Footwear"
    },
    {
      type: "Apparel & Accessories",
      value: "102",
      name: "Handbags &Leather Goods"
    },
    {
      type: "Apparel & Accessories",
      value: "103",
      name: "Jewelry &Accessories"
    },
    {
      type: "Apparel & Accessories",
      value: "104",
      name: "Men's Clothing"
    },
    {
      type: "Apparel & Accessories",
      value: "105",
      name: "Screen Printing"
    },
    {
      type: "Apparel & Accessories",
      value: "106",
      name: "Seamstress"
    },
    {
      type: "Apparel & Accessories",
      value: "107",
      name: "Vintage &Thrift"
    },
    {
      type: "Apparel & Accessories",
      value: "108",
      name: "Women's Clothing"
    },

    {
      value: "200",
      name: "Architecture & Design"
    },
    {
      value: "300",
      name: "Art Gallery"
    },
    {
      value: "400",
      name: "Automotive"
    },

    {
      type: "Beauty",
      value: "500",
      name: "Aesthetician"
    },
    {
      type: "Beauty",
      value: "501",
      name: "Barbershops"
    },
    {
      type: "Beauty",
      value: "502",
      name: "Beauty Supply Store"
    },
    {
      type: "Beauty",
      value: "503",
      name: "Cosmetics"
    },
    {
      type: "Beauty",
      value: "504",
      name: "Grooming Products"
    },
    {
      type: "Beauty",
      value: "505",
      name: "Hair Care Products"
    },
    {
      type: "Beauty",
      value: "506",
      name: "Hair Salon"
    },
    {
      type: "Beauty",
      value: "507",
      name: "Hair Stylist"
    },
    {
      type: "Beauty",
      value: "508",
      name: "Makeup Artists"
    },
    {
      type: "Beauty",
      value: "509",
      name: "Nail Care"
    },
    {
      type: "Beauty",
      value: "510",
     ...