JSFiddle - React, Tailwind, and code Playground

HTML

<!-- TOC START -->
<div id="dw__toc" class="counted">
<h3 class="toggle">Содержание</h3>
<div>

<ul class="toc">
<li class="level1"><div class="li"><a href="#общие_вопросы">Общие вопросы</a></div></li>
<li class="level1"><div class="li"><a href="#решение_проблем">Решение проблем</a></div></li>
<li class="level1"><div class="li"><a href="#панель_управления">Панель управления</a></div></li>
<li class="level1"><div class="li"><a href="#заметки_сисадмина">Заметки сисадмина</a></div></li>
</ul>
</div>
</div>
<!-- TOC END -->


<h1 class="sectionedit1 counted" id="общие_вопросы">Общие вопросы</h1>
<div class="level1">
<ul>
<li class="level1"><div class="li"> <a href="http://bit-space.com/wiki/doku.php/wiki:terminologiya" class="urlextern" title="http://bit-space.com/wiki/doku.php/wiki:terminologiya"  rel="nofollow"> Основные понятия</a></div>
</li>
<li class="level1"><div class="li"> <a href="http://bit-space.com/wiki/doku.php/wiki:princip_raboty_sayrov" class="urlextern" title="http://bit-space.com/wiki/doku.php/wiki:princip_raboty_sayrov"  rel="nofollow"> Принцип работы сайтов</a></div>
</li>
</ul>

</div>

<h1 class="sectionedit2 counted" id="решение_проблем">Решение проблем</h1>
<div class="level1">

<p>
Здесь указываем ссылки которые относятся к данной категории…
</p>

</div>

<h1 class="sectionedit3 counted" id="панель_управления">Панель управления</h1>
<div class="level1">
<ul>
<li class="level1"><div class="li"> <a href="/doku.php/da:cron" class="wikilink1" title="da:cron">Планировщик Cron</a></div>
</li>
<li class="level1"><div class="li"> <a href="/doku.php/da:skin" class="wikilink1" title="da:skin">Оформление панели управления</a></div>
</li>
</ul>

</div>

CSS

#dw__toc {
    float: right;
    width: 226px;
    border-radius: 10px;
    box-shadow: 0 0 7px rgba(0,0,0,.4); /* новым браузерам — красивую тень */
    border: 2px solid #ccc; /* старым хватит и просто рамки */
}

#dw__toc h3 {
    margin: 0;
    padding: .5em 2em;
    border-bottom: 4px solid #3D668F;
}

.counted:not(h1) {
    display: none;
    border: none !important; /* убираем рамку в новых браузерах */
}

.counted:nth-last-of-type(n+4):not(h1) {
    display: block;
}