JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div id="popup-table-body">
	<table>
		<thead>
			<tr>
				<th>Наименование</th>
				<th>Вес</th>
				<th>Срок годности</th>
				<th>Цена</th>
				<th>Изготовитель</th>
			</tr>
		</thead>
		<tbody>
			<tr class="zoom-row">
				<td>Вареники</td>
				<td>400гр.</td>
				<td>20 суток</td>
				<td>50 сом</td>
				<td>Кыргызстан</td>
			</tr>
			<tr>
				<td>Булочки</td>
				<td>200гр.</td>
				<td>5 суток</td>
				<td>25 сом</td>
				<td>Кыргызстан</td>
			</tr>
			<tr>
				<td>Пельмени</td>
				<td>500гр.</td>
				<td>30 суток</td>
				<td>100 сом</td>
				<td>Кыргызстан</td>
			</tr>
			<tr>
				<td>Хлеб</td>
				<td>300гр.</td>
				<td>3 сутки</td>
				<td>15 сом</td>
				<td>Кыргызстан</td>
			</tr>
			<tr>
				<td>Пряники</td>
				<td>250гр.</td>
				<td>5 суток</td>
				<td>45 сом</td>
				<td>Кыргызстан</td>
			</tr>
			<tr>
				<td>Булочки</td>
				<td>200гр.</td>
				<td>5 суток</td>
				<td>25 сом</td>
				<td>Кыргызстан</td>
			</tr>
			<tr>
				<td>Пельмени</td>
				<td>500гр.</td>
				<td>30 суток</td>
				<td>100 сом</td>
				<td>Кыргызстан</td>
			</tr>
			<tr>
				<td>Хлеб</td>
				<td>300гр.</td>
				<td>3 сутки</td>
				<td>15 сом</td>
				<td>Кыргызстан</td>
			</tr>
			<tr>
				<td>Пряники</td>
				<td>250гр.</td>
				<td>5 суток</td>
				<td>45 сом</td>
				<td>Кыргызстан</td>
			</tr>
			<tr>
				<td>Булочки</td>
				<td>200гр.</td>
				<td>5 суток</td>
				<td>25 сом</td>
				<td>Кыргызстан</td>
			</tr>
			<tr>
				<td>Пельмени</td>
				<td>500гр.</td>
				<td>30 суток</td>
				<td>100 сом</td>
				<td>Кыргызстан</td>
			</tr>
			<tr>
				<td>Хлеб</td>
				<td>300гр.</td>
				<td>3 сутки</td>
				<td>15 сом</td>
				<td>Кыргызстан</td>
			</tr>
			<tr>
				<td>Пряники</td>
				<td>250гр.</td>
				<td>5 суток</td>
				<td>45 сом</td>
				<td>Кыргызстан</td>
			</tr>
			<tr>
				<td>Булочки</td>
				<td>200гр.</td>
				<td>5 суток</td>
				<td>25...

CSS

body {
	margin:0px;
}
#content {
	border:1px solid green;
	height:70%;
	margin:30px auto;
	padding:30px;
	width:90%;
}
#popup {
	display:none;
	height:100vh;
	left:0;
	position:fixed;
	text-align:center;
	top:0;
	width:100vw;
}
#popup-bg {
	background:rgba(0,0,0,0.3);
	bottom:0;
	height:auto;
	left:0;
	position:fixed;
	right:0;
	top:0;
	width:auto;
	z-index:1;
}
#popup-content {
	background:#fff;
	font-size:10pt;
	margin:5% auto;
	max-height:90%;
	max-width:90%;
	overflow-x:auto;
	overflow-y:auto;
	padding:20px 5px;
	position:sticky;
	text-align:center;
	top:1%;
	z-index:2;
	width:auto !important;
}
#popup table {
	box-sizing:border-box;
	margin:5px auto;
	width:500px;
}
#popup-table-body table thead {
	width:calc(100% - 1em);
}
#popup-table-body table tbody {
	border-top:1px solid grey;
	display:block;
	max-height:500px;
	overflow-y:auto;
	width:calc(100% + 1em);
}
#popup table tr {
	display:table;
	table-layout:fixed;
	width:95%;
}
#popup td {
	border:1px solid grey;
	padding:7px;
}
#zoom-area {
	background:#f2f2f2;
	border:1px solid grey;
	border-radius:4px;
	font-size:11pt;
	height:120px;
	left:350px;
	margin:0px auto;
	padding:6px 14px;
	position:fixed;
	text-align:left;
	top:50%;
	width:520px;
}
#zoom-area p {
	margin:0px;
}
#zoom-area button {
	float:right;
}
.zoom-row {
	background:#eeeeee;
	border:1px solid grey;
	border-radius:4px;
	display:block;
	font-size:11pt;
	height:70px;
	margin:0px auto;
	table-layout:auto;
	top:50%;
	width:100% !important;
	word-wrap:break-word;
	word-break:break-all;
}
.zoom-prev,.zoom-next {
	transition:0.2s;
}
.zoom-prev {
}
.zoom-next {
}
.zoom-pointer {
	color:#0381a0;
	font-size:25pt;
	left:300px;
	position:fixed;
	top:53%;
	z-index:999;
}
.zoom-up,.zoom-down {
	border:1px solid grey;
	border-radius:5px;
	color:#fff;
	display:inline-block;
	font-size:25pt;
	height:50px;
	opacity:0.7;
	position:fixed;
	right:20%;
	text-align:center;
	vertical-align:middle;
	width:50px;
	z-index:999;
}
.zoom-up:hover,.zoom-down:hover...

JavaScript

$(document).ready(function() {
 
      $('.view-price button').click(function() {
          $('#popup').fadeIn();
      });
 
      $('.zoom-down').click(function() {
          var zoom_ind = $('.zoom-row');
          var popuptablebodytabletbody = $('#popup-table-body table tbody');
 
          $('.zoom-next').removeClass();
          $('.zoom-prev').removeClass();
 
          $(zoom_ind).removeClass('zoom-row');
          $(zoom_ind).next().addClass('zoom-row');
 
          $('.zoom-row').next().addClass('zoom-next');
          $('.zoom-row').prev().addClass('zoom-prev');
 
          var zoomRow_name = $('#popup-table-body table thead tr th:first').text();
          var zoomInd_name = $('.zoom-row td:first').text();
          var zoomInd_weight = $('.zoom-row td:nth-child(2)').text();
          $('#zoom-area-name').empty();
          $('#zoom-area-weight').empty();
          $('#zoom-area button').remove();
          $('#zoom-area-name').append('<b>' + zoomRow_name + ': </b>');
          $('#zoom-area-name').append(zoomInd_name);
          $('#zoom-area-weight').append('<b>' + $('#popup-table-body table thead tr th:nth-child(2)').text() + ': </b>' + zoomInd_weight);
          $('#zoom-area').append('<button class="btn btn-warning">заказать</button>');
 
          $('#popup-table-body table tbody').animate({
                    scrollTop: $(".zoom-row").offset().top
          }, 400);
      });
 
      $('.zoom-up').click(function() {
          var zoom_ind = $('.zoom-row');
          var popuptablebodytabletbody = $('#popup-table-body table tbody');
 
          $('.zoom-next').removeClass();
          $('.zoom-prev').removeClass();
 
          $(zoom_ind).removeClass('zoom-row');
          $(zoom_ind).prev().addClass('zoom-row');
 
          $('.zoom-row').next().addClass('zoom-next');
          $('.zoom-row').prev().addClass('zoom-prev');
 
          var zoomRow_name = $('#popup-table-body table thead tr th:first').text();
          var zoomInd_name =...