Код:
<!--HTML-->
<div id="guestbook">

<div class="guestrightinfo">
<game>список персонажей</game>
<tags>и занятых имен</tags>
<span>▲ отправная точка — 04.09.2020<br><br>
▲ магическая Британия<br>
<small>лондон, беспорядки</small><br><br>
▲ сопротивление</span>
<div>
<b>pb</b> — чистокровный; <br>
<b>hb</b> — полукровный;<br>
<b>mb</b> — маглорожденный;<br>
<br>
<b>(mm)</b> — метоморфомаг;<br>
<b>(ww)</b> — оборотень;<br>
<b>(vm)</b> — вампир;<br>
<b>(cv)</b> — провидец;<br>
<b>(md)</b> — маледиктус;<br>
<b>(am)</b> — анимаг<br>
</div>
</div>
  
  <div class="guestleftinfo">
    <input id="tab1" type="radio" name="tabs" checked>
    <label for="tab1">общее</label>

    <input id="tab2" type="radio" name="tabs" checked>
    <label for="tab2">ОППОЗИЦИЯ</label>
 
    <input id="tab3" type="radio" name="tabs">
    <label for="tab3">МИНИСТЕРСТВО</label>
 
    <input id="tab4" type="radio" name="tabs">
    <label for="tab4">НЕЙТРАЛИТЕТ</label>
 
    <input id="tab5" type="radio" name="tabs">
    <label for="tab5">СТАЯ</label>
    
     <input id="tab6" type="radio" name="tabs">
    <label for="tab6">ПЕРСОНАЛ<br>
ХОГВАРТСА</label>

     <input id="tab7" type="radio" name="tabs">
    <label for="tab7">ГРИФФИНДОР</label>

     <input id="tab8" type="radio" name="tabs">
    <label for="tab8">ХАФФЛПАФФ</label>

     <input id="tab9" type="radio" name="tabs">
    <label for="tab9">СЛИЗЕРИН</label>

     <input id="tab10" type="radio" name="tabs">
    <label for="tab10">РЭЙВЕНКЛО</label>

    <section id="content-tab1">
        <div>
<div class="textinform">
<!-- общее -->

<span><a href="ссылка">! внимание</a> - данный список можно воспринимать как канон этого мира. персонажи распределены исходя не из места работы/открытого взгляда, а убеждений. так, гестия кэрроу, отмеченная в списках оппозиции может работать в секретариате министра магии, а майкл корнер, отмеченный в министерстве, работать тренером по квиддичу в хогвартсе. возраст и принадлежность к той или иной способности указан для лучшего понимания ситуации ввиду au-изменений. вы можете написать о любом предложении изменений в личные сообщения любому администратору.</span>

<span><a href="ссылка">цветом </a> отмечены занятые персонажи.</span>

<span><a href="ссылка">колонка</a> персонала может пополняться любыми взрослыми персонажами (как канонами, так и нет) старше 24х лет. но помните о том, что будучи открытым сопротивленцем в хогвартс вам путь заказан.</span>

<span><a href="ссылка">колонка</a> партии оборотней (за редким и договорным исключением) может пополняться только не указанными в других колонках именами.</span>


</div>
        </div>
    </section>  
 
    <section id="content-tab2">
        <div>
<div class="textinform">
<!-- оппозиция -->

<span><a href="https://heartsofstone.ru/profile.php?id=2">black (potter), arktur</a> — hb, 22yo (am)</span>
<span>burk (weasley), galathea — hb, 21yo (am)</span>
<span>carrow, flora — pb, 31yo</span>
<span>finnigan, kaya — pb, 19yo</span>
<span>finnigan, seamus — hb, 41yo (am)</span>
<span><a href="https://heartsofstone.ru/profile.php?id=39">granger, hermine</a> — mb, 41yo</span>
<span>longbottom, neville — pb, 40yo</span>
<span>lupin, edward — pb, 24yo (mm)</span>
<span>nott, liam — pb, 22yo (am)</span>
<span>nott, theodore — pb, 41yo (am)</span>
<span>podmor, gordy — hb, 24yo (am)</span>
<span>weasley, charles — pb, 46yo</span>
<span><a href="https://heartsofstone.ru/profile.php?id=19">weasley, marie-hope</a> — pb, 20yo (am)</span>
<span>zabini, blaise — pb, 41yo (am)</span>

</div>
        </div>
    </section>  
    <section id="content-tab3">
        <div>
<div class="textinform">
<!-- министерство -->

<span>carrow, alecto — pb, 54yo</span>
<span>carrow, amycus — pb, 54yo</span>
<span>carrow, hestia — pb, 31yo</span>
<span>corner, michael — hb, 40yo</span>
<span>greengrass, daphne — pb, 40yo</span>
<span>karkaroff, igor jr — pb, 25yo</span>
<span>lestrange, rabastan — pb, 49yo</span>
<span>malfoy, scorpius — pb, 19yo</span>
<span> <a href="https://heartsofstone.ru/profile.php?id=32">yaxley, clementine</a> — pb, 30yo</span>
<span>yaxley, tobias — pb, 44yo</span>


</div>
        </div>
    </section> 
    <section id="content-tab4">
        <div>
<div class="textinform">
<!-- нейтралитет -->

<span>bell, katie — pb, 41yo</span>
<span>dolohov, andrej — pb, 46yo</span>
<span>dolohov, ilya — pb, 22yo</span>
<span>macmillan, tessa — pb, 20yo</span>
<span><a href="https://heartsofstone.ru/profile.php?id=14">malfoy, draco</a> — pb, 41yo</span>
<span>ollivander, dolan — pb, 34yo</span>
<span>ollivander, seth — pb, 37yo (vm)</span>
<span><a href="https://heartsofstone.ru/profile.php?id=27">parkinson, pancy</a> — pb, 40yo</span>
<span>weasley, percy — pb, 43yo</span>



</div>
    </div>
    </section> 
    <section id="content-tab5">
        <div>
<div class="textinform">
<!-- стая -->

<span>greyback, fenrir — pb, 56yo (ww)</span>


</div>
        </div>
    </section>   
        <section id="content-tab6">
        <div>
<div class="textinform">
<!-- хогвартс персонал -->

<span><a href="https://heartsofstone.ru/profile.php?id=27">parkinson, pancy</a> — pb, 40yo</span>
<span><a href="https://heartsofstone.ru/profile.php?id=19">weasley, marie-hope</a> — pb, 20yo (am)</span>

</div>
        </div>
    </section> 
        <section id="content-tab7">
        <div>
<div class="textinform">
<!-- гриффиндор -->

<span>burk (weasley), galathea — hb, 21yo</span>
<span>carrow, boyd — pb, 17yo</span>
<span>longbottom, frank — pb, 16</span>
<span>malfoy, hyperion — pb, 17yo</span>
<span>podmor, gordy — hb, 24yo (am)</span>
<span>weasley, septimus — pb, 16yo</span>
<span>wood, athena — pb, 16yo</span>
<span><a href="https://heartsofstone.ru/profile.php?id=33">weasley, louis </a> — pb, 16yo</span>


</div>
        </div>
    </section> 
        <section id="content-tab8">
        <div>
<div class="textinform">
<!-- хаффлпафф -->

<span>gump, lucas — pb, 17yo</span>
<span>longbottom, alice — pb, 15yo</span>
<span>rowley, gerda — pb, 17yo</span>
<span>selvin, amanda — pb, 16yo</span>
<span>shafiq, alec — pb, 17yo</span>
<span>weasley, dominique — pb, 16yo</span>
<span>weasley, frederica — pb, 16yo</span>


</div>
        </div>
    </section> 
        <section id="content-tab9">
        <div>
<div class="textinform">
<!-- слизерин -->

<span><a href="https://heartsofstone.ru/profile.php?id=2">black (potter), arktur<</a> — hb, 22yo (am)</span>
<span>dolohov, roman — pb, 16yo</span>
<span>lestrange, bellamy — pb, 17yo</span>
<span>montegue, graham — pb, 17yo</span>
<span>parkinson, patricia — pb, 16yo</span>
<span>rowley, rowena — pb, 16yo</span>
<span>yaxley, kayla — pb, 15yo</span>
<span>yaxley, keira — pb, 15yo</span>


</div>
        </div>
    </section> 
        <section id="content-tab10">
        <div>
<div class="textinform">
<!-- рэйвенкло -->

<span>crouch, georgia — pb, 17yo</span>
<span>flint, adonis — pb, 17yo</span>
<span><a href="https://heartsofstone.ru/profile.php?id=4">greengrass, renate</a> — pb, 16yo (am)</span>
<span>nott, liam — pb, 22yo (am)</span>
<span>rookwood, ruby — pb, 17yo</span>
<span>rosier, rogan — pb, 17yo</span>
<span>yaxley, corban — pb, 17yo</span>
<span>weasley, ignatius — pb, 16yo</span>


</div>
        </div>
    </section> 
</div>

<style>#guestbook {background: url(https://forumstatic.ru/files/001a/a1/cb/93491.png);
height: 443px;
color: #ececec
}
.guestrightinfo game {display: block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 17px;
  color: #ececec;}


.guestrightinfo tags {
font-family: cambria, lora;
  color: #ececec;
word-spacing: 0px;
letter-spacing: 2px;
margin-top: 0px;
margin-bottom: 9px;
font-size: 8px;
text-transform: uppercase;
transform: scaleY(.83)}

.guestrightinfo span {text-align: left;
  padding-left: 15px;
text-transform: lowercase;
font-size: 8px;
color: #c6c6c6;
letter-spacing: 0px;
line-height: 8px}

.guestrightinfo div {margin-top: 25px;
height: 190px;
margin-left: 15px;
width: 150px;
font-size: 10px;
line-height: 19px}

.guestrightinfo div b {font-weight: 800;
color: #8c2929 !important;}

.guestleftinfo > label {
	margin: 11px 0 0px;
  text-transform: uppercase;
  padding: 3px 7px 3px 0;
  margin-left: 458px;
}
.guestleftinfo > label:first-of-type {margin-top: 29px}

#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4,
#tab5:checked~#content-tab5, #tab6:checked~#content-tab6, #tab7:checked~#content-tab7, #tab8:checked~#content-tab8, #tab9:checked~#content-tab9, #tab10:checked~#content-tab10 {
	display: block;
}

.textinform span {
margin: 5px 0;
text-transform: lowercase;
}

.textinform span a, .textinform b {font-weight: 800;
color: #8c2929 !important}
</style>