[html]
<div class="tabs">
    <div class="tab-labels">
        <input type="radio" name="tab" id="tab1" checked>
        <label class="tab-label active-tab" for="tab1" onclick="showContent(1)">о персонаже</label>
       
        <input type="radio" name="tab" id="tab2">
        <label class="tab-label" for="tab2" onclick="showContent(2)">отношения</label>
       
        <input type="radio" name="tab" id="tab3">
        <label class="tab-label" for="tab3" onclick="showContent(3)">эпизоды</label>
    </div>

    <div class="tab-content-container">
        <div class="tab-content active" id="content1">
            <h2>О ПЕРСОНАЖЕ</h2>
                        <div class="image-container">
                            <img src="https://via.placeholder.com/190" alt="Placeholder Image" style="width: 190px; height: 190px;">
                            <div class="hover-text">Здесь небольшой текст</div>
                        </div>
                        <p>Описание персонажа — это ключевой элемент, который помогает читателю или участнику игры лучше понять его личность, мотивацию и роль в истории. Хорошо продуманное описание делает персонажа живым и интересным. Вот основные аспекты, которые могут помочь в создании яркого образа:
Характер Темперамент: Спокойный, импульсивный, эмоциональный, рассудительный? Какая у него манера общения?</p>
<p>Черты личности: Какие у него основные черты — добрый, жестокий, замкнутый, харизматичный, осторожный?
Слабости и сильные стороны: </p>
<p>Например, он может быть храбрым, но слишком доверчивым, или умным, но неуверенным в себе. Мотивация: Что движет персонажем? Это может быть желание защитить кого-то, месть, жажда власти или просто любопытство.
<p>История Прошлое: Где и как он вырос? Какие события повлияли на его личность? Может быть, у него есть трагическая история или значимый опыт. Цели и мечты: Что персонаж хочет достичь в жизни? Есть ли у него долгосрочные или краткосрочные цели? </p>Отношения с другими: Какие у него отношения с другими персонажами — друзья, враги, семья?
<p>Особенности речи Манера говорить: Как он говорит? Быстро, медленно, с акцентом? Использует ли сленг, имеет ли привычку вставлять определённые слова или фразы? Интонации и жесты: Как он выражает эмоции во время разговора? Использует ли жесты, мимику?</p>
        </div>
        <div class="tab-content" id="content2">
            <h2>ОТНОШЕНИЯ</h2>
                        <div class="image-container-small">
                            <img src="https://via.placeholder.com/100" alt="100x100 Image" style="width: 100px; height: 100px;">
                            <div class="hover-text-small">имя персонажа</div>
                        </div>
                        <p>Отношения — это взаимосвязи между людьми, основанные на различных формах взаимодействия, общения и эмоциональных связей. Они могут формироваться как на основе близости и доверия, так и на основе деловых или социальных обязательств. Дружеские — отношения, основанные на доверии, поддержке, общих интересах и симпатии. В таких отношениях люди могут быть открыты друг с другом, делиться личным, помогать в сложных ситуациях.</p>
<p>Любовные (романтические) — это эмоционально насыщенные отношения, в которых обычно присутствует влечение, привязанность и любовь. Они могут включать в себя как духовную, так и физическую близость.</p>
                        <div class="image-container-small">
                            <img src="https://via.placeholder.com/100" alt="100x100 Image" style="width: 100px; height: 100px;">
                            <div class="hover-text-small">имя персонажа</div>
                        </div>
                        <p>Семейные — отношения между членами семьи: родителями, детьми, братьями, сестрами и другими родственниками. Эти отношения формируются на основе кровного родства или брачных уз и часто включают чувство ответственности, заботы и поддержки.</p>
<p>Деловые — это отношения между людьми, которые взаимодействуют в профессиональной среде. Они могут быть основаны на сотрудничестве, общих целях и договоренностях, и обычно более формальные, чем личные отношения.</p>
<p>Социальные — это более широкие отношения, возникающие в обществе между людьми, которые взаимодействуют как члены различных групп (друзья, коллеги, соседи). Эти отношения могут быть поверхностными, основанными на этикете и нормах поведения.</p>
                        <div class="image-container-small">
                            <img src="https://via.placeholder.com/100" alt="100x100 Image" style="width: 100px; height: 100px;">
                            <div class="hover-text-small">имя персонажа</div>
                        </div>
                        <p>Учитель-ученик (менторские) — отношения, в которых один человек (учитель, наставник) передает свои знания, опыт и поддержку другому (ученику, подопечному). Это могут быть как профессиональные, так и личностные наставления.</p>
                        <p>Токсичные — это нездоровые отношения, которые могут причинять боль и страдания одной или обеим сторонам. Обычно они основаны на манипуляции, неуважении, отсутствии равноправия.</p>
        </div>
        <div class="tab-content" id="content3">
            <h2>ЭПИЗОДЫ</h2>
            <table>
                <tr>
                    <td style="width: 15%; background-color: #d3d3d3;"> <!-- Окрашена в светло-серый -->
                        <p>дата</p>
                    </td>
                    <td style="width: 35%; background-color: #d3d3d3;"> <!-- Окрашена в светло-серый -->
                        <p>название эпизода</p>
                    </td>
                    <td style="width: 50%; background-color: #d3d3d3;"> <!-- Окрашена в светло-серый -->
                        <p>участники</p>
                    </td>
                </tr>
                <tr>
                    <td style="width: 15%;">
                        <p>01.01.610</p>
                    </td>
                    <td style="width: 35%;">
                        <p>название</p>
                    </td>
                    <td style="width: 50%;">
                        <p>участники</p>
                    </td>
                </tr>
                <tr>
                    <td style="width: 15%;">
                        <p>01.01.617</p>
                    </td>
                    <td style="width: 35%;">
                        <p>название</p>
                    </td>
                    <td style="width: 50%;">
                        <p>участники</p>
                    </td>
                </tr>
                <tr>
                    <td style="width: 15%;">
                        <p>01.01.610</p>
                    </td>
                    <td style="width: 35%;">
                        <p>название</p>
                    </td>
                    <td style="width: 50%;">
                        <p>участники</p>
                    </td>
                </tr>
                <tr>
                    <td style="width: 15%;">
                        <p>01.01.610</p>
                    </td>
                    <td style="width: 35%;">
                        <p>название</p>
                    </td>
                    <td style="width: 50%;">
                        <p>участники</p>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<script src="https://forumstatic.ru/files/001a/74/14/87060.js"></script>
[/html]