JSFiddle - React, Tailwind, and code Playground

HTML

<div id="leftcol">
		<ul id="links">
        	<li><h3>Глава первая</h3></li>
            <li><a href="#">Первый раздел</a></li>
            <li><h3>Глава вторая</h3></li>
            <li><a href="#">Второй раздел</a></li>
            <li><a href="#">Третей раздел</a></li>
            <li><a href="#">Чтвертый раздел</a></li>
            <li><h3>Глава третья</h3></li>
            <li><a href="#">Пятый раздел</a></li>
            <li><a href="#">Шестой раздел</a></li>
            <li><a href="#">Седьмой раздел</a></li>
            <li><h3>Глава четвертая</h3></li>
            <li><a href="#">Пятый раздел</a></li>
            <li><a href="#">Шестой раздел</a></li>
            <li><a href="#">Седьмой раздел</a></li>
        <li>
        <ol>
          <li><a href="#">Первый</a></li>
          <li><a href="#">Второй</a></li>
          <li><a href="#">Третий</a></li>
          <li><a href="#">Четвертый</a></li>
          <li><a href="#">Пятый</a></li>
          <li><a href="#">Шестой</a></li>
          <li><a href="#">Седьмой</a></li>
          <li><a href="#">Восмой</a></li>
          <li><a href="#">Девятый</a></li>
          <li><a href="#">Десятый</a></li>
          <li><a href="#">Одинадцатый</a></li>
          <li><a href="#">Двенядцатый</a></li>
        </ol>
        </li>
          <li><a href="#">Восьмой раздел</a></li>
        </ul>
  </div>

CSS

#leftcol {
	float: left;
	margin: 14px;
	padding: 0;
	width: 250px;
	border: 1px solid #000000;
	background: #fef4e5;
	border-radius: 10px;
}
#links {
	list-style: none;
	margin: 0;
	padding: 20px 21px 20px 24px;
}
#links li h3 {
	font-size: 14px;
	font-weight: bold;
	text-align: center;
}
#links a {
	font: 14px Verdana, Arial, Helvetica, sans-serif;
	color: #0000FF;
	margin: 0;
	padding: 0;
}
#links a:hover {
	color: #000000;
}
#links li ol {
	padding: 0;
	margin: 10px 5px 5px 70px;
	text-align: left;
	font-size: 14px;
	font-weight: bold;
}