JSFiddle - React, Tailwind, and code Playground

by romullus

HTML

<nav class="social-nav">
			<ul>
				<li><a href="#" target="_blank">A</a></li>
				<li><a href="#" target="_blank">B</a></li>
				<li><a href="#" target="_blank">C</a></li>
				<li><a href="#" target="_blank">D</a></li>
			</ul>
		</nav>

CSS

@media screen and (min-width: 600px) {
.social-nav {
    background:#000;
	position:absolute;
	top: 0px;
	left: 5%;
}
.social-nav ul {margin: 0; padding:0;}
.social-nav ul li{
	list-style: none;
	display:block;
	float: left;
	background: #393939;
	padding:100px 10px 5px 10px;
	margin: 1px;
	opacity: .5;
	transition: all 0.6s ease-in-out;
}
.social-nav ul li:hover {opacity: .8;background:#fff;}
    .social-nav ul li a {color:#fff;}
    
    
    @media screen and (max-width: 600px) {
.social-nav {
	position:absolute;
	right: 10px;
}
.social-nav ul {margin: 0; padding:0;}
.social-nav ul li{
	list-style: none;
	display:block;
	background: #393939;
	padding:10px 10px 5px 10px;
	margin: 1px;
	opacity: .5;
	transition: all 0.6s ease-in-out;
}
.social-nav ul li:hover {opacity: .8;background:#fff;}