JSFiddle - React, Tailwind, and code Playground

by khushboo097

HTML

<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.js"></script>

<script>
  //var comentariosTable = []; //Global var
  var listHit = ["Mark", "Bob", "Jhon"];
  $(document).ready(function() {

    var comentarioButton = function(context) {

      var wWidth = $(window).width();
      var dWidth = wWidth * 0.8;
      var wHeight = $(window).height();
      var dHeight = wHeight * 0.8;

      var ui = $.summernote.ui;
      var button = ui.button({
        contents: '<i class="fa fa-comments"/>',
        tooltip: 'Comentarios',
        click: function() {
          $("#dialog").dialog({
            height: dHeight,
            width: dWidth,
            resizable: false,
            draggable: false
          });
        }
      });

      return button.render(); // return button as jquery object
    }


    var ParametrosButton = function(context) {

      var ui = $.summernote.ui;

      var i;
      var listHitHtml = "";
      for (i = 0; i < listHit.length; i++) {
        listHitHtml += "<li>" + listHit[i] + "</li>";
      }


      var button = ui.buttonGroup([
        ui.button({
          className: 'dropdown-toggle',
          contents: '<span class="fa fa-database"></span><i class="fa fa-comments"/><span class="caret"></span>',
          tooltip: "Parámetros disponibles",
          data: {
            toggle: 'dropdown'
          }
        }),
        ui.dropdown({
          className: 'drop-default summernote-list',
          contents: "<ul>" + listHitHtml + "</ul>",
         ...