JSFiddle - React, Tailwind, and code Playground

by Hristo Petrov

HTML

<div id="wrapper">
		<header>
			<img src="http://s10.postimg.org/n5yyew8kl/ms_calc.png" alt="calculatorIcon" />
			<h1>Calculator</h1>
			<ul id="windowNav" class="inline">
				<li>
					<a href="" id="minimize"></a>
				</li>
				<li>
					<a href="" id="maximize"></a>
				</li>
				<li>
					<a href="" id="close"></a>
				</li>
			</ul>
		</header>

		<section id="mainProgram">
			<nav id="programNav">
				<ul class="inline">
					<li>View</li>
					<li>Edit</li>
					<li>Help</li>
				</ul>
			</nav>
			<article>
				<form action="" method="get">
					<input type="text" name="display" id="display" value="8854455" class="box-inset"/>

					<div class="binaryRep box-inset">
						<ul class="inline">
							<li>0000</li>
							<li>0000</li>
							<li>0000</li>
							<li>0000</li>
							<li>0000</li>
							<li>0000</li>
							<li>0000</li>
							<li>0000</li>
						</ul>
						<ul class="inline binaryIndex">
							<li>63  </li>
							<li>47  </li>
							<li>  32</li>
						</ul>
						<ul class="inline">
							<li>0000</li>
							<li>0000</li>
							<li>1000</li>
							<li>0111</li>
							<li>0001</li>
							<li>1011</li>
							<li>1011</li>
							<li>0111</li>
						</ul>
						<ul class="inline binaryIndex">
							<li>31  </li>
							<li>15  </li>
							<li>   0</li>
						</ul>
					</div>
					<div class="formatChoices">
						<aside class="numeralSys">
							<ul>
								<li>
									<label>
									<input type="radio" name="numeralSystem" value="Hex" /> Hex
									</label>
								</li>
								<li>
									<label>
									<input type="radio" name="numeralSystem" value="Dec" checked /> Dec
									</label>
								</li>
								<li>
									<label>
									<input type="radio" name="numeralSystem" value="Oct" /> Oct
									</label>
								</li>
								<li>
									<label>
									<input type="radio" name="numeralSystem" value="Bin" />...

CSS

body, div, header, nav, section, article, aside, form, h1, ul, li, a, input, button, label {
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
}

#wrapper {
	margin-top: 15px;
	margin-left: 15px;
	padding: 0 5px 5px;
	width: 405px;
	font-family: Segoe UI, sans-serif;
	font-size: 14px;
	border: 1px solid black;
	border-radius: 7px;
	background-color: #D8EEFF;
}

	#wrapper > header {
		margin-bottom: 5px;
	}

		#wrapper > header h1 {
			display: inline-block;
			font-size: 1em;
			font-weight: normal;
		}
		
		#wrapper > header img {
			width: 20px;
			display: inline-block;
			position: relative;
			top: 5px;
		}
	
	#windowNav {
		float: right;
	}

		#windowNav li {
			display: inline;
		}

			#windowNav li a {
				float: left;
			}
			
			#minimize {
				width: 27px;
				height: 18px;
				background: url(http://s8.postimg.org/opjmneim9/minimize.png) no-repeat;
				border: 1px solid black;
				border-top: none;
				border-bottom-left-radius: 5px;
			}

			#minimize:hover {
				background-position: 0 -18px;
				-moz-box-shadow: 1px 1px 10px 1px #496ee5;
				-webkit-box-shadow: 1px 1px 10px 1px #496ee5;
				box-shadow: 1px 1px 10px 1px #496ee5;
			}

			#minimize:active {
					background-position: 0 -36px;
			}

			#maximize {
				width: 26px;
				height: 18px;
				background: url(http://s15.postimg.org/r56yfffnb/maximize.png) no-repeat;
				border-bottom: 1px solid black;
			}
			
			#maximize {
				cursor: default;
			}
			
			#close {
				width: 46px;
				height: 18px;
				background: url(http://s12.postimg.org/kecgr2q4p/close.png) no-repeat;
				border: 1px solid black;
				border-top: none;
				border-bottom-right-radius: 5px;
			}

			#close:hover {
				-moz-box-shadow: 1px 1px 10px 1px #f00;
				-webkit-box-shadow: 1px 1px 10px 1px #f00;
				box-shadow: 1px 1px 10px 1px #f00;
			}

			#close:active {
				background-position: 0 -18px;
			}

#mainProgram {
	border: 1px solid #777;
	border-radius: 2px;
	background: #F7FAFF;
	background:...