JSFiddle - React, Tailwind, and code Playground

by Mihai_T

HTML

<div id="content">
<div class="logo-container">
<div class="blockicon projects"> P </div>
<div class="blockicon aboutme"> A </div>
<div class="blockicon contactme"> C </div>
<div class="blockicon helped"> H </div>
<div class="blockicon hobbys"> H </div>
<div class="slider-container">

</div>

</div>
</div>

CSS

#content {
		position: relative;	
		overflow: hidden;
		width: 900px;
		height: 440px;
		background: #D5D5D5;	
		margin: auto;
		top: 50px; left: 0; bottom: 0; right: 0;	
		-webkit-box-shadow: 0px 0px 23px 3px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 0px 23px 3px rgba(0,0,0,0.75);
		box-shadow: 0px 0px 23px 3px rgba(0,0,0,0.75);
		}
		.logo-container{
		 display: flex;
		 flex-direction: row;
		 position: relative;
		 width: 100%;
		 height: 100px;
		 justify-content: center;
		 margin: auto;
		 float: right;
		 top: 0px;
		}

		.blockicon {
		 position: relative;
		 width: 50px;
		 height: 50px;	
		 top: 15px;
		 border-radius: 50%;
		 border: solid 5px black;
		 cursor: pointer;
		 font-size: 30px;
		 text-align: center;
		 vertical-align: middle;
		 line-height: 50px;
		 margin: 0 0.8%;
		}
		.projects {
			background: #801113;
		}
		.projects:hover ~	.slider-container {
			background: #801113;
		}
		.projects:hover ~	.slider-container:before {
			content:"Projects";
		}
		.aboutme {
			background: #1A8305;
		}
		.aboutme:hover >	.slider-container {
		background: #1A8305;
		}
		.aboutme:hover >	.slider-container:before {
			content:"About Me";
		}
		.contactme {
		background: #E8BA1A;			
		}
		.contactme:hover >	.slider-container {
		background: #E8BA1A;
		}
		.contactme:hover >	.slider-container:before {
			content:"Contact Me";
		}
		.helped {
			background: #0049BB;
		}
		.helped:hover >	.slider-container {
		background: #0049BB;
		}
		.helped:hover >	.slider-container:before {
			content:"Helped";
		}
		.hobbys {
		background: #A40CA3;	
		}
		.hobbys:hover > .slider-container {
		background: #A40CA3;
		}
		.hobbys:hover >	.slider-container:before {
			content:"Hobbys";
		}
		
		.slider-container {
			position:absolute;
			background: #CF4000;
			width: 95%;
			height: 320px;
		  margin: auto;
		  top: 400px; left: 0; bottom: 0; right: 0;
		}
		.slider-container:before {
			position:absolute;
			content:"Test";
			font-size: 30px;
			bottom: 20%;
			left:...