JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
	</head>
	<body>
		<div class="container" id="module-calculate-something">
			<form id="field-calculating">
				<!---->
				<select id="choose-price">
					<option>Первый выбор</option>
					<option>Второй выбор</option>
					<option>Третий выбор</option>
					<option>Четвёртый выбор</option>
					<option>Пятый выбор</option>
				</select>
				<!-- тег br для косметики--><br><br>
				<!---->
				<label for="amount-peoples">Количество людей</label><span class="input-number-decrement">–</span>
				<input class="input-number" id="amount-peoples" type="text" value="1" data-min="1" data-max="400"><span class="input-number-increment">+</span>
				<!----><br><br>
				<!---->
				<label for="amount-hours">Количество часов</label><span class="input-number-decrement">–</span>
				<input class="input-number" id="amount-hours" type="text" value="1" data-min="1" data-max="24"><span class="input-number-increment">+</span>
				<!----><br><br>
				<!---->
				<label for="amount-days">Количество дней</label><span class="input-number-decrement">–</span>
				<input class="input-number" id="amount-days" type="text" value="1" data-min="1" data-max="24"><span class="input-number-increment">+</span>
				<!----><br><br>
				<!---->
			</form>
			<div class="price">Цена 1000 тугрик(а\ов).</div>
		</div>
		<script>
			let opCalculateCostSomething = {
				module: document.getElementById(`module-calculate-something`),
				select: document.getElementById(`choose-price`),
				gradPrices: [
					[1000, 600, 500, 450],
					[1000, 600, 500, 450],
					[1500, 800, 700, 600],
					[1500, 800, 700, 600],
					[1500, 1500, 1500, 1500]
				],
				events: {
					input: e =>...