JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//wenzhixin.net.cn/p/multiple-select/multiple-select.css">
<script src="//wenzhixin.net.cn/p/multiple-select/jquery.multiple.select.js"></script>
<select name="" id=""></select>

CSS

li.multiple {
    margin-left: 20px;
}

JavaScript

var select = document.querySelector('select');
var jsonString = '[{ "id": 10, "nome": "Metodologia de Projecto", "nome1": "CAP" }, { "id": 7, "nome": "COMPUTA\u00c7\u00c3O", "nome1": "CAP" }, { "id": 8, "nome": "Tecnicas e Linguagem de Programa\u00e7\u00e3o", "nome1": "CEPID" }, { "id": 9, "nome": "Elabora\u00e7\u00e3o de projecto", "nome1": "CEPAC" }]';
var json = JSON.parse(jsonString);
var grupos = {};
json.forEach(function (data) {

    var grupo = data.nome1;
    if (!grupos[grupo]) {
        var optG = document.createElement('optgroup');
        optG.label = data.nome1;
        select.appendChild(optG);
        var g = {
            data: [],
            el: optG
        }
        grupos[grupo] = g;
        g.data.push(data);
    }
    var option = document.createElement('option');
    option.value = data.id;
    option.innerHTML = data.nome;
    grupos[grupo].el.appendChild(option);
});


$("select").multipleSelect({
    multiple: true,
    multipleWidth: 200,
    width: '100%'
});