JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

tabs stuff.

		<div class="page">	
	
			
			<!-- tabs -->
			<div class="pcss3t pcss3t-theme-5">
				<input type="radio" name="pcss3t" id="tab1" class="tab-content-1">
				<label for="tab1">Intro</label>
				
				<input type="radio" name="pcss3t" id="tab2" class="tab-content-2">
				<label for="tab2">Status</label>
				
				<input type="radio" name="pcss3t" id="tab3" class="tab-content-3">
				<label for="tab3">Genetics</label>
				
				<input type="radio" name="pcss3t" id="tab4" class="tab-content-4">
				<label for="tab4">Ancestors</label>
        
        <input type="radio" name="pcss3t" id="tab5" class="tab-content-5">
				<label for="tab5">Children</label>
				
				<input type="radio" name="pcss3t" id="tab6" class="tab-content-6">
				<label for="tab6">Ability</label>
				
				<input type="radio" name="pcss3t" id="tab7" class="tab-content-7">
				<label for="tab7">Items</label>
				
				<input type="radio" name="pcss3t" id="tab8" class="tab-content-8">
				<label for="tab8">Manage</label>
				
				<ul>
					<li class="tab-content tab-content-1">
						Biography.
					</li>
					
					<li class="tab-content tab-content-2">
						Hea<br>lth, im<br>mor<br>tal, <br>fert.
					</li>
					
					<li class="tab-content tab-content-3">
						Genetics!
					</li>
					
					<li class="tab-content tab-content-4">
							Family tree.
					</li>
          
          <li class="tab-content tab-content-5">
						Offspring.
					</li>
					
					<li class="tab-content tab-content-6">
						Stats, learned moves, skills, stuff done...
					</li>
					
					<li class="tab-content tab-content-7">
						Items carried.
					</li>
					
					<li class="tab-content tab-content-8">
							Management.
					</li>
				</ul>
			</div>
			<!--/ tabs -->
		</div>

CSS

* {box-sizing:border-box;}
body {
	background: #bdcbe5;
}
.page {
	padding: 20px;
}

.pcss3t {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	font-size: 0;
	text-align: left;
}
.pcss3t > input {
  display:none;
}

.barr {display:flex;justify-content:space-between;}

.pcss3t > label {
	position: relative;
	display: inline-block;
	cursor: pointer;
	transition: all 0.3s;
  padding: 0 10px;
	background: #e5e5e5;
	font-size: 13px;
	line-height: 30px;
}

.pcss3t > input:checked + label {
	cursor: default;
}
.pcss3t > ul {
	list-style: none;
	position: relative;
	display: block;
	padding: 0;
	font-size: 13px;
  height: 30px;
}
.pcss3t > ul > li {
	position: absolute;
	width: 100%;
	overflow: auto;
	padding: 10px;
	opacity: 0;
	transition: all 0.3s;
	font-size:16px;
  
}
.pcss3t > .tab-content-1:checked ~ ul .tab-content-1,
.pcss3t > .tab-content-2:checked ~ ul .tab-content-2,
.pcss3t > .tab-content-3:checked ~ ul .tab-content-3,
.pcss3t > .tab-content-4:checked ~ ul .tab-content-4,
.pcss3t > .tab-content-5:checked ~ ul .tab-content-5,
.pcss3t > .tab-content-6:checked ~ ul .tab-content-6,
.pcss3t > .tab-content-7:checked ~ ul .tab-content-7,
.pcss3t > .tab-content-8:checked ~ ul .tab-content-8,
.pcss3t > .tab-content-9:checked ~ ul .tab-content-9,
.pcss3t > .tab-content-10:checked ~ ul .tab-content-10 {
	z-index: 1;
	
	opacity: 1;
}



.pcss3t > input:checked + label {
	background: white;
}
.pcss3t > ul {
	background: white;
	text-align: left;
}





.pcss3t-theme-5 {
	padding: 15px;
	border-radius: 5px;
	background: #ad6395;
	background: linear-gradient(to right, #ad6395 0%, #a163ad 100%);
}
.pcss3t-theme-5 > label {
	margin-right: 10px;
	margin-bottom: 15px;
	background: none;
	border-radius: 5px;
	text-align: center;
	color: #fff;
	opacity: 1;
}
.pcss3t-theme-5 > label:hover {
	background: rgba(255,255,255,0.15);
}
.pcss3t-theme-5 > input:checked + label {
	background: rgba(255,255,255,0.3);
	color: #000;
}
.pcss3t-theme-5 > input:checked + label:after...