JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<input type="checkbox" id="showblock">
<div id="slideout">
	<label id="slideout_tab" for="showblock" title="Admin Slider">
		<i class="fa fa-cogs fa-spin"></i>
	</label>
	<div id="slideout_inner">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan gravida arcu, eget elementum tellus condimentum ac. Nullam aliquam sem condimentum, dictum mi id, feugiat ex.
	</div>
</div>

CSS

#slideout {
		/* position: absolute; */
		position: fixed;
		top: 100px;
		right: 0;
		width: 35px;
		-webkit-transition-duration: 0.3s;
		-moz-transition-duration: 0.3s;
		-o-transition-duration: 0.3s;
		transition-duration: 0.3s;
	}
	#slideout_tab {
		position: relative;
		top: 0;
		left: 0;
		padding: 12px 6px 12px 12px;
		text-align: center;
		background: #86B135;
		color: #fff;
		cursor:pointer;
		-webkit-border-radius: 5px 0 0 5px;
		-moz-border-radius: 5px 0 0 5px;
		border-radius: 5px 0 0 5px;
	}
	#slideout_inner {
		position: absolute;
		top: -50px;
		left: 35px;
		background: #86B135;
		width: 220px;
		padding: 15px;
		height: 200px;
		cursor:auto;
		-webkit-border-radius: 5px 0 0 5px;
		-moz-border-radius: 5px 0 0 5px;
		border-radius: 5px 0 0 5px;
	}
	#showblock:checked + #slideout{right: 250px;}
	#showblock{display:none;}