[html]
<style>
.lies0 {
width: 450px; margin: auto; position: relative; background: var(--color2); box-sizing: border-box;

--color1: #CD6889;
--color2: #fafafa;
--color3: #dfdfdf;
--color4: #444;
}
#lies00 {
height: 300px; width: 450px; border: 1px solid var(--color3); box-sizing: border-box;
}
#lies00 input {
display: none;
}
#lies00 label {
width: 135px; background: var(--color2); border: 1px solid var(--color3); font: 600 12px/150% poppins; padding: 5px; box-sizing: border-box;
display: inline-block; transition: .5s ease-in-out; position: relative; left: 15px; top: 15px; color: var(--color4);
text-transform: uppercase; text-align: center;
}
#lies00 .tab1, #lies00 .tab2, #lies00 .tab3 {
height: 250px; width: 100%; position: absolute; bottom: 0; left: 0; opacity: 0; transition: .5s ease-in-out;
}
.lies2 {
height: 250px; overflow: auto; border: 25px solid transparent; box-sizing: border-box;
font: 12px/150% poppins; text-align: justify; padding-right: 20px;
}
.lies2 b {
color: var(--color1); text-transform: uppercase; letter-spacing: 1px;
}
#lies00 input:checked+label {
color: var(--color1); letter-spacing: 2px; transition: .5s ease-in-out; border: 1px solid var(--color1);
}
#lies00 #lies001:checked+label ~ .tab1, #lies00 #lies002:checked+label ~ .tab2,
#lies00 #lies003:checked+label ~ .tab3 {
opacity: 1; z-index: 5; transition: .5s ease-in-out;
}
.lies2::-webkit-scrollbar { width: 5px; }
.lies2::-webkit-scrollbar-track { background: var(--color2); border: 1px solid var(--color1); }
.lies2::-webkit-scrollbar-thumb { background: var(--color1); }
</style>

<div class="lies0"><a href="https://shadowplayers.jcink.net/index.php?showuser=166" title="credit"><img src="https://via.placeholder.com/450x150"></a>
<div id="lies00">
<input type="radio" id="lies001" name="lies"checked>
<label for="lies001">basic things</label>
<input type="radio" id="lies002" name="lies">
<label for="lies002">shipper</label>
<input type="radio" id="lies003" name="lies">
<label for="lies003">relationships</label>

<div class="tab1"><div class="lies2">
<b>name:</b> first middle last<br>
<b>age:</b> written out<br>
<b>power/blood:</b> goes here<br>
<b>occupation:</b> here<br>
<b>sexuality:</b> hetero/homo/pan/a- sexual<br>
<b>romantic:</b> hetero/bi/gray- romantic<br>
<b>ship staus:</b> single/taken/complicated<br>
<b>likes:</b> list them here<br>
<b>dislikes:</b> list them here<br>
<b>strengths:</b> list them here<br>
<b>weaknesses:</b> list them here
</div></div>
<div class="tab2"><div class="lies2">
<b>family</b><br>
write about how your character is as a family member
<p><b>protagonist</b><br>
write about how your character is as a friend
<p><b>antagonist</b><br>
write about how your character is as an enemy
<p><b>romantic</b><br>
write about how your character is as a lover
<p><b>colleagues</b><br>
write about how your character is as a colleague
<p><b>others</b><br>
write about how your character is with everyone else
</div></div>
<div class="tab3"><div class="lies2">
<b>character name</b> and their ships listed here
<p><b>character name</b> and their ships listed here
<p><b>character name</b> and their ships listed here
<p><b>character name</b> and their ships listed here
<p><b>character name</b> and their ships listed here
<p><b>character name</b> and their ships listed here
<p><b>character name</b> and their ships listed here
<p><b>character name</b> and their ships listed here
<p><b>character name</b> and their ships listed here
<p><b>character name</b> and their ships listed here
<p><b>character name</b> and their ships listed here
<p><b>character name</b> and their ships listed here
</div></div>

</div></div>
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
[/html]