[html]
<div class="tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">название расы</label>
<input id="tab2" type="radio" name="tabs">
<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">название расы</label>
<input id="tab7" type="radio" name="tabs">
  <label for="tab7">название расы</label>
<input id="tab8" type="radio" name="tabs">
  <label for="tab8">название расы</label>
<section id="content1">
<p>
<z>Заголовок </z>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
</p>
</section> 
<section id="content2">
<p><z>Заголовок 2</z>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
</section> 
<section id="content3">
<p><z>Заголовок 3</z>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
</p>
</section> 
<section id="content4">
<p><z>Заголовок 4</z>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
</section> 
<section id="content5">
<p>Описание5</p>
</section> 
<section id="content6">
<p>Описание6</p>
</section> 
<section id="content7">
<p>Описание7</p>
</section> 
<section id="content8">
<p>Описание8</p>
</section> 
</div>

<style>
*{box-sizing:border-box}
.tabs {
    width: 900px;
    padding: 0px 0px 5px 0;
    display: block;
    margin: 1px 0px 1px 10px;
    position: relative;
    border: 1px solid #8b7d4b;
    background: url(https://forumstatic.ru/files/001b/6f/93/42938.jpg?v=1);
    box-shadow: 0px 0px 0px 1px #ababa1;
    /* height: 500px; */
}
section {
    display: none;
    padding: 10px 15px 10px 15px;
    position: absolute;
    top: 0;
    left: 190px;
    margin: 12px 0px 10px 20px !important;
    width: 665px;
    overflow-y: auto !IMPORTANT;
    height: 338px;
    /* border: red 1px solid; */
    background: #8b8b7e38;
    border-radius: 1px;
    border: 1px solid #897b49;
    box-shadow: 0px 0px 10px #d9d9d547 inset, 0px 0px 0px 1px #a9a9a0;
    font-size: 11px;
    font-family: roboto;
}

section z {
    display: block;
    text-align: center;
    background: url(https://forumstatic.ru/files/001b/6f/93/72540.jpg);
    border: 1px solid #8b7d4b;
    border-radius: 2px;
    font-family: alice;
    text-transform: uppercase;
    font-size: 17px;
    text-shadow: 1px 1px #000, 0px 0px 5px #b9b9b14d;
    color: #ad9e60;
    padding: 6px 0 5px 0;
    margin-bottom: 8px !IMPORTANT;
}

p {
  margin: 0;
}
input {
  display: none;
}
label {
    display: block;
    width: 180px;
    padding: 7px 10px 7px 10px;
    background: url(https://forumstatic.ru/files/001b/6f/93/72540.jpg);
    cursor: pointer;
    margin: 10px !IMPORTANT;
    border-radius: 2px;
    border: 1px solid #8b7d4b;
    text-align: center;
    font-family: alice;
    text-transform: uppercase;
    font-size: 15px;
    text-shadow: 1px 1px #000, 0px 0px 5px #b9b9b14d;
    color: #ad9e60;
}
input:checked + label {
    color: #b1b1a9;
    background: url(https://forumstatic.ru/files/001b/6f/93/72540.jpg);
    box-shadow: 0px 0px 10px #a7a7a738 inset;
}
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4, #tab5:checked ~ #content5, #tab6:checked ~ #content6, #tab7:checked ~ #content7, #tab8:checked ~ #content8 {
  display: block;
}
section {
  animation: scale 0.7s ease-in-out;
}
@keyframes scale {
  0% {
  transform: scale(0.9);
  opacity: 0;
  }
  50% {
  transform: scale(1.005);
  opacity: 0.5;
  }
  100% {
  transform: scale(1);
  opacity: 1;
  }
}
</style>
[/html]