роли

[html]
<style>
#ebtable {
width: 1090px;
height: 690px;
margin: 0 auto;
overflow: hidden;
background: #2c1c19;
border-radius: 13px;
padding: 13px;
}

.ebfon {
width: 1070px;
height: 670px;
position: relative;
background: #98897d;
border: 6px double #675646;
border-radius: 11px;
padding: 4px;
}

#eb-main {
width: 1070px;
height: 670px;
overflow: hidden;
position: relative;
}

.ebtab {
float: left;
}

.ebtab label {
background: rgba(202,193,186, 0.3);
padding: 5px;
display: block;
font-size: 14px;
letter-spacing: 1px;
position: relative;
text-align: center;
text-transform: uppercase;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
width: 340px;
margin-left: 3px;
margin-right: 2px;
z-index: 1;
font-family:Optimus;
border-right: 0.5px solid #98897d;
border-left: 0.5px solid #98897d;
border-top: 0.5px solid #98897d;
}

.ebtab input[type="radio"]:checked ~ label {
background: #cac1ba;
padding: 5px;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
z-index: 2;
font-family:Optimus;
border-radius: 5px 5px 0 0;
border-right: 0.5px solid #675646;
border-left: 0.5px solid #675646;
border-top: 0.5px solid #675646;
}

.ebtab input[type="radio"] {
display: none;
}

.ebcontent {
bottom: 0;
top:28px;
left:0;
position: absolute;
right: 0;
border: 0.5px solid #5e6471;
background: #cac1ba;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}

.ebtab input[type="radio"]:checked ~ label ~ .ebcontent {
background: #cac1ba;
opacity: 1;
z-index: 1;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}

.ebinfo {
width: 1060px;
height: 630px;
position: absolute;
overflow: auto;
font-size: 13px;
line-height: 1.6;
}

.ebinfo b{
font-size: 13px;
font-family:Optimus;
}

.ebinfo::-webkit-scrollbar {
width: 4px;
background: none!important;
border: none !important;
}

.ebinfo::-webkit-scrollbar-track {
display: none;
}

.ebinfo::-webkit-scrollbar-thumb {
background: #232323!important;
}
.ebkurs {
text-transform: uppercase;
border-bottom: 1px solid gray;
width: 100px;
text-align: center;
margin-bottom: 5px;
margin-top: 10px;
font-family:Optimus;
font-weight: bold;
}

</style>
<div id="ebtable">
<div class="ebfon">
<div class="ebcont">
<div id="eb-main">
<div class="ebtab">
<input id="ebtab-1" name="eptab-group-1" type="radio" checked="">
<label for="ebtab-1"><b>штат</b></label>
<div class="ebcontent">
<div class="ebinfo">
<div style="padding: 10px; width: 650px; line-height: 1.6;">
<div style="text-align: center; margin-bottom: 8px; border-bottom: 1px solid gray; text-transform: uppercase; letter-spacing: 2px;">
<b>Директорат</b><br></div>

<b>Директор</b> - <a href="http://hogwartslegacy.rolbb.me/viewtopic.php?id=10#p4616" style="text-decoration: none; color: #000;">Финеас Найджелус Блэк</a> (акция)<br>

<b>Заместитель директора</b> - <a href="ссылка на профиль" style="text-decoration: none; color: #000;">...</a><br>

<b>Декан Гриффиндора</b> - <a href="ссылка на профиль" style="text-decoration: none; color: #000;">...</a><br>

<b>Декан Слизерина</b> - <a href="ссылка на профиль" style="text-decoration: none; color: #000;">...</a><br>

<b>Декан Хаффлпаффа</b> - <a href="http://hogwartslegacy.rolbb.me/profile.php?id=17" style="text-decoration: none; color: #000;">Киллиан Фицджеральд</a><br>

<b>Декан Рейвенкло</b> - <a href="ссылка на профиль" style="text-decoration: none; color: #000;">...</a><br>

<div style="text-align: center; margin-bottom: 8px; margin-top: 3px; border-bottom: 1px solid gray; text-transform: uppercase; letter-spacing: 2px;">
<b>Преподавательский состав</b><br></div>

<b>Преподаватель Зельеварения</b> - <a href="http://hogwartslegacy.rolbb.me/profile.php?id=17" style="text-decoration: none; color: #000;">Killian Fitzgerald</a><br>

<b>Преподаватель Истории магии</b> - <a href="ссылка на профиль" style="text-decoration: none; color: #000;">...</a><br>

<b>Преподаватель Трансфигурации</b> - <a href="ссылка на профиль" style="text-decoration: none; color: #000;">...</a><br>

<b>Преподаватель Заклинаний</b> - <a href="ссылка на профиль" style="text-decoration: none; color: #000;">...</a><br>

<b>Преподаватель Травологии</b> - <a href="ссылка на профиль" style="text-decoration: none; color: #000;">...</a><br>

<b>Преподаватель Защиты от темных искусств</b> - <a href="http://hogwartslegacy.rolbb.me/profile.php?id=42" style="text-decoration: none; color: #000;">Рашель Кастальдо</a><br>

<b>Преподаватель Астрономии</b> - <a href="ссылка на профиль" style="text-decoration: none; color: #000; font-weight: lighter;">...</a><br>

<b>Преподаватель Маггловедения</b> - <a href="ссылка на профиль" style="text-decoration: none; color: #000; font-weight: lighter;">...</a><br>

<b>Преподаватель Нумерологии</b> - <a href="ссылка на профиль" style="text-decoration: none; color: #000; font-weight: lighter;">...</a><br>

<b>Преподаватель Трансгрессии</b> - <a href="ссылка на профиль" style="text-decoration: none; color: #000; font-weight: lighter;">...</a><br>

<b>Преподаватель по Уходу за магическими существами</b> - <a href="http://hogwartslegacy.rolbb.me/profile.php?id=54" style="text-decoration: none; color: #000;">Damyre McKay</a><br>

<b>Преподаватель по Древним рунам</b> - <a href="ссылка на профиль" style="text-decoration: none; color: #000; font-weight: lighter;">...</a><br>

<b>Профессор Прорицания</b> - <a href="ссылка на профиль" style="text-decoration: none; color: #000; font-weight: lighter;">...</a><br>

<b>Школьный тренер</b> - <a href="ссылка на профиль" style="text-decoration: none; color: #000; font-weight: lighter;">...</a><br>

<div style="text-align: center; margin-bottom: 8px; margin-top: 3px; border-bottom: 1px solid gray; text-transform: uppercase; letter-spacing: 2px;">
<b>Обслуживающий персонал</b><br></div>

<b>Библиотекарь</b> - <a href="ссылка на профиль" style="text-decoration: none; color: #000; font-weight: lighter;">...</a><br>

<b>Лесничий</b> - <a href="http://hogwartslegacy.rolbb.me/profile.php?id=54" style="text-decoration: none; color: #000;">Damyre McKay</a><br>

<b>Завхоз</b> - <a href="ссылка на профиль" style="text-decoration: none; color: #000; font-weight: lighter;">...</a><br>

<b>Школьный целитель</b> - <a href="ссылка на профиль" style="text-decoration: none; color: #000; font-weight: lighter;">...</a><br>

<b>Младший школьный целитель</b> - <a href="ссылка на профиль" style="text-decoration: none; color: #000; font-weight: lighter;">...</a><br>

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

<div class="ebtab">
<input id="ebtab-2" name="eptab-group-1" type="radio">
<label for="ebtab-2"><b>студенты</b></label>
<div class="ebcontent">
<div class="ebinfo">
<div style="text-align: center; text-transform: uppercase; padding: 10px;">
<b>Староста школы</b> - <a href="" style="text-decoration: none; color: #000;">...</a></div>
<div style="border-bottom: 1px solid black; padding: 10px; width: 650px;">
<div style="text-align: center; font-size: 16px; font-family:Optimus; font-weight: bold;">
ГРИФФИНДОР</div>
<div style="text-align: center; margin-bottom: 5px;">
<b>Староста факультета</b> - <a href="http://hogwartslegacy.rolbb.me/profile.php?id=46" style="text-decoration: none; color: #000;">Marco Bernasconi</a></div>
<div class="ebkurs">V курс</div>