[html]<!-- В пост. Справа и слева. (done by Kolobdur) -->
<style>
.tabbed {
  display: grid;
  grid-template: /* навигация слева и справа и поле */
         "nav-left-1 tabs-body tabs-body nav-right-1" 1fr
         
         /* Коллонки */
         / 1fr 1fr 1fr;
  width: 96%;
    justify-items: end;
    align-items: stretch;         
}
</style>

<div class="tabbed"> 
  <!-- Навигация слева и справа -->
  <!-- Слева 1 -->
  <input type="radio" name="tabs-body" id="nav-left-1" checked>
  <label for="nav-left-1">История</label> 
  <!-- Справа 1 -->
  <input type="radio" name="tabs-body" id="nav-right-1">
  <label for="nav-right-1">Участники</label>
 
  <div class="tabs-body">
<!-- Контент вкладок слева -->
    <div class="body-left-1"><table  width=590px cellpadding="10" border="1">
    <tr>
     <td></td>
     <td></td>
     <td><i>По-китайски мы сидели, по-китайски говорили, по-китайски воду пили.</i></td>
    </tr>
   </table></center></div>

<!-- Контент вкладок справа -->
    <div class="body-right-1"><style>a.tgcf, a.tgcf:active, a.tgcf:link, a.tgcf:visited {
    font-weight: bold;
    text-align: center;
    display: inline-block;
    padding: 3px;
    background: #827d6724;
    text-transform: uppercase;
    font-size: 11px;
    font-family: 'Cormorant Infant', serif;
    margin: 1px;
    width: 108px;
    transition: all 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
}
a.tgcf:hover {
    transition-duration: 0.3s;
}</style>

<center><table  width=590px cellpadding="10" border="1">
    <tr>
     <td></td>
     <td><center>
<a href="https://churchcross.rusff.me/profile.php?id=295" class="tgcf">Hua Cheng</a>
<a href="https://churchcross.rusff.me/profile.php?id=290" class="tgcf">Ling Wen</a><br>
<a href="https://churchcross.rusff.me/profile.php?id=272" class="tgcf">Xie Lian</a>
</center></td>
     <td></td>
    </tr>
   </table></center></div>
  </div>
</div>

<!-- Стиль для вкладок в постах -->
<style>
.tabbed > input {
  display: none;
}
.tabbed > label {
  display: block;
  width: 20px;
  font-size: 14px;
  font-family: 'hanzi';
  padding: 0px 10px;
  transition: background-color .3s;
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {cursor: pointer;z-index: 1;}

/* Оформление */

/* Оформление неактивного переключателя */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {
  background: #664f4f;
  color: #ada590;
}

/* Оформление активного переключателя и при наведении */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end):hover,
.tabbed > input:checked + label {
  background: #664f4f !important;
  color: #f6dcd8 !important;
}

/* Оформление поля с контентом */
.tabs-body {
    border-top: 5px solid #664f4f;
    border-bottom: 5px solid #664f4f;
    background: url('https://i.imgur.com/z3jnKxY.jpg') #dfddd0;
    color: #000;
}

/* Даем имена переключателям и полю с контентом */

/* Имя поля с контентом */
.tabs-body {grid-area: tabs-body;}

/* Имена переключателей сверху */
#nav-top-start {grid-area: nav-top-start;}
#nav-top-1 {grid-area: nav-top-1;}
#nav-top-2 {grid-area: nav-top-2;}
#nav-top-3 {grid-area: nav-top-3;}
#nav-top-4 {grid-area: nav-top-4;}
#nav-top-5 {grid-area: nav-top-5;}
#nav-top-6 {grid-area: nav-top-6;}
#nav-top-7 {grid-area: nav-top-7;}
#nav-top-8 {grid-area: nav-top-8;}
#nav-top-1 {grid-area: nav-top-9;}
#nav-top-2 {grid-area: nav-top-10;}
#nav-top-end {grid-area: nav-top-end;}

/* Имена переключателей слева */
#nav-left-1 {grid-area: nav-left-1;}
#nav-left-2 {grid-area: nav-left-2;}
#nav-left-3 {grid-area: nav-left-3;}
#nav-left-4 {grid-area: nav-left-4;}
#nav-left-5 {grid-area: nav-left-5;}
#nav-left-6 {grid-area: nav-left-6;}
#nav-left-7 {grid-area: nav-left-7;}
#nav-left-8 {grid-area: nav-left-8;}
#nav-left-9 {grid-area: nav-left-9;}
#nav-left-10 {grid-area: nav-left-10;}

/* Имена переключателей справа */
#nav-right-1 {grid-area: nav-right-1;}
#nav-right-2 {grid-area: nav-right-2;}
#nav-right-3 {grid-area: nav-right-3;}
#nav-right-4 {grid-area: nav-right-4;}
#nav-right-5 {grid-area: nav-right-5;}
#nav-right-6 {grid-area: nav-right-6;}
#nav-right-7 {grid-area: nav-right-7;}
#nav-right-8 {grid-area: nav-right-8;}
#nav-right-9 {grid-area: nav-right-9;}
#nav-right-10 {grid-area: nav-right-10;}

/* Имена переключателей снизу */
#nav-bottom-start {grid-area: nav-bottom-start;}
#nav-bottom-1 {grid-area: nav-bottom-1;}
#nav-bottom-2 {grid-area: nav-bottom-2;}
#nav-bottom-3 {grid-area: nav-bottom-3;}
#nav-bottom-4 {grid-area: nav-bottom-4;}
#nav-bottom-5 {grid-area: nav-bottom-5;}
#nav-bottom-6 {grid-area: nav-bottom-6;}
#nav-bottom-7 {grid-area: nav-bottom-7;}
#nav-bottom-8 {grid-area: nav-bottom-8;}
#nav-bottom-9 {grid-area: nav-bottom-9;}
#nav-bottom-10 {grid-area: nav-bottom-10;}
#nav-bottom-end {grid-area: nav-bottom-end;}

.tabs-body {
    width: 600px;
    height: 200px;
    position: relative;
    text-align: justify;
}

.tabs-body > div {
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  line-height: 1.4em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s, transform 0.2s;
  transition-delay: 0.4s;
  width: auto;
  height: 88%;
  padding: 10px;
  z-index: 0;
}

/* Переключатели */

/* Верх */
#nav-top-1:checked ~ .tabs-body > .body-top-1,
#nav-top-2:checked ~ .tabs-body > .body-top-2,
#nav-top-3:checked ~ .tabs-body > .body-top-3,
#nav-top-4:checked ~ .tabs-body > .body-top-4,
#nav-top-5:checked ~ .tabs-body > .body-top-5,
#nav-top-6:checked ~ .tabs-body > .body-top-6,
#nav-top-7:checked ~ .tabs-body > .body-top-7,
#nav-top-8:checked ~ .tabs-body > .body-top-8,
#nav-top-9:checked ~ .tabs-body > .body-top-9,
#nav-top-10:checked ~ .tabs-body > .body-top-10,

/* Низ */
#nav-bottom-1:checked ~ .tabs-body > .body-bottom-1,
#nav-bottom-2:checked ~ .tabs-body > .body-bottom-2,
#nav-bottom-3:checked ~ .tabs-body > .body-bottom-3,
#nav-bottom-4:checked ~ .tabs-body > .body-bottom-4,
#nav-bottom-5:checked ~ .tabs-body > .body-bottom-5,
#nav-bottom-6:checked ~ .tabs-body > .body-bottom-6,
#nav-bottom-7:checked ~ .tabs-body > .body-bottom-7,
#nav-bottom-8:checked ~ .tabs-body > .body-bottom-8,
#nav-bottom-9:checked ~ .tabs-body > .body-bottom-9,
#nav-bottom-10:checked ~ .tabs-body > .body-bottom-10,

/* Слева */
#nav-left-1:checked ~ .tabs-body > .body-left-1,
#nav-left-2:checked ~ .tabs-body > .body-left-2,
#nav-left-3:checked ~ .tabs-body > .body-left-3,
#nav-left-4:checked ~ .tabs-body > .body-left-4,
#nav-left-5:checked ~ .tabs-body > .body-left-5,
#nav-left-6:checked ~ .tabs-body > .body-left-6,
#nav-left-7:checked ~ .tabs-body > .body-left-7,
#nav-left-8:checked ~ .tabs-body > .body-left-8,
#nav-left-9:checked ~ .tabs-body > .body-left-9,
#nav-left-10:checked ~ .tabs-body > .body-left-10,

/* Справа */
#nav-right-1:checked ~ .tabs-body > .body-right-1,
#nav-right-2:checked ~ .tabs-body > .body-right-2,
#nav-right-3:checked ~ .tabs-body > .body-right-3,
#nav-right-4:checked ~ .tabs-body > .body-right-4,
#nav-right-5:checked ~ .tabs-body > .body-right-5,
#nav-right-6:checked ~ .tabs-body > .body-right-6,
#nav-right-7:checked ~ .tabs-body > .body-right-7,
#nav-right-8:checked ~ .tabs-body > .body-right-8,
#nav-right-9:checked ~ .tabs-body > .body-right-9,
#nav-right-10:checked ~ .tabs-body > .body-right-10 {
  transform: translateY(0px);
  transform: translateX(0%);
  opacity: 1;
  z-index: 1;
}

input[id^=nav] ~ .tabs-body > div[class^=body] {
  transition: transform 0.2s;
  transform: translateX(100%);
}
</style>
[/html]