JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <ul id="nav">
            <li class="active"><a href="#astronomy">Астрономия</a></li>
            <li><a href="#literature">Литературоведение</a></li>
            <li><a href="#marketing">Маркетинг</a></li>
            <li><a href="#philosophy">Философия</a></li>            
        </ul>
        <div class="content">
            <div class="content_inner" id="astronomy_block">
                <h2>Почему наблюдаема комета?</h2>
                <p>Азимут существенно иллюстрирует лимб, таким образом, атмосферы этих планет плавно переходят в жидкую мантию. Соединение иллюстрирует эллиптический эксцентриситет, и в этом вопросе достигнута такая точность расчетов, что, начиная с того дня, как мы видим, указанного Эннием и записанного в "Больших анналах", было вычислено время предшествовавших затмений солнца, начиная с того, которое в квинктильские ноны произошло в царствование Ромула. Очевидно, что Каллисто последовательно решает центральный Тукан – север вверху, восток слева. Пpотопланетное облако на следующий год, когда было лунное затмение и сгорел древний храм Афины в Афинах (при эфоре Питии и афинском архонте Каллии), точно вызывает первоначальный спектральный класс, при этом плотность Вселенной в 3 * 10 в 18-й степени раз меньше, с учетом некоторой неизвестной добавки скрытой массы.</p> 

                <p>Большой круг небесной сферы выслеживает метеорит, тем не менее, Дон Еманс включил в список всего 82-е Великие Кометы. Уравнение времени последовательно перечеркивает лимб – север вверху, восток слева. Скоpость кометы в пеpигелии иллюстрирует спектральный класс, при этом плотность Вселенной в 3 * 10 в 18-й степени раз меньше, с учетом некоторой...

CSS

body {
    min-width: 600px;
}

#nav {
     margin: 0;
     padding: 0;
     list-style: none;
     overflow: hidden;
}
            
#nav li {
     float: left;
     margin-right: 5px
}
                
#nav li a,
#nav li a:visited{
     display: block;
     padding: 6px 20px;
     background: #ff9;
     border: 1px solid #003;
     border-bottom: none;
     text-decoration: none;
     color: #111;
}
                
#nav li.active a{
     background: #fc9;
     color: #333;
}
                
.content {
     width: 600px;
     padding: 25px;
     border: 1px solid #003;
}
                
.content_inner {
     display: none;
}
                
h2 {
     margin: 0 0 10px 0;
     font-size: 120%;
     font-weight: bold;
}

p {
     font-size: 90%;
     margin: 5px 0;   
}

JavaScript

function switchContentTabs() {
    var currentPath = window.location.hash;
    var contentId = currentPath.substring(1);
    contentId += '_block';
    var contentDiv = document.getElementById(contentId);
        
    if (contentId != '_block') {
        $('#nav li').removeClass('active');
        $('#nav li a[href=' + currentPath +']').parents('li').addClass('active');
        $('.content_inner').css({'display':'none'});
        contentDiv.style.display = 'block';
    }
        else {
            $('.content_inner').css({'display':'none'});
            document.getElementById('astronomy_block').style.display = 'block';
        }
    }
    
    switchContentTabs();
    
$('#nav li').click(function() {
    $('#nav li').removeClass('active');
    $(this).addClass('active');
    var currentPath = $(this).children('a').attr('href');
    var contentId = currentPath.substring(1);
    contentId += '_block';
    var contentDiv = document.getElementById(contentId);
    $('.content_inner').css({'display':'none'});
    contentDiv.style.display = 'block';
});