JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="bileti30.css">
	<script src="lesson30.js"></script>
	<script src="https://kit.fontawesome.com/c0a4c8df11.js" crossorigin="anonymous"></script>
	<title>Java</title>
</head>
<body>
	<div id="osnovnoi">
		<div class="header_content">
			<h2 class="header_center">Покупка билетов</h2>
		</div>
		<div class="content">
			<div class="ticket_content">
				<div class="category_content">
					<h4>Категории</h4>
					<h4>Количество билетов</h4>
					<h4>Цена</h4>
				</div>
				<div class="category_content">
					<h4>Категория 1</h4>
					<div class="plus_minus">
						<!-- <i class="fa-solid fa-minus" onclick="minus(1)"></i> -->
						<input type="number" id="col_1" class='inputiAll' value="0" oninput='FunTest()'>
						<!-- <i class="fa-solid fa-plus" onclick="plus(1)"></i> -->
						<span id="vivod_1" class="none">0</span>
					</div>
					<span id="cena_1">300</span>
				</div>
				<div class="category_content">
					<h4>Категория 2</h4>
					<div class="plus_minus">
						<!-- <i class="fa-solid fa-minus" onclick="minus(2)"></i> -->
						<input type="number" id="col_2" class='inputiAll' value="0" oninput='FunTest()'>
						<!-- <i class="fa-solid fa-plus" onclick="plus(2)"></i> -->
						<span id="vivod_2" class="none">0</span>
					</div>
					<span id="cena_2">400</span>
				</div>
				<div class="category_content">
					<h4>Категория 3</h4>
					<div class="plus_minus">
						<!-- <i class="fa-solid fa-minus" onclick="minus(3)"></i> -->
						<input type="number" id="col_3" class='inputiAll' value="0" oninput='FunTest()'>
						<!-- <i class="fa-solid fa-plus" onclick="plus(3)"></i> -->
						<span id="vivod_3" class="none">0</span>
					</div>
					<span id="cena_3">500</span>
				</div>			
			</div>
			<div class="ticket_price">
				<h4 class="right">- К оплате: <span id="itog_ticket">0</span></h4>
			</div>
		</div>
	</div>
</body>
</html>

CSS

/* ======================================= Обнуление ================================================= */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,  
form, fieldset, input, p, blockquote, table, th, td, embed, object { 
  padding: 0; 
  margin: 0;  
  } 
table { 
  border-collapse: collapse; 
  border-spacing: 0; 
  } 
fieldset, img, abbr { 
  border: 0; 
  } 
address, caption, cite, code, dfn, em,  
h1, h2, h3, h4, h5, h6, strong, th, var { 
  font-weight: normal; 
  font-style: normal; 
  } 
caption, th { 
  text-align: left; 
  } 
h2, h3, h4, h5, h6 { 
  font-size: 1.0em; 
  } 
q:before, q:after { 
  content: ''; 
  } 
a, ins { 
  text-decoration: none; 
  color: #000;
  }
h4{
  margin-left: 10px;
}
#vsplivayka li{
  list-style: none;
}
/* =======================================end Обнуление ================================================= */
body{
  font-family: cursive;
  font-size: 16px;
  background-color: #bfd8ef;
  color: #000;
}
.category_content input{
  width: 40%;
    text-align: center;
}
#osnovnoi{
  width:1170px;
  margin:0 auto;      /* контейнер по центру */
  padding:0 12px;
  box-sizing:border-box;
}

.header_center{
  text-align: center;
  padding-top: 70px;
  padding-bottom: 50px;
}

#osnovnoi h2{
  font-size: 25px;
}

#osnovnoi i{
  font-size: 14px;
  cursor: pointer;
}

.category_content{
  padding: 10px 25px 10px 25px;
  border: 2px solid black;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 50%;
}

.inline{
  display: inline-block;
  list-style: none;
}

.right{
  margin-right: 430px;
}

#osnovnoi .inp_5{
  font-family: monospace;
  font-size: 16px;
  padding: 7px 16px 7px 16px;
  background: #bfd8ef;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.5s;
}

#osnovnoi .inp_5:hover{
  background: orange;
}

.ticket_price{
  margin-bottom: 20px;
  margin-top: 12px;
}
.none{
  display: none ;
}

.flex{
  display: flex;
}
.vsplivayka_footer{
  text-align: center;
  border: 1px...

JavaScript

function FunTest() {
	var colichestvo = 1*document.getElementById('col_1').value;
	var cena = 1*document.getElementById("cena_1").innerHTML;

	var res = colichestvo * cena;

	var itog = 1*document.getElementById('vivod_1').innerHTML;
	itog = res;
	document.getElementById('vivod_1').innerHTML = itog;

	var total = 1*document.getElementById('itog_ticket').innerHTML;
	total = itog;
	document.getElementById('itog_ticket').innerHTML = total;
 }