JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<script type="text/javascript"> 
function calc() 
{ 
var tx1=document.getElementById('tx1'); 
var anz=str_replace(".", "", tx1.value); 
var anz=str_replace(",", ",", anz); 
var op1=document.getElementsByName('wette'); 
for (var i=0; i<op1.length; i++) 
{ 
if (op1[i].checked) 
{ 
var op=document.getElementById('lbl['+i+']').innerHTML;
var sum=anz*op; 
sum=sum-anz; 
sum=number_format(sum, 0, ",", "."); 
document.getElementById('ausgabe').innerHTML=sum; 

break; 
} 
} 
tx1.value=number_format(anz, 0, ",", "."); 
} 


function str_replace(search, replace, subject) 
{ 
return subject.split(search).join(replace); 
} 

function number_format (number, decimals, dec_point, thousands_sep) { var exponent = ""; var numberstr = number.toString (); var eindex = numberstr.indexOf ("e"); if (eindex > -1) { exponent = numberstr.substring (eindex); number = parseFloat (numberstr.substring (0, eindex)); } if (decimals != null) { var temp = Math.pow (10, decimals); number = Math.round (number * temp) / temp; } var sign = number < 0 ? "-" : ""; var integer = (number > 0 ? Math.floor (number) : Math.abs (Math.ceil (number))).toString (); var fractional = number.toString ().substring (integer.length + sign.length); dec_point = dec_point != null ? dec_point : "."; fractional = decimals != null && decimals > 0 || fractional.length > 1 ? (dec_point + fractional.substring (1)) : ""; if (decimals != null && decimals > 0) { for (i = fractional.length - 1, z = decimals; i < z; ++i) { fractional += "0"; } } thousands_sep = (thousands_sep != dec_point || fractional.length == 0) ? thousands_sep : null; if (thousands_sep != null && thousands_sep != "") { for (i = integer.length - 3; i > 0; i -= 3) { integer = integer.substring (0 , i) + thousands_sep + integer.substring (i); } } return sign + integer + fractional + exponent; }

</script>
</head>
<body onload="calc();">
<input type="radio" id="radio0" name="wette" value="0" checked onclick="calc();">
<label id="lbl[0]"...

CSS

body {
 font-family: calibri;
}
input[type=radio], input[type=checkbox] {
		display:none;
	}

input[type=radio] + label, input[type=checkbox] + label {
		display:inline-block;
		margin:-2px;
		padding: 4px 12px;
		margin-bottom: 0;
		font-size: 14px;
		line-height: 20px;
		color: #333;
		text-align: center;
		text-shadow: 0 1px 1px rgba(255,255,255,0.75);
		vertical-align: middle;
		cursor: pointer;
		background-color: #f5f5f5;
		background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
		background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
		background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
		background-image: -o-linear-gradient(top,#fff,#e6e6e6);
		background-image: linear-gradient(to bottom,#fff,#e6e6e6);
		background-repeat: repeat-x;
		border: 1px solid #ccc;
		border-color: #e6e6e6 #e6e6e6 #bfbfbf;
		border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
		border-bottom-color: #b3b3b3;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
		filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
		-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
		-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	}

	 input[type=radio]:checked + label, input[type=checkbox]:checked + label{
		   background-image: none;
		outline: 0;
		-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
		-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
		box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
			background-color:#e0e0e0;
	}