JSFiddle - React, Tailwind, and code Playground

by Rashit1122233

HTML

<div class="page">
  <div class="panel">
    <ul>
      <li class="list">ГЛАВА 1</li>
      <li class="list">ГЛАВА 2</li>
      <li class="list">ГЛАВА 3</li>
      <li class="list">ГЛАВА 4</li>
      <li class="list">ГЛАВА 5</li>
      <li class="list">ГЛАВА 6</li>
      <li class="list">ГЛАВА 7</li>
      <li class="list">ГЛАВА 8</li>
      <li class="list">ГЛАВА 9</li>
      <li class="list">ГЛАВА 10</li>
      <li class="list">ГЛАВА 11</li>
      <li class="list">ГЛАВА 12</li>
      <li class="list">ГЛАВА 13</li>
      <li class="list">ГЛАВА 14</li>
      <li class="list">ГЛАВА 15</li>
      <li class="list">ГЛАВА 16</li>
      <li class="list">ГЛАВА 17</li>
      <li class="list">ГЛАВА 18</li>
      <li class="list">ГЛАВА 19</li>
      <li class="list">ГЛАВА 20</li>
      <li class="list">ГЛАВА 21</li>
      <li class="list">ГЛАВА 22</li>
      <li class="list">ГЛАВА 23</li>
      <li class="list">ГЛАВА 24</li>
      <li class="list">ГЛАВА 25</li>
      <li class="list">ГЛАВА 26</li>
      <li class="list">ГЛАВА 27</li>
      <li class="list">ГЛАВА 28</li>
      <li class="list">ГЛАВА 29</li>
      <li class="list">ГЛАВА 30</li>
      <li class="list">ГЛАВА 31</li>
      <li class="list">ГЛАВА 32</li>
      <li class="list">ГЛАВА 33</li>
      <li class="list">ГЛАВА 34</li>
      <li class="list">ГЛАВА 35</li>
      <li class="list">ГЛАВА 36</li>
      <li class="list">ГЛАВА 37</li>
      <li class="list">ГЛАВА 38</li>
      <li class="list">ГЛАВА 39</li>
      <li class="list">ГЛАВА 40</li>
    </ul>
  </div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla et impedit, dolor eos quis, deserunt tempora repellendus, obcaecati totam inventore minus velit magni provident quidem esse similique est accusantium tenetur nemo natus architecto cupiditate tempore laudantium. Omnis, quia, voluptatum. Cum modi nobis ab, fugiat voluptates veritatis a soluta, pariatur laborum nulla sed eius? Quia earum, eaque eveniet quaerat, quo quod...

CSS

*{
  margin: 0;
  padding: 0;
  
}
html{
  width: 100%;
  height: 100%;
}
body{
  width: 100%;
  height: 100%;
}
.page{
  background-color: #fff;
  width: 600px;
  margin: 0 auto;
}
.panel{
  width: 200px;
  float:left;
  height: 100%;
  background-color: #727272;
  color:#fff;
  position: fixed;
  overflow:auto;
}
.panel>ul{
  width: auto;
  display: block;
}
.content{
  width: 400px;
  float: right;
  background-color: #fff000;
  
}