JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Wireless Media FE Task</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anymous">
  <link rel="stylesheet" type="text/css" media="screen" href="dist/main.css">
</head>
<body>
  <button id="trigerModal">MIle</button>
  <div class="tags">
    <div class="tags-container">
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal">Open Modal</button>
    </div>
  </div>
  <div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="gridSystemModalLabel">Tag</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <!-- <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> -->
            <div class="form-item">
                <label class="required" for="name">Name</label>
                <input required type="text" id="name"><br>
            </div>
          </div>
          <div class="row">
            <!-- <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> -->
            <div class="col-md-2 col-md-offset-4">
            <div class="form-item">
              <fieldset>
                <input type="checkbox" id="myfeed"...

JavaScript

$(document).ready(function() {

  /*  Add checked class used as check mark icon.
  *   @params
  *   tdNumber {Number} - number representing td.
   */
  function addCheckedClass(tdNumber) {
   var Nodes = document.querySelectorAll('#root tbody tr td:nth-of-type(' + tdNumber + ')');
    Nodes.forEach(function(node) {
      if (node.textContent === "Yes") {
        node.className = "checked";
      }
    })
  }
  addCheckedClass(5);
  addCheckedClass(4);

  $("#root thead tr:eq(1) th:not(:eq(3),:eq(4),:eq(5))").each(function(i) {
    var title = $(this).text();
    $(this).html("<input type=\"text\" placeholder=\"Search " + title + "\" />");

    $("input", this).on("keyup change", function() {
      if (table.column(i).search() !== this.value) {
        table
          .column(i)
          .search(this.value)
          .draw();
      }
    });
  });

// ovde nastavi
//   $("#root thead tr:eq(1) th:not(:eq(1), :eq(2),:eq(5),:eq(0))").each(function (i) {
//     var select = $('<select><option value="All">All</option>' +
//       '<option value="Checked">Checked</option>' +
//       '<option value="No">No</option></select>')
//       .appendTo($(this).empty())
//       .on('change', function () {
//         var term = $(this).val();
//         table.column(i).search(term, false, false).draw();
//       });
//     // table.column(i).data().unique().sort().each(function (d, j) {
//     //   select.append('<option value="' + d + '">' + d + '</option>')
//     // });
//   });



  var table = $("#root").DataTable({
    orderCellsTop: false,
    "bInfo": false, // Showing 1 of n entries - hide.
    "bSortCellsTop": false,
    dom: "frtlip", // Show entries.
    orderCellsTop: true,
    "order": [
      [0, "desc"]
    ],
    "columnDefs": [
      {
        "data": null,
        "defaultContent": "<span class=\"editor_remove\">Delete</span><span class=\"editor_edit\" data-toggle=\"modal\" data-target=\"#modal\">Edit</span> ",
        "targets": -1
      }
    ],
   ...