JSFiddle - React, Tailwind, and code Playground

by Axiniya

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Test task</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header><h1>Header</h1></header>
    <main>
      <aside>
        <ul>
          <li>User 1</li>
          <li>User 2</li>
          <li>User 3</li>
          <li>User 4</li>
          <li>User 5</li>
          <li>User 6</li>
          <li>User 7</li>
          <li>User 8</li>
          <li>User 9</li>
          <li>User 10</li>
          <li>User 11</li>
          <li>User 12</li>
          <li>User 13</li>
          <li>User 14</li>
          <li>User 15</li>
          <li>User 16</li>
          <li>User 17</li>
          <li>User 18</li>
          <li>User 19</li>
          <li>User 20</li>
          <li>User 21</li>
          <li>User 22</li>
          <li>User 23</li>
          <li>User 24</li>
          <li>User 25</li>
          <li>User 26</li>
          <li>User 27</li>
          <li>User 28</li>
          <li>User 29</li>
          <li>User 30</li>
          <li>User 31</li>
          <li>User 32</li>
          <li>User 33</li>
          <li>User 34</li>
          <li>User 35</li>
          <li>User 36</li>
          <li>User 37</li>
          <li>User 38</li>
          <li>User 39</li>
          <li>User 40</li>
          <li>User 41</li>
          <li>User 42</li>
          <li>User 43</li>
          <li>User 44</li>
          <li>User 45</li>
          <li>User 46</li>
          <li>User 47</li>
          <li>User 48</li>
          <li>User 49</li>
          <li>User 50</li>
        </ul>
      </aside>
      <section>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed
          tortor vitae nulla rhoncus consequat. Aliquam finibus ante lacus, quis
          eleifend nisi commodo faucibus. Nulla sagittis, metus ac tempus
          imperdiet, velit dolor sodales orci, nec tincidunt eros nisl ut nunc.
          Quisque ut ornare elit, id tempor...

CSS

* {
    margin: 0;
    /* Обнуляем внешние отступы */
    padding: 0;
    /* Обнуляем внутренние отступы */
}

li {
    list-style: none;
    /* Отключем маркеры */
}

header {
    background-color: gray;
    height: 50px;
    /* Фиксированая высота хэдэра */
    min-width: 360px;
    /* Задаем минимальную ширину */
}

main {
    height: calc(100vh - 150px);
    /* Вычисляем высоту */
    display: flex;
    /* Выстраиваем элементы горизонтально */
}

section {
    width: 100%;
    /* Занимаем всё свободное место документа */
    overflow: auto;
    /* Прокрутка работает при необходимости */
}

aside {
    width: 200px;
    /* Задали фиксированую ширину блока */
    height: calc(100vh - 150px);
    /* Вычисляем высоту */
    overflow: auto;
    /* Прокрутка работает при необходимости */
    background-color: darkgray;
}


footer {
    background-color: gray;
    height: 100px;
    /* Фиксированая высота футера */
    min-width: 360px;
    /* Задаем минимальную ширину */
}