JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<div class="bottomRight">
    <input type="radio" id="popularUpload" name="upload" checked="checked">
    <label for="popularUpload" class="popularUpload">Popular Uploads</label>
    <input type="radio" id="recentUpload" name="upload">
    <label for="recentUpload" class="recentUpload">Recent Uploads</label>
    <input type="radio" id="gallery" name="upload">
    <label for="gallery" class="gallery">Gallery</label>
        <div class="popUploadContent">popular content</div>
        <div class="recUploadContent">recent content</div>
        <div class="galleryContent">gallery content</div>
</div>

CSS

#popularUpload,
#recentUpload,
#gallery {
	display: none;
}

.popularUpload {
	font-size: 15px;
	font-weight: bold;
	color: #dddfe2;
	background: #111625;
	padding: 20px 4%;
	position: relative;
	cursor: pointer;
	z-index: 500;
	display: block;
	width: 120px;
	text-align: center;
	float: left;
}

.recentUpload {
	float: left;
	font-size: 15px;
	font-weight: bold;
	color: #dddfe2;
	background: #111625;
	padding: 20px 4%;
	position: relative;
	cursor: pointer;
	z-index: 500;
	display: block;
	width: 110px;
	text-align: center;
	border-right: 1px solid #0b0e18;
	border-left: 1px solid #0b0e18;
}

.gallery {
	float: left;
	font-size: 15px;
	font-weight: bold;
	color: #dddfe2;
	background: #111625;
	padding: 20px 4%;
	position: relative;
	cursor: pointer;
	z-index: 500;
	display: block;
	width: 60px;
	text-align: center;
}

.popularUpload:hover,
.recentUpload:hover,
.gallery:hover {
	color: #eeb10c;
	transition: all .5s ease;
}

#popularUpload:checked + label,
#recentUpload:checked + label,
#gallery:checked + label {
	background: #0b0f17;
	color: #eeb10c;
	transition: all .5s ease;
}

#popularUpload:checked ~ .popUploadContent,
#recentUpload:checked ~ .recUploadContent,
#gallery:checked ~ .galleryContent {
	visibility: visible;
	transition: all .3s ease;
}

.popUploadContent,
.recUploadContent,
.galleryContent {
	visibility: hidden;
	background: #0b0f17;
	position: absolute;
	margin-top: 54px;
	height: 299px;
    width: 90%;
    color: red;
}