[html]<style>
section.rules-block {
position: relative;
background: url(https://forumstatic.ru/files/001c/b4/c9/19943.jpg) no-repeat right, rgba(205, 205, 205, 1);
width: 600px;
height: 656px;
margin: auto;
box-sizing: border-box;
padding: 13px 7px;
}

section.rules-block *{
box-sizing: border-box;
scrollbar-gutter: stable;
}

section.rules-block div.rules-info {
background: var(--alaska-white-gray, rgba(231, 231, 231, 1));
width: 390px;
height: 150px;
border-top: 1px solid rgba(50, 50, 52, 1);
padding: 9px 3px 9px 9px;
}

section.rules-block div.rules-info div {
overflow: auto;
padding-right: 6px;
height: 100%;
font-size: 10px;
}

section.rules-block  .vtab-content {
  display: none;
  padding: 10px;
  border: none;
  overflow: auto;
}

section.rules-block .vtab-content.active {
    display: block;
    background-color: rgba(231, 231, 231, 1);
    height: 100%;
    border-top: 5px solid rgba(50, 50, 52, 1);
}
section.rules-block .vtabs-cont,
section.rules-block .vtabs-wrapper {
width: 390px;
height: 592px;
}

section.rules-block .vtab-buttons {
display: flex;
}

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

section.rules-block .vtab-btn.active {
  background: rgba(231, 231, 231, 1);
  color: rgba(47, 47, 47, 1);
 
}

section.rules-block details {
    background: rgba(206, 206, 206, 0.5);
    border: 1px solid rgba(175, 175, 175, 1);
    border-radius: 2px;
    padding: 16px 15px 17px 15px;
    display: block;
    font-size: 11px;
    cursor: pointer;
   margin: 5px 0;
}

section.rules-block details summary {
    list-style: none;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    font-family: bewlay;
    color: rgb(var(--accent));
    font-size: 16px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    outline: none;
}
section.rules-block details[open] summary {
    margin-bottom: 10px;
}

section.rules-block details summary::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    background: url(https://forumstatic.ru/files/001c/b4/c9/37122.png) no-repeat center / contain;
    opacity: 1;
    width: 20px;
    height: 20px;
    color: rgba(212, 82, 81, 1);
    transition: transform 0.5s ease;
}

section.rules-block details[open] summary::before {
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(450deg);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
}

section.rules-block quote {
    background: white;
    border: 1px solid rgba(175, 175, 175, 1);
    border-radius: 2px;
    padding: 16px 15px 17px 15px;
    display: block;
    font-size: 11px;
    cursor: pointer;
   margin: 5px 0;
   position: relative;
}

section.rules-block quote::before {
content:'';
background: url(https://forumstatic.ru/files/001c/ac/d1/17413.png) no-repeat center / contain;
position: absolute;
width: 25px;
height: 25px;
top: -3px;
left: -8px;
filter: hue-rotate(174deg);
}

</style>

<section class='rules-block'>

<div class="vtabs-wrapper">
  <div class="vtabs-cont">
    <div class="vtab-buttons">
      <button class="vtab-btn">правила</button>
      <button class="vtab-btn">F.A.Q.</button>
    </div>

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

Содержимое 1

<details>
  <summary>Заголовок спойлера</summary>
  А здесь лежит скрытый контент. Любой длины, будет расталкивать контент.
</details>
<details>
  <summary>Заголовок спойлера</summary>
  А здесь лежит скрытый контент. Любой длины, будет расталкивать контент.
</details>

<quote>
rulesm Ipsum is simply dummy text of the printing and typesetting industry. rulesm Ipsum has been the industry's standard dummy text ever since the 1500s, when an rulesm Ipsum is simply dummy text of the printing and typesetting industry. rulesm Ipsum has been the industry's standard dummy text ever since the 1500s
</quote>
rulesm Ipsum is simply dummy text of the printing and typesetting industry. rulesm Ipsum has been the industry's standard dummy text ever since the 1500s, when an rulesm Ipsum is simply dummy text of the printing and typesetting industry. rulesm Ipsum has been the industry's standard dummy text ever since the 1500s

rulesm Ipsum is simply dummy text of the printing and typesetting industry. rulesm Ipsum has been the industry's standard dummy text ever since the 1500s, when an rulesm Ipsum is simply dummy text of the printing and typesetting industry. rulesm Ipsum has been the industry's standard dummy text ever since the 1500s

rulesm Ipsum is simply dummy text of the printing and typesetting industry. rulesm Ipsum has been the industry's standard dummy text ever since the 1500s, when an rulesm Ipsum is simply dummy text of the printing and typesetting industry. rulesm Ipsum has been the industry's standard dummy text ever since the 1500s

</div>

<!--------------- вторая вкладка ----------------------------------------------------------->
    <div class="vtab-content">Содержимое 2</div>
  </div>
</div>

</section>[/html]