JSFiddle - React, Tailwind, and code Playground

HTML

<!---------------------------------------Tabla Responsiva------------------------------------------------------------------>
<table id="dt_basic" class="table table-striped table-bordered table-hover table-responsive" width="100%">
    <thead>
        <tr>
            <th></th>
            <th data-hide="">@Html.DisplayNameFor(model => model.usuarios.Nom_usu)</th>
            <th data-hide="">@Html.DisplayNameFor(model => model.dueño_grupo)</th>
            <th data-hide="">@Html.DisplayNameFor(model => model.empresas.nom_emp)</th>
            <th data-class="expand"><i class="" text-muted hidden-md hidden-sm hidden-xs"></i>@Html.DisplayNameFor(model => model.categorias.nom_cat)</th>
            <th data-hide="phone"><i class="fa fa-comment text-muted hidden-md hidden-sm hidden-xs"></i>@Html.DisplayNameFor(model => model.fecha)</th>
            <th>@Html.DisplayNameFor(model => model.horas)</th>
            <th data-hide="phone,tablet"><i class="fa fa-fw fa-calendar txt-color-blue hidden-md hidden-sm hidden-xs"></i>@Html.DisplayNameFor(model => model.descuento)</th>
            <th data-hide="phone,tablet"><i class="fa fa-fw fa-calendar txt-color-blue hidden-md hidden-sm hidden-xs"></i>@Html.DisplayNameFor(model => model.descr_esp)</th>
            <th data-hide="phone,tablet"><i class="fa fa-fw fa-user text-muted hidden-sm hidden-xs"></i>@Html.DisplayNameFor(model => model.estado)</th>
            <th data-hide="phone,tablet"><i class="fa fa-fw fa-calendar txt-color-blue hidden-md hidden-sm hidden-xs"></i>@Html.DisplayNameFor(model => model.tipos_servicios.nom_tser)</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
            {
            <tr>
                <td>
                    <button class="btn btn-default" href="@Url.Action("Edit", new { id = item.ts_id})" data-toggle="modal" data-target="#remoteModal"><i class="fa fa-edit"></i></button>
                </td>
                <td>@Html.DisplayFor(modelItem =>...