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>
					<option>Пятый выбор</option>
				</select>
				<label for="amount-peoples">Количество людей</label>
				<input id="amount-peoples" type="number" min="0" step="1"/>
				<label for="amount-hours">Количество часов</label>
				<input id="amount-hours" type="number" min="0" max="24" step="1"/>
				<label for="amount-days">Количество дней</label>
				<input id="amount-days" type="number" min="0" step="1"/>
			</form>
			<div class="price">Цена --- тугрик(а\ов).</div>
		</div>
		<script>
			let opCalculateCostSomething = {
				module: document.getElementById(`module-calculate-something`),
				select: document.getElementById(`choose-price`),
				gradPrices: [
					[0, 0, 0, 0],
					[1000, 600, 500, 450],
					[1000, 600, 500, 450],
					[1500, 800, 700, 600],
					[1500, 800, 700, 600],
					[1500, 1500, 1500, 1500]
				],
				events: {
					input: e => {
						[
							opCalculateCostSomething.peoples,
							opCalculateCostSomething.hours,
							opCalculateCostSomething.days,
						] = [
							+document.getElementById(`amount-peoples`).value,
							+document.getElementById(`amount-hours`).value,
							+document.getElementById(`amount-days`).value,
						];
						opCalculateCostSomething.module.lastElementChild.textContent =
							`Цена ${
								(
									opCalculateCostSomething.peoples *
									opCalculateCostSomething.hours *
									opCalculateCostSomething.days...