[html]<div id="tabs">
<!-- Кнопки -->
<ul class="tabs-nav">
    <li><a href="#tab-1">Ад</a></li>
    <li><a href="#tab-2">Земля</a></li>
    <li><a href="#tab-3">Рай</a></li>
</ul>

<!-- Контент -->
<div class="tabs-items">
    <div class="tabs-item" id="tab-1">
    <strong>Текст вкладки №1</strong>
    </div>
    <div class="tabs-item" id="tab-2">
    <strong>Текст вкладки №2</strong>
    </div>
    <div class="tabs-item" id="tab-3">
    <strong>Текст вкладки №3</strong>
    </div>   
</div>
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
var tab = $('#tabs .tabs-items > div');
tab.hide().filter(':first').show();

// Клики по вкладкам.
$('#tabs .tabs-nav a').click(function(){
    tab.hide();
    tab.filter(this.hash).show();
    $('#tabs .tabs-nav a').removeClass('active');
    $(this).addClass('active');
    return false;
}).filter(':first').click();

// Клики по якорным ссылкам.
$('.tabs-target').click(function(){
    $('#tabs .tabs-nav a[href=' + $(this).attr('href')+ ']').click();
});

// Отрытие вкладки из хеша URL
if(window.location.hash){
    $('#tabs-nav a[href=' + window.location.hash + ']').click();
    window.scrollTo(0, $("#" . window.location.hash).offset().top);
}
});
</script>

<style>
div#tabs {
    width: calc(100% - 40px);
    height: 250px;
    background: #873320;
    padding: 20px;
    border-radius: 15px;
}
ul.tabs-nav {
    display: flex;
    justify-content: space-evenly;
}
ul.tabs-nav a:link{
    color: var(--border) !important;
}
div#tab-1 {
    background: #585;
    padding: 10px;
    width: 110%;
    margin-left: -20px;
    color: var(--text);
}

</style>[/html]
[hideprofile]