JSFiddle - React, Tailwind, and code Playground

HTML

<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.22/b-1.6.5/b-html5-1.6.5/fh-3.1.7/datatables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.22/b-1.6.5/b-html5-1.6.5/fh-3.1.7/datatables.min.js"></script>
<div class="container mt-4">
  <div class="topmenurow">
    <a class="btn btn-primary ml-2" href="/Dashboard">Oversikt</a>
    <a class="btn btn-primary ml-2" href="/Cars">Biler</a>
    <a class="btn btn-primary ml-2" href="/Computers">Datamaskiner</a>
    <a class="btn btn-primary ml-2" href="/Employees">Ansatte</a>
    <a class="btn btn-primary ml-2 selectedmenu" href="/Projects">Prosjekt</a>
    <a class="btn btn-primary ml-2" href="/Tools">Verktøy</a>
    <a class="btn btn-primary ml-2" href="/Toolloans">Lån</a>
    <a class="btn btn-primary ml-2" href="/Toolcategories">Verktøykat.</a>
    <a class="btn btn-primary ml-2" href="/Users">Brukere</a>
    <a class="btn btn-primary ml-2" href="/EditUser?userId=b5655934-e7bf-4205-95dd-6c4f2754e12a">Min side</a>
  </div>
  <br><br><br>
  <nav>
    <ol class="breadcrumb">
      <li class="breadcrumb-item active"><a href="/Projects">Prosjekt</a></li>
    </ol>
  </nav>
  <p>
    <a href="/NewProject" class="btn btn-primary ml-4">+ Nytt Prosjekt</a><a style="float:right" href="/Projects?old=1">Klikk for å vise avsluttede prosjekt</a>
  </p>
  <div class="table-wrapper">
    <div class="table-responsive">
      <table class="table" id="data">
        <thead>
          <tr>
            <th>Nr</th>
            <th>Navn (klikk for å se utlån)</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2</td>
            <td><a...

CSS

.clickable {
  cursor: pointer;
}

.excelButton {
  height: 20px;
  margin-left: 10px;
  font-size: 11px;
  padding: unset;
}

.topmenurowitem {
  height: 40px;
  width: auto;
}

.selectedmenu {
  background-color: #2222FF;
}

.iconlabel {
  display: inline-block;
  white-space: nowrap;
}

div.dataTables_length {
  font-size: 11px;
}

div.dataTables_length label select {
  font-size: 11px;
}

div.dataTables_filter {
  font-size: 11px;
}

div.dataTables_filter label input {
  font-size: 11px;
}

div.dataTables_info label {
  font-size: 11px;
}

div.dataTables_info {
  font-size: 11px;
}

div.dataTables_paginate li {
  font-size: 11px;
}

div.dataTables_paginate {
  font-size: 11px;
}

.metarows {
  font-size: 11px;
  color: #11182180;
  float: right;
  padding: 0px 3px 8px 16px;
}

.wrapperh1 {
  text-align: center;
  font-weight: 600;
  padding-bottom: 16px;
}

.delete {
  color: #FF3333;
  float: right;
}

table {
  border: 1px solid #dededc;
  padding: 0px 0px 0px 0px;
  table-layout: fixed;
}

th {
  background-color: #f3f3f0;
  font-size: 11px;
  text-transform: uppercase;
  border-bottom: 1px solid #d3d3d3;
  padding: 10px 3px 8px 16px;
}

tr:hover td {
  background: rgb(240, 240, 255);
}

.buttons2folders {
  background-color: #F9E400;
  height: 7px;
  display: flex;
  position: relative;
  top: -2px;
}

.table-wrapper {
  float: left;
  background-color: rgb(248, 248, 239);
  outline-color: rgb(68, 68, 68);
  color: rgb(68, 68, 68);
  border-left-color: rgb(218, 219, 212);
  border-left-style: solid;
  border-left-width: 1px;
  border-bottom-color: rgb(218, 219, 212);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-right-color: rgb(218, 219, 212);
  border-right-style: solid;
  border-right-width: 1px;
  border-top-color: rgb(218, 219, 212);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-top-style: solid;
  border-top-width: 1px;
 ...

JavaScript

$(document).ready(function() {
          var table = $('#data').DataTable({
          dom:'lftriBp',
            fixedHeader: true,
            stateSave: true,
            buttons: {
              buttons: [{
                extend: 'excelHtml5',
                text: 'Excel',
                className: 'excelButton'
              }]
            },
            "initComplete": function() {
              $('#data_filter label input').focus();
            },
            pageLength: 10,
            "columnDefs": [{
                "targets": [0],
                "width": "5em"
              },
              {
                "targets": [2],
                "width": "9em",
                sortable: false,
                searchable: false
              }
            ]
          });
          //table.buttons().container().appendTo($('#data_info', table.table().container()));
          // This line will make the button appear after clicking paging or page size, but clicking it then doesn't do anything
          // table.on( 'draw', function () { table.buttons().container().appendTo( $('#data_info', table.table().container() ) );} );
        });