JSFiddle - React, Tailwind, and code Playground

by lanea07

HTML

<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/af-2.3.3/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.css">
<script src="cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/af-2.3.3/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.19/sorting/diacritics-sort.js"></script>
<table class="nowrap table-striped table-bordered table-hover table-sm table-responsive" id="tblDirectorioOperaciones"
    style="width: 100%;">
    <thead class="thead-dark">
        <tr>
            <th data-priority="1" class="" scope="col">Dependencia</th>
            <th class="" scope="col">Área</th>
            <th class="none" scope="col">Usuario de red</th>
            <th data-priority="2" class="name" scope="col">Nombre</th>
            <th class="mail" scope="col">Correo</th>
            <th class="" scope="col">Extensión</th>
            <th class="none" scope="col">Acciones</th>
        </tr>
    </thead>
    <tbody>
<tr>
    <td class="text-secondary">Administración</td>
    <td class="text-secondary">ADI</td>
    <td class="text-secondary">avasquez</td>
    <td class="text-secondary">Ana Lucia Vasquez Velasquez</td>
    <td...

CSS

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Tooltip */
.tooltip>.tooltip-inner {
    background-color: #bd2130;
    color: #FFFFFF;
    border: 2px solid #414339;
    font-size: 12px;
}

/* Tooltip on top */
.tooltip.top>.tooltip-arrow {
    border-top: 5px solid green;
}

/* Tooltip on bottom */
.tooltip.bottom>.tooltip-arrow {
    border-bottom: 5px solid blue;
}

/* Tooltip on left */
.tooltip.left>.tooltip-arrow {
    border-left: 5px solid red;
}

/* Tooltip on right */
.tooltip.right>.tooltip-arrow {
    border-right: 5px solid #414339;
}

.col-sm-12 #warning .col-sm-4 img,
.col-sm-12 #hearthBreak .col-sm-4 img,
.col-sm-12 #successCoding .col-sm-4 img {
    border-radius: 100%;
    width: 100px;
    height: 100px;
}

div.slider {
    display: none;
}

div.slider table {
    width: 50%;
}

table.dataTable tbody td.no-padding {
    padding: 0;
}

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #16a2b6;
    border-color: #16a2b6;
}

.page-link:hover {
    z-index: 2;
    color: #16a2b6;
    text-decoration: none;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.page-link {
    color: #16a2b6;
}

div.alphabet {
    width: 100%;
    margin-bottom: 1em;

}

div.alphabet span,
.clear-active {
    display: table-cell;
    /*color: #3174c7;*/
    cursor: pointer;
    text-align: center;
}

div.alphabet span:hover {
    text-decoration: underline;
}

div.alphabet span.active {
    color: #80ff80;
}

div.alphabet span.empty {
    color: #ce6f6f;
}

div.alphabetInfo {
    opacity: 0;
    display: block;
    position: absolute;
    background-color: #444444;
    border-radius: 3px;
    color: #80ff80;
    text-shadow: 0px 0px 3px black;
    top: 2em;
    height: 1.8em;
    padding-top: 0.4em;
    text-align: center;
    z-index: 1;
    width: 40px !important;
}

/*-- Font Awesome Button Toggle --*/

#fntAw {
    color: #111;

    width: 15px;
    height: 15px;
    position:...

JavaScript

var table
var _alphabetSearch = '';

$(document).ready(function () {

    table = $('#tblDirectorioOperaciones').DataTable({
        responsive: true,
        columnDefs: [
            { targets: "_all", type: 'diacritics-neutralise' }
        ],
        columnDefs: [{
            render: function (data, type, full, meta) {
                if (type === 'filter') {
                    return $('#dataCheck').DataTable().cell(meta.row, meta.col).nodes().to$().find('input').val();
                } else {
                    return data;
                }
            }
        }],
        columnDefs: [{
            targets: 'mail',
            render: function (data, type, full, meta) {
                if (meta.col == 4) {
                    return '<a class="text-danger" href="mailto:' + data + '">' + data + '</a>';
                }
            }
        }],
        dom: '<A><"top d-flex flex-column flex-xs-column flex-md-column flex-lg-row justify-content-between"<"mx-2"f><"mx-2"p>><t><"bottom d-flex flex-column flex-xs-column flex-md-column flex-lg-column flex-xl-row justify-content-start"B<"mx-5"l><"mx-5"i>>',
        buttons: [{
                extend: 'copy',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5] //':visible'
                },
                className: 'btn btn-dark btn-sm',
                text: '<i class="fas fa-copy fa-lg"></i><span class="ml-2">Copiar</span>',
            },
            {
                extend: 'csv',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5] //':visible'
                },
                className: 'btn btn-success btn-sm',
                text: '<i class="fas fa-file-csv fa-lg"></i><span class="ml-2">A CSV</span>',
            },
            {
                extend: 'excel',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5] //':visible'
                },
                className: 'btn btn-success btn-sm',
             ...