JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div id="header"><h1>Трехколоночный резиновый макет</h1></div>
<div id="sidebar-left">
    <a href="http://kerny.ru/">Commodore Chessmate</a>
    <a href="http://kerny.ru/">Роба́стное управле́ние</a>
    <a href="http://kerny.ru/">Адаптивное управление</a>
    <a href="http://kerny.ru/">Оптимальное управление</a>
    <a href="http://kerny.ru/">Плановое управление </a>
    <a href="http://kerny.ru/">Гомеостат</a>
    <a href="http://kerny.ru/">Открытая система</a>
    <a href="http://kerny.ru/">Cамоорганизующаяся система</a>
    <a href="http://kerny.ru/">Задача оптимального управления</a></div><div id="sidebar-right"><a href="http://kerny.ru/">Л.С. Понтрягин</a>
    <a href="http://kerny.ru/">В.Г. Болтянский</a>
    <a href="http://kerny.ru/">Р.В. Гамкрелидзе</a>
    <a href="http://kerny.ru/">Е.Ф. Мищенко</a>
</div>
<div id="content">
    <div class="content">
        <h2>Commodore Chessmate  </h2>Commodore Chessmate — один из первых шахматных компьютеров, выпущенный компанией Commodore в июне 1978 года в США, Англии и Германии.
        Впервые был представлен на CES 1978 года в Чикаго.Commodore Chessmate является одним из первых шахматных компьютеров, поступивших в массовую продажу. Самая первая подобная машина — Fidelity Chess Challenger 10, выпущенная компанией Fidelity Electronics, — появилась на прилавках всего годом ранее — весной 1977 года.Chessmate базируется на одноплатном компьютере KIM-1, произведённом также компанией Commodore. В нём используется программа Microchess 1.5, написанная 18 декабря 1976 года программистом Питером Дженнигсом (англ. Peter Jennings) для компьютеров KIM-1. Позже на основе этой программы были выпущены другие шахматные компьютеры — Novag Chess Champion MK II в 1979 году и TEC Schachcomputer в 1981 году. Особым успехом компьютер не пользовался, поэтому уже в 1980 году Commodore остановила выпуск Chessmate.
    </div>
    <div class="content">
        <h2>Роба́стное управле́ние </h2>
        Роба́стное управле́ние — совокупность...

CSS

body {
    font: 12pt Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
    margin: 0; /* Отступы на странице */
   }
   a{
   color: #994238; /* Цвет текста */
   }
   h1 {
    font-size: 36px; /* Размер шрифта */
    margin: 0; /* Убираем отступы */
    color: #fff; /* Цвет текста */
   }
   h2 {
    margin-top: 0; /* Убираем отступ сверху */
    color: #994238; /* Цвет заголовка */
   }
   #header { /* Верхний блок */
    background: #333; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
   #sidebar-left { /* Левая колонка */
    float: left; /* Обтекание справа */
    border: 1px solid #333; /* Параметры рамки вокруг */
    width: 10%; /* Ширина колонки */
    padding: 5px; /* Поля вокруг текста */
    margin: 10px 20px 20px 5px; /* Значения отступов */
    min-width: 200px; /* Устанавливаем минимальную ширину */
   }
    
    #sidebar-right { /* Правая колонка */
    float: right; /* Обтекание слева */
    border: 1px solid #333; /* Параметры рамки вокруг */
    width: 10%; /* Ширина колонки */
    padding: 5px; /* Поля вокруг текста */
    margin: 10px 10px 20px 20px; /* Значения отступов */
    min-width: 200px;/* Устанавливаем минимальную ширину */
   }
    
   #content { /* центральный блок (контент) */
    overflow: hidden; /* Отображается только область внутри элемента*/
   }
    
   .content{
   border:1px solid #000;
   margin-top:10px;
   margin-bottom:10px;
   padding: 10px;
   }