JSFiddle - React, Tailwind, and code Playground

by brainsengineering

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col">
      <h4>Themes</h4>
      <input type="text" id="checkbox">
    </div>
  </div> 
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.e-list-group-item {font-weight:bold !important;background-color:#EEE !important;}

JavaScript

var     themesData=[
        { "Theme": "Seasonal Monitor", "Category": "Seasonal Explorer", "Id": "item1" },
        { "Theme": "Global Market Monitor", "Category": "Economic Explorer", "Id": "item2" },
        { "Theme": "Integrated Demand Analysis Platform (SISMOD/LEWIE)", "Category": "Economic Explorer", "Id": "item3" },
        { "Theme": "Market Assessment", "Category": "Economic Explorer", "Id": "item4" },
        { "Theme": "Market Bulletin", "Category": "Economic Explorer", "Id": "item5" },
        { "Theme": "Special Studies", "Category": "Economic Explorer", "Id": "item6" },
        { "Theme": "CFSAM", "Category": "Assessments Explorer", "Id": "item7" },
        { "Theme": "Emergency and Protracted Crisis", "Category": "Assessments Explorer", "Id": "item8" },
        { "Theme": "Essential Needs", "Category": "Assessments Explorer", "Id": "item9" },
        { "Theme": "IPC", "Category": "Assessments Explorer", "Id": "item10" },
        { "Theme": "JAM", "Category": "Assessments Explorer", "Id": "item11" },
        { "Theme": "Migration and Displacement", "Category": "Assessments Explorer", "Id": "item11" },
        { "Theme": "Multi-Sectorial", "Category": "Assessments Explorer", "Id": "item11" },
        { "Theme": "Population Baseline/CFSVA", "Category": "Assessments Explorer", "Id": "item11" },
        { "Theme": "Resilience", "Category": "Assessments Explorer", "Id": "item11" },
        { "Theme": "Urban", "Category": "Assessments Explorer", "Id": "item11" },
        { "Theme": "Hunger Snapshot", "Category": "Monitoring Explorer", "Id": "item11" },
        { "Theme": "Live Dashboard", "Category": "Monitoring Explorer", "Id": "item11" },
        { "Theme": "mVAM Bulletin", "Category": "Monitoring Explorer", "Id": "item11" }
    ];

    
    var checkList = new ej.dropdowns.MultiSelect({
        dataSource: themesData,
        fields: { groupBy: 'Category', text: 'Theme', value: 'Id' },
        placeholder: 'Select one or more themes',
        mode:...