JSFiddle - React, Tailwind, and code Playground

HTML

<div id="calc-block">
	<div class="corner tlw calc-cn"></div>
	<div class="corner tr calc-cn"></div>
	<div class="corner blw calc-cn"></div>
	<div class="corner br calc-cn"></div>
	<div id="calc-bg">
		<div id="calc-bg-pic">
			<link rel="stylesheet" type="text/css" href="_styles/calc.css" />
<script type="text/javascript" src="_scripts/win-params.js"></script>
<script type="text/javascript" src="_scripts/calc.js"></script>
<table id="calc" style="width:99%;">
<tr>
	<td style="width:25%;">
		<div class="item-block">
			<div class="item-title">Тип пластикового окна</div>
			<div class="item-select rounded" style="height:46px;padding:0;">
	    		<div id="wtypes">
	            	<div class="wtype-block">
	                	<img class="wtype" src="images/calc/win_types/a.png" alt="" />
					    <div class="wsubtype">
					        <div id="a1"><img src="images/calc/win_types/a1.gif" alt="" /></div>
					        <div id="a2"><img src="images/calc/win_types/a2.gif" alt="" /></div>
					        <div id="a3"><img src="images/calc/win_types/a3.gif" alt="" /></div>
					       	<div id="a4"><img src="images/calc/win_types/a4.gif" alt="" /></div>
					    </div>
	                </div>
	                <div class="wtype-block">
	                	<img class="wtype" src="images/calc/win_types/b.png" alt="" />
						<div class="wsubtype">
							<div id="b1"><img src="images/calc/win_types/b1.gif" alt="" /></div>
						    <div id="b2"><img src="images/calc/win_types/b2.gif" alt="" /></div>
						    <div id="b3"><img src="images/calc/win_types/b3.gif" alt="" /></div>
						    <div id="b4"><img src="images/calc/win_types/b4.gif" alt="" /></div>
						</div>
	                </div>
	                <div class="wtype-block">
	                  	<img class="wtype" src="images/calc/win_types/c.png" alt="" />
					    <div class="wsubtype">
					        <div id="c1"><img src="images/calc/win_types/c1.gif" alt="" /></div>
					        <div id="c2"><img...

CSS

#calc {padding-top:30px;margin-left:5px;margin-right:5px;}
#calc td {vertical-align:top;}
.item-block {width:90%;margin-bottom:15px;}
.item-title {padding-bottom:10px;font-weight:bold;}
.item-select {width:100%;background:url('/images/calc/transparent.png');padding:5px;}
#win-corner, #win-glass-pattern {text-align:center;vertical-align:top;}

p#subs {font-size:10pt;text-align:center;width:80%;margin-left:10%;}
#win-sizes {font-size:11pt;margin:0;padding:0;width:400px;position:relative;left:50%;margin-left:-210px;}
#win-sizes td {border:1px solid silver;vertical-align:top;}
#win-example {height:372px;width:375px;text-align:center;}
#height-block {width:40px;padding-left:5px;padding-right:5px;vertical-align:bottom;}
#winheight {margin-left:12px;margin-top:12px;height:290px;}
#winwidth {float:left;width:84%;margin-top:6px;margin-left:6px;}
#vvalue {margin-top:15px;margin-bottom:15px;}
#hvalue {float:right;}
#vvalue, #hvalue {width:30px;padding:5px;font-weight:bold;color:#f6931f;text-align:center;background:white;}

#wtypes {padding-left:.5em;}
#wtypes img {border:0;}
#wtypes .wtype-block {position:relative;float:left;}
#wtypes .wsubtype div, #wtypes .wtype {margin:5px 2px;padding:5px;cursor:pointer;}
#wtypes .wsubtype {position:absolute;left:0;top:0;background:white;display:none;}

#price-sum {font-size:48pt;color:#ed1849;}
#price-block, #services {margin-bottom:5px;}
#services {height:50px;font-size:14pt;}
#services .service {float:left;width:90px;margin-right:10px;}
#credit-block {width:155px;padding:10px;background:#ffd600;}
#credit-sum {font-size:28pt;color:#333;text-decoration:none;background:url('/images/calc/gray_dotted.gif') repeat-x bottom;}

#stats {font-size:10pt;padding:10px 5px 10px 5px;margin-bottom:20px;background:url('/images/calc/transparent.png');}
#stats .stat {overflow:hidden;height:16px;margin-bottom:5px;color:white;background:url('/images/calc/stats/bg.gif');}
#stats #win-type {font-weight:bold;margin-bottom:5px;}
#stats .rounder...

JavaScript

var items = {
	subtypes:{
		a1:{name:'Глухое',pic:'a1.png',w:289,h:372},
		a2:{name:'Глухое в створку',pic:'a2.png',w:289,h:372},
		a3:{name:'Поворотное',pic:'a34.png',w:289,h:372},
		a4:{name:'Поворотно-откидное',pic:'a34.png',w:289,h:372},
		b1:{name:'Поворотное с глухой створкой',pic:'b12.png',w:365,h:372},
		b2:{name:'Поворотно-откидное с глухой створкой',pic:'b12.png',w:365,h:372},
		b3:{name:'Двухстворчатое поворотное',pic:'b34.png',w:365,h:372},
		b4:{name:'Поворотное с поворотно-откидной створкой',pic:'b34.png',w:365,h:372},
		c1:{name:'Поворотное с двумя глухими створками',pic:'c12.png',w:363,h:326},
		c2:{name:'Поворотно-откидное с двумя глухими створками',pic:'c12.png',w:363,h:326},
		c3:{name:'Поворотное с глухой створкой',pic:'c34.png',w:363,h:326},
		c4:{name:'Поворотное с глухой и поворотно-откидной створкой',pic:'c34.png',w:363,h:326},
		c5:{name:'Трехстворчатое поворотное',pic:'c567.png',w:363,h:326},
		c6:{name:'Поворотное с поворотно-откидной створкой',pic:'c567.png',w:363,h:326},
		c7:{name:'Поворотное с двумя поворотно-откидными створками',pic:'c567.png',w:363,h:326},
		d1:{name:'Балконная дверь',pic:'d12.png',w:184,h:371},
		d2:{name:'Балконная дверь поворотно-откидная',pic:'d12.png',w:184,h:371}
	},
	glasses:{
		o24:{name:'24мм. Однокамерный',pic:'/images/steklopacket/24mm1k.png'},
		o32:{name:'32мм. Однокамерный',pic:'/images/steklopacket/32mm1k.png'},
		d32:{name:'32мм. Двухкамерный',pic:'/images/steklopacket/32mm2k.png'},
		d40:{name:'40мм. Двухкамерный',pic:'/images/steklopacket/40mm2k.png'},
		o24i:{name:'24мм. Однокамерный (i-стекло)',pic:'/images/steklopacket/24mm1k-i.png'},
		o32i:{name:'32мм. Однокамерный (i-стекло)',pic:'/images/steklopacket/32mm1k-i.png'},
		d32i:{name:'32мм. Двухкамерный (i-стекло)',pic:'/images/steklopacket/32mm2k-i.png'},
		d40i:{name:'40мм. Двухкамерный (i-стекло)',pic:'/images/steklopacket/40mm2k-i.png'}
	},
	profiles:{
		'rehau-euro':
		{
			name:'3 серия (REHAU Euro...