JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="ru"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="ru"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="ru"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="ru"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Расчет стоимости</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
  <h1 class="register-title">Такси 0064</h1>
  <form class="register">
    <div class="register-switch">
		<input type="radio" name="tax" value="1" id="q" class="register-switch-input" checked>
		<label for="q" class="register-switch-label">Город</label>
		<input type="radio" name="tax" value="2" id="w" class="register-switch-input">
		<label for="w" class="register-switch-label">Межгород</label>
    </div>
		<input type="nomber" id="a" class="focus-input" _onChange="calc()" placeholder="km">
		<input type="nomber" id="b" class="focus-input" _onChange="calc()" placeholder="min">
		<input type="reset" id="e" value="Сброс" class="register-button">
	  <script>
  		window.onload = function(){
    		var inp = document.querySelectorAll('input, register-switch-input, focus-input');
    		for(var i = 0; i < inp.length; i++){
				inp[i].oninput = calc;
    		}      
    		function calc(){
      			a = document.getElementById('a').value;
				b = document.getElementById('b').value;
      			if(document.getElementById('q').checked) k = document.getElementById('q').value;
      			else if(document.getElementById('w').checked) k = document.getElementById('w').value;
      			d = 85+(10*a)+(5*b);
      			e = k*(d-d*0.1);
      			document.getElementById('e').value = e ;
    		}
		}
    </script>
  </form>
</body>
</html>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.about {
  margin: 70px auto 40px;
  padding: 8px;
  width: 260px;
  font: 10px/18px 'Lucida Grande', Arial, sans-serif;
  color: #666;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  background: #eee;
  background: rgba(250, 250, 250, 0.8);
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 6px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 6px rgba(0, 0, 0, 0.2);
}
.about a {
  color: #333;
  text-decoration: none;
  border-radius: 2px;
  -webkit-transition: background 0.1s;
  -moz-transition: background 0.1s;
 ...