JSFiddle - React, Tailwind, and code Playground

HTML

<section class="table">
	<div class="container">	
		<div class="table__wrap">	
			<table>	
				<thead>	
					<tr>	
						<th>Дата</th>
						<th>Начало</th>
						<th>Имя</th>
						<th>Фамилия</th>
						<th>Поменять</th>
						<th>Удалить</th>
					</tr>
				</thead>
				<tbody>	
					<tr>
						<td>25/11/21</td>
						<td>10:15</td>
						<td>Константин</td>
						<td>Іванов</td>
						<td>+</td>
						<td>+</td>
					</tr>
					<tr>
						<td>25/11/21</td>
						<td>10:15</td>
						<td>Константин</td>
						<td>Іванов</td>
						<td>+</td>
						<td>+</td>
					</tr>
          <tr>
						<td>25/11/21</td>
						<td>10:15</td>
						<td>Константин</td>
						<td>Іванов</td>
						<td>+</td>
						<td>+</td>
					</tr>
          <tr>
						<td>25/11/21</td>
						<td>10:15</td>
						<td>Константин</td>
						<td>Іванов</td>
						<td>+</td>
						<td>+</td>
					</tr>
          <tr>
						<td>25/11/21</td>
						<td>10:15</td>
						<td>Константин</td>
						<td>Іванов</td>
						<td>+</td>
						<td>+</td>
					</tr>
          <tr>
						<td>25/11/21</td>
						<td>10:15</td>
						<td>Константин</td>
						<td>Іванов</td>
						<td>+</td>
						<td>+</td>
					</tr>
          <tr>
						<td>25/11/21</td>
						<td>10:15</td>
						<td>Константин</td>
						<td>Іванов</td>
						<td>+</td>
						<td>+</td>
					</tr>
          <tr>
						<td>25/11/21</td>
						<td>10:15</td>
						<td>Константин</td>
						<td>Іванов</td>
						<td>+</td>
						<td>+</td>
					</tr>
          <tr>
						<td>25/11/21</td>
						<td>10:15</td>
						<td>Константин</td>
						<td>Іванов</td>
						<td>+</td>
						<td>+</td>
					</tr>
          <tr>
						<td>25/11/21</td>
						<td>10:15</td>
						<td>Константин</td>
						<td>Іванов</td>
						<td>+</td>
						<td>+</td>
					</tr>
          <tr>
						<td>25/11/21</td>
						<td>10:15</td>
						<td>Константин</td>
						<td>Іванов</td>
						<td>+</td>
						<td>+</td>
					</tr>
         ...

CSS

body {
    margin: 0;
    padding: 0px;
    width: 100%;
    overflow-x: hidden;
}
*::after, *::before {
    box-sizing: border-box;
}
*::after, *::before {
    box-sizing: border-box;
}

.table {
	background-color: #593d91;
  padding: 40px;
}

.table__wrap {
	overflow: auto;
  max-height: 250px;
}

.table__wrap table {
	width: 100%;
	min-width: 500px;
	overflow: hidden;
}

.table__wrap tbody {
	background-color: #fff;
}

.table__wrap tbody tr:first-child td:first-child {
	border-top-left-radius: 10px;
}

.table__wrap tbody tr:first-child td:last-child {
	border-top-right-radius: 10px;
}

.table__wrap tbody tr:last-child td:first-child {
	border-bottom-left-radius: 10px;
}

.table__wrap tbody tr:last-child td:last-child {
	border-bottom-right-radius: 10px;
}

.table__wrap th,
.table__wrap td {
	text-align: left;
	padding-left: 25px;
}

.table__wrap th {
	font-size: 43px;
}

.table__wrap td {
	font-size: 38px;
	font-weight: normal;
	font-family: "ToyotaTypeBook";
}

.table__wrap thead tr th:first-child,
.table__wrap thead tr td:first-child,
.table__wrap tbody tr th:first-child,
.table__wrap tbody tr td:first-child {
	padding-left: 120px;
}

.table__wrap thead th:first-child,
.table__wrap thead td:first-child,
.table__wrap tbody th:first-child,
.table__wrap tbody td:first-child {
	max-width: 460px;
	min-width: 250px;
}

.table__wrap thead th:nth-child(2),
.table__wrap thead td:nth-child(2),
.table__wrap tbody th:nth-child(2),
.table__wrap tbody td:nth-child(2) {
	max-width: 270px;
	min-width: 200px;
}

.table__wrap thead th:nth-child(3),
.table__wrap thead td:nth-child(3),
.table__wrap tbody th:nth-child(3),
.table__wrap tbody td:nth-child(3) {
	max-width: 600px;
	min-width: 250px;
}

.table__wrap thead th:nth-child(4),
.table__wrap thead td:nth-child(4),
.table__wrap tbody th:nth-child(4),
.table__wrap tbody td:nth-child(4) {
	max-width: 445px;
	min-width: 310px;
}

.table__wrap thead th:nth-child(5),
.table__wrap thead td:nth-child(5),
.table__wrap tbody...