JSFiddle - React, Tailwind, and code Playground
HTML
<div id='calculate' class="calc">
<select id='price'>
<option value = "100">100р.</option>
<option value = "200">200р.</option>
<option value = "300">300р.</option>
<option value = "400">400р.</option>
<option value = "500">500р.</option>
</select>
<select id='count'>
<option value = "1">1шт.</option>
<option value = "2">2шт.</option>
<option value = "3">3шт.</option>
<option value = "4">4шт.</option>
<option value = "5">5шт.</option>
</select>
<div id="label">Стоимость</div><div id="result"></div>
</div>
CSS
html, body{margin: 0px; background-color: #20262e;}
.calc{
width: 220px;
height: 250px;
margin: 0px auto 0px auto;
background-color: #989898;
color: #515353;
padding: 10px;
font-size: 20px;
}
#label{
margin: 20px 0px -15px 0px;
}
select, option, #product,#count,#result{
width: 100%;
height: 40px;
margin: 20px 0px 0px 0px;
background-color: #ffe9e9;
border: 1px;
border-radius: 10px;
outline: none;
padding: 10px;
}
#result{
width: 90%;
height: 30px;
padding: 10px 10px 2px 10px;
}
JavaScript
calculate.onclick = function() {
const price = document.getElementById('price').value;
const count = document.getElementById('count').value;
document.getElementById('result').innerHTML = price * count;
}