JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Vocter's layout</title>
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/second.css">
	<meta name="vievport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<div class="header">
</div>
  <section>
 	<div class="container">
 		<div class="auto">
 			<div class="car">
 			  <img src="img/mini_class.png">
 				<div class="eval" id="e1">
 					<span>Рассчитать стоимость</span>
 					<div class="triangle" id="tr1"></div>
 				</div>
 			</div>
 			<div class="car">
 				<img src="img/middle_class.png">
 				<div class="eval" id="e2">
 					<span>Рассчитать стоимость</span>
 					<div class="triangle" id="tr2"></div>
 				</div>
 			</div>
 			<div class="car">
 				<img src="img/premium_class.png">
 				<div class="eval" id="e3">
 					<span>Рассчитать стоимость</span>
 					<div class="triangle"  id="tr3"></div>
 				</div>
 			</div>
 		</div>
 	</div>
 </section>

<section>
	<div class="container">
		<div class="clearfix">
			<div class="main">
				<div id="main_image">
					<img src="img/стандарт++.jpg">
				</div>
				<div class="images">
					<div class="image_icons" id="icon1">
					</div>
					<div class="image_icons" id="icon2">
					</div>
					<div class="image_icons" id="icon3">
					</div>
					<div class="image_icons" id="icon4">
					</div>
					<div class="image_icons" id="icon5">
					</div>
					<div class="image_icons" id="icon6">
					</div>
					<div class="image_icons" id="icon7">
					</div>
					<div class="image_icons" id="icon8">
					</div>
				</div>
					<div class="cost">
					  <p>Цена:</p>
					</div>
				<div class="cost-info">
						<div class="info">
							Материалы + работа <span id="sum">7000руб.</span>
						</div>
						<div class="call_me">
							<p>Позвоните мне<p>
						</div>
					</div>
				</div>
			<div class="sidebar">
				<ul class="menu" id="menu">
					<li id="menu_1"...

CSS

body{
	font-family: Arial, sans-serif;
	padding: 0;
	margin: 0;
	min-height: 1300px;
}

div{
	box-sizing: border-box;
}


.header{
	background: url(../img/header.png) no-repeat center top / cover;
	height: 90px;
	min-width: 1170px;
}

.container{
	width: 1170px;
	margin: 0 auto;
}

#main_image{
	width: 670px;
	height: 360px;
}

.auto{
	margin-top: 90px;
}

.auto .car{
	display: inline-block;
	height: 260px;
	margin: 0 auto;
}


.eval{
	min-width: 315px;
	height: 30px;
	background-color: #eb5346;
	margin-top: 60px;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	line-height: 35px;
	margin-left: 50px;
	font-size: 21px;
	cursor: pointer;
}

.main {
	float: left;
	margin-top: 80px;
	height: 360px;
	width: 750px;
	padding-left: 35px;
}

.images{
	min-width: 800px;
	height: 100px;
	clear: both;
	margin-bottom: 10px;
}

.image_icons{
	min-width: 95px;
	height: 95px;
	display: inline-block;
	margin: 0 auto;
}

.sidebar{
	float: right;
	margin-top: 70px;
    margin-right: 90px;
    width: 180px;    
}


ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: Arial;
}

.menu{
	border-left: 1px solid black;
	position: relative;
	height: 550px;
}


#drop{
	visibility: hidden;
	text-indent: 16px;
}


.cost-info{
	margin-left: 100px;
	line-height: 40px;
}

p{
	margin-top: 0px;
	margin-bottom: 0px;
}

.cost{
	min-width: 270px;
	font-size: 26px;
	color: #eb5346;
	margin-left: 100px;
}

.call_me{
	width: 270px;
	height: 40px;
	margin-left: 50px;
	display: inline-block;
	text-transform: uppercase;
	color: #fff;
	background-color: black;
	text-align: center;
	font-weight: 16px;
}


.info{
	border-top: 1px solid black;
	width: 275px;
	display: inline-block;
}

.triangle{
	width: 10px;
	height: 10px;
	border-top: 20px solid #eb5346;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	margin: 0 auto;
	opacity: 0;
}


.select{
	cursor: pointer;
	background: url('../img/arrow.png') no-repeat;
	margin-left:...

JavaScript

var d = document;

d.getElementById('e1').onclick = function eval1(){
	d.getElementById('tr1').style.opacity = 1;
	d.getElementById('tr2').style.opacity = 0;
	d.getElementById('tr3').style.opacity = 0;
	d.getElementById('main_image').innerHTML = `<img src="img/ситроен/стандарт++.jpg">`;
	sideBar1();
}

d.getElementById('e2').onclick = function eval2(){
	d.getElementById('tr2').style.opacity = 1;
	d.getElementById('tr1').style.opacity = 0;
	d.getElementById('tr3').style.opacity = 0;
	d.getElementById('main_image').innerHTML = `<img src="img/мазда/стандарт++.jpg">`;
	sideBar2();
}

d.getElementById('e3').onclick = function eval3(){
	d.getElementById('tr3').style.opacity = 1;
	d.getElementById('tr2').style.opacity = 0;
	d.getElementById('tr1').style.opacity = 0;
	d.getElementById('main_image').innerHTML = `<img src="img/мерседес/стандарт++.jpg">`;
	sideBar3();
}


function sideBar1(){
d.getElementById('menu_1').onmouseover = function(){
	d.getElementById('main_image').innerHTML = `<img src="img/ситроен/минимальный.jpg">`;
	minimal();
	}

d.getElementById('menu_2').onmouseover = function(){
	d.getElementById('main_image').innerHTML = `<img src="img/ситроен/стандарт.jpg">`;
	standart();
	}

d.getElementById('menu_3').onmouseover = function(){
	d.getElementById('main_image').innerHTML = `<img src="img/ситроен/стандарт+.jpg">`;
	standart_S();
	}

d.getElementById('menu_4').onmouseover = function(){
	d.getElementById('main_image').innerHTML = `<img src="img/ситроен/стандарт++.jpg">`;
	standart_SS();
	}	

d.getElementById('menu_5').onmouseover = function(){
	d.getElementById('main_image').innerHTML = `<img src="img/ситроен/стандарт+++.jpg">`;
	standart_SSS();
	}	

d.getElementById('menu_6').onmouseover = function(){
	d.getElementById('main_image').innerHTML = `<img src="img/ситроен/целиком.jpg">`;
	standart_SSS();
	}

d.getElementById('menu_7').onmouseover = function(){
	d.getElementById('main_image').innerHTML = `<img...