JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="wrapper">
		<div class="modal">
		<div id="slider">
			<ul class="slides">
				<li class="slide"><img src="photo-cat2/k22_2.jpg" alt=""></li>
				
			</ul>
		</div>
		<div class="text">
			<h4>Мебельные щиты</h4>
			<form id = "calculator">
				<p>Рассчитайте стоимость мебельного щита с помощью онлайн-калькулятора!</p>
				<div class="row">
					<label>Материал:</label>
				<select id="wood-choice">
                        <option value="0" selected>сосна</option>
                        <option value="1">береза</option>
                        <option value="2">бук</option>
                        <option value="3">ясень</option>
                        <option value="4">дуб</option>
                    </select>
				</div>
				            
                 <div class="row">
                 	<label>Длина, мм:</label>
                    <input id="length" type="text" placeholder=" мм" />
                 </div>   
                       
                <div class="row">
                 	<label>Ширина, мм:</label>               
                    <input id="width" type="text" placeholder=" мм" />
                 </div>    
                
                
                <div class="row">
                 	<label>Толщина, мм:</label>               
                    <input id="height" type="text" placeholder=" мм" />
                 </div>
                
                <div class="row">
                	<button id="calc-submit">Рассчитать</button>
                </div>         
                
                <div class="row">
                	<label>цена, руб.:</label>      
                    <input type="text" id="price">
                </div>   
               
                			
			</form>
			
			<section>
				
				<p>Гарантия: 1 год.</p>
				<p>Производство: Россия г. Уфа</p>
			</section>
			<section>
				<form action="#" method="POST">
					<label>Оставить заявку:</label>
					<input type="text" name="name"...

CSS

html {
    font-family: arial;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
*{
	margin: 0;
	padding:0;

}
body{
	background-color: rgba(0, 0, 0, 0.5);
	
}
.wrapper{
	width: 950px;
	height:550px;
	position: relative;
	margin: 100px auto;
	
}
.modal{
	background-color: #fff;
	
	width:900px;
	height:500px;
	overflow: hidden;
	/*z-index: 10;*/
	/*position: relative;*/
}

#slider{
	width: 670px;
	height: 100%;
	float: left;
	position: relative;
	overflow: hidden;
	pointer-events: none;
}
#slider-balyas{
	width:100%;
	height: 250px;
}
.text-balyas{
width:100%;
}
.text-balyas p, .text-balyas h4 {
text-align:center;
}

.slides{
	display: block;
	width: 3000px;
	height:500px;
	margin: 0;
	padding: 0;
	margin-left:0px;
}
.slide{
	float: left;
	list-style-type: none;
}

.text{
	width: 230px;
	height: 100%;
	float: right;
	font-family: Roboto Condensed;
	font-size: 15px;
	font-weight: semi-bold;
	padding-left: 20px;
	box-sizing: border-box;
}
.text:after{
	content: "";
	width: 33px;
	height:33px;
	background: url(img/fancybox_sprite.png) no-repeat;
	position: absolute;
	top:-14px;
	right: 36px;
	background-position: 0 -2px;
	z-index: 100;
	cursor:pointer;
}
form.row{
	display: block;
}
#calculator p{
	margin: 10px 0;
	font-style: italic;
}
#calculator label{
	display: inline-block;
	width: 90px;
	height:25px;
	padding-right: 10px;
	vertical-align: center;
	margin: 5px 0;
}
 
input{
	width: 165px;
	height:25px;
	background-color: #C4C4C4;
	border:2px solid #A7A8A7;	
	color:#989898; 	
	box-sizing: border-box;
	margin-top: 4px;
	padding-left: 4px;
}

}
section{
	margin-top: 20px;
}
h4{
	font-size: 16px;
	margin-top: 20px;
}
img{
	width:100%;
	height:auto;
}
#calculator input,#calculator #wood-choice{
	width: 90px;
	height:25px;
	background-color: #fff;
	border:2px solid #A7A8A7;
	border-radius:3px;
	color:#989898; 	
	box-sizing: border-box;
}
 #submit{
	width:165px;
	height:25px;
	background-color: #C4C4C4;
	border:2px solid...