JSFiddle - React, Tailwind, and code Playground

by Ekaterina Klimovich

HTML

<div id="menu">
	
	<!--<input type="checkbox" id="on-check" name="on-check" checked />!-->
	
	<label id="on-button" for="on-check">
		<span><span class="ss-plus"> </span></span>
		<span><span class="ss-hyphen"> </span></span>
	</label>
	
	<input type="radio" id="info-home" name="radio-check"/>
	<input type="radio" id="info-compass" name="radio-check"  checked />
	<input type="radio" id="info-heart" name="radio-check" />
	<input type="radio" id="info-rss" name="radio-check" />
	<input type="radio" id="info-refresh" name="radio-check" />
	<input type="radio" id="info-star" name="radio-check" />
	
	<div id="menu-items">
		<div class="middle">
			<div class="top">
				<span class="bg-piece"> </span> 
				<label class="ss-home" for="info-home"> а</label>
				<span class="bg-piece"> </span> 
				<label class="ss-compass" for="info-compass">аа </label>
				<span class="bg-piece"> </span> 
				<label class="ss-heart" for="info-heart"> </label> 
			</div>
			<div class="bottom">
				<span class="bg-piece"> </span> 
				<label class="ss-rss" for="info-rss"> </label> 
				<span class="bg-piece"> </span> 
				<label class="ss-refresh" for="info-refresh"> </label> 
				<span class="bg-piece"> </span> 
				<label class="ss-star" for="info-star"> </label> 
			</div>
		</div>
		
	</div>
	
	<div class="info home-info">Lets go home</div>
	<div class="info compass-info">Want directions?</div>
	<div class="info heart-info">Love</div>
	<div class="info rss-info">RSS Feed</div>
	<div class="info star-info">Galactic domination</div>
	<div class="info refresh-info">Refreshing</div>
	
	<div class="faux-shadow"> </div>
</div>

CSS

body {
	font-size: 62.5%;
	padding: 0;
	margin: 0;
}

/* Just for positioning the menu correctly */
#menu {
	position: relative;
	width: 230px;
	margin: 0px auto;
	top: 100px;
	left: 37px;
}

/* We're using overflow: hidden; so we need to create a fake shadow */
.faux-shadow {
	position: absolute;
	content:  " ";
	width: 150px;
	height: 150px;
	top: 0px;
	left: 0px;
	box-shadow: 0 0 50px rgba(0,0,0,0.3);
	border-radius: 300px;
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	transition: all 0.4s linear;
	z-index: -9999;
}

/* The button in the middle the user will press to activate the menu */
#on-button {
	border-radius: 100px;
	width: 150px;
	height: 150px;
	color: #fff;
	float: left;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	cursor: pointer;
	background-color: #313b3d;
	pointer-events: none;
	font-size: 5em;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
	box-shadow: inset 0 -125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2);
}

/* On hover */
#on-button:hover {
	box-shadow: inset 0 125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2);	
}

/* On click */
#on-button:active {
	box-shadow: inset 0 125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2),
	inset 0 0 30px rgba(0,0,0,0.3);
}

/* The spans inside the on button will rotate */
#on-button > span {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;	
	-ms-backface-visibility: hidden;	
	-o-backface-visibility: hidden;	
	-webkit-transition: -webkit-transform 0.2s linear;
	-moz-transition: -moz-transform 0.2s linear;
	-ms-transition: -moz-transform 0.2s linear;
	-o-transition: -moz-transform 0.2s linear;
	transition: -moz-transform 0.2s linear;
	display: block;
	width: 122px;
	height: 122px;
	background: #313b3d;
	border-radius: 120px;
	pointer-events: auto;
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	box-sizing: border-box;
	-moz-box-sizing:...