[html]
<style>
/* список персонажей */

.occ-wrapper {
  max-width: 728px;
  display: flex;
  justify-content: center;
  gap: 19px;
  align-items: flex-start;
  position: relative;
    flex-wrap: wrap;
   box-sizing: border-box;
   padding-top: 131px;
   padding-bottom: 15px;
  margin: auto !important;
  background: url(https://forumstatic.ru/files/001c/b8/3a/25450.png) no-repeat top / contain, rgb(var(--canvas-primary));
}

.occ-wrapper * {
   box-sizing: border-box;
    font-size: 11px;
text-align: left;
}

.occ-wrapper desc {
display: block;
width: 100%;
border-top: 5px solid rgba(50, 50, 52, 1);
padding: 16px 10px 11px;
background-color: rgb(var(--canvas-secondary));
text-align: justify;
}

.occ-wrapper .vtab-content {
  display: none;
  padding: 10px;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  height: 430px;
  overflow: auto;
}

.occ-wrapper .vtab-content.active {
   display: grid
}

.occ-wrapper .vtab-btn {
    padding: 7px 10px 4px;
    cursor: pointer;
    background: transparent;
    border: none;
    transition: 0.3s;
    color: rgb(var(--accent));
    font-family: Bewlay;
    font-weight: 400;
    font-size: 14px;
    line-height: 7.2px;
    letter-spacing: 8%;
    text-align: center;
    text-transform: lowercase;
}

.occ-wrapper .vtab-btn.active {
    background: rgb(var(--canvas-secondary));
    color: rgb(var(--text-primary));
}

.occ-wrapper .vtab-buttons {
display: flex;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 113px;
    justify-content: center;
    background-color: rgb(var(--canvas-primary));
}

.occ-wrapper .occ-block {
background-color: rgb(var(--canvas-secondary));
width: 100%;
}

.occ-wrapper .vtabs-wrapper{
width: 100%;
}

.occ-wrapper .occ-block ttl {
font-family: Bewlay;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    padding: 3px 5px;
    letter-spacing: 8%;
    text-align: center;
    text-transform: lowercase;
    display: block;
    color: rgb(var(--light-accent));
    border-bottom: 5px solid rgba(50, 50, 52, 1);
}

.occ-wrapper .occ-block > div {
padding: 10px;
min-height: 100px;
display: flex;
flex-direction: column;
gap: 6px;
}

</style>

<section class="occ-wrapper">

<desc>
для удобства пользуйтесь поиском по странице. первыми идут занятые внешности, затем имя и фамилия персонажа. выкупленные имена и фамилии указаны сбоку, купить их можно в банке. если имя или фамилия не отмечены - можно повторять. дублирование внешностей разрешено в случае родственных связей и по договоренности.
</desc>

<div class="vtabs-wrapper">
  <div class="vtabs-cont">
    <div class="vtab-buttons">
      <button class="vtab-btn">Вкладка 1</button>
      <button class="vtab-btn">Вкладка 2</button>
      <button class="vtab-btn">Вкладка 3</button>
      <button class="vtab-btn">Вкладка 4</button>
    </div>

<!------- первая вкладка ----------------->
    <div class="vtab-content">

<div class='occ-block'>
<ttl>категория профессии</ttl><div>

<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>

</div></div>

<div class='occ-block'>
<ttl>категория профессии</ttl>
<div>

<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>

</div></div>

<div class='occ-block'>
<ttl>категория профессии</ttl>
<div>

<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>

</div></div>

<div class='occ-block'>
<ttl>категория профессии</ttl>
<div>

<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>

</div></div>

<!----- конец блочков с профами ---------></div>

<!------- вторая вкладка ----------------->
<div class="vtab-content">

<div class='occ-block'>
<ttl>категория профессии</ttl><div>

<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>

</div></div>

<div class='occ-block'>
<ttl>категория профессии</ttl>
<div>

<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>

</div></div>

<div class='occ-block'>
<ttl>категория профессии</ttl>
<div>

<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>

</div></div>

<div class='occ-block'>
<ttl>категория профессии</ttl>
<div>

<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>

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

<!------- третья вкладка ----------------->
    <div class="vtab-content">

<div class='occ-block'>
<ttl>категория профессии</ttl><div>

<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>

</div></div>

<div class='occ-block'>
<ttl>категория профессии</ttl>
<div>

<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>

</div></div>

<div class='occ-block'>
<ttl>категория профессии</ttl>
<div>

<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>

</div></div>

<div class='occ-block'>
<ttl>категория профессии</ttl>
<div>

<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>

</div></div>

</div>

<!------- четвёртая вкладка ----------------->
    <div class="vtab-content">

<div class='occ-block'>
<ttl>категория профессии</ttl><div>

<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>
<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>

</div></div>

<div class='occ-block'>
<ttl>категория профессии</ttl>
<div>

<span> должность — <a href='ссылка на профиль'>имя фамилия</a> </span>

</div></div>

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

</section>[/html]
[hideprofile]