JSFiddle - React, Tailwind, and code Playground

by vend3tta

HTML

<body>
  <div id="header"><h1>Байки из склепа</h1></div>
  <div style="background:#ccc">
      <div id="sidebar">
        <p><a href="b_all.html">Все байки</a></p>
        <p><a href="b_author.html">Байки по автору</a></p>
        <p><a href="b_theme.html">Байки по теме</a></p>
        <p><a href="b_popular.html">Популярные байки</a></p>
        <p><a href="b_last.html">Последние байки</a></p>
        <p><a href="b_all.html">Все байки</a></p>
        <p><a href="b_author.html">Байки по автору</a></p>
        <p><a href="b_theme.html">Байки по теме</a></p>
        <p><a href="b_popular.html">Популярные байки</a></p>
        <p><a href="b_last.html">Последние байки</a></p>
        <div id="footer">&copy; Влад Мержевич</div><p><a href="b_all.html">Все байки</a></p>
        <p><a href="b_author.html">Байки по автору</a></p>
        <p><a href="b_theme.html">Байки по теме</a></p>
        <p><a href="b_popular.html">Популярные байки</a></p>
          <p><a href="b_all.html">Все байки</a></p>
        <p><a href="b_author.html">Байки по автору</a></p>
        <p><a href="b_theme.html">Байки по теме</a></p>
        <p><a href="b_popular.html">Популярные байки</a></p>
          <p><a href="b_all.html">Все байки</a></p>
        <p><a href="b_author.html">Байки по автору</a></p>
        <p><a href="b_theme.html">Байки по теме</a></p>
        <p><a href="b_popular.html">Популярные байки</a></p>
        <p><a href="b_last.html">Последние байки</a></p>
      </div>
      <div id="content">
        <h2>Алтарь демона </h2>
        <p>Утром, при ярком солнечном свете, всё выглядело совсем не так и мрачно, как 
           планировалось, а даже наоборот. От свечей остались одни потёки, «кровь» 
           смотрелась как краска, а перья почти целиком разлетелись от ветра. Хорошо 
           сохранились только рисунки мелом, но и они были скорее прикольные, чем злые и загадочные. 
           Дети с неподдельным интересом разглядывали изображения, но без тени тех чувств, которые 
     ...

CSS

body {
    font: 11pt Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
    margin: 0; /* Отступы на странице */
   }
   h1 {
    font-size: 36px; /* Размер шрифта */
    margin: 0; /* Убираем отступы */
    color: #fc6; /* Цвет текста */
   }
   h2 {
    margin-top: 0; /* Убираем отступ сверху */
   }
   #header { /* Верхний блок */
    background: #0080c0; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
   #sidebar { /* Левая колонка */
    float: left; /* Обтекание справа */
    border: 1px solid #333; /* Параметры рамки вокруг */
    width: 20%; /* Ширина колонки */
    padding: 5px; /* Поля вокруг текста */
    margin: 10px 10px 20px 5px; /* Значения отступов */
   }
   #content { /* Правая колонка */
    margin: 10px 5px 20px 25%; /* Значения отступов */
    padding: 5px; /* Поля вокруг текста */
    border: 1px solid #333; /* Параметры рамки */
   }
   #footer { /* Нижний блок */
    background: #333; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
    color: #fff; /* Цвет текста */
    clear: left; /* Отменяем действие float */
   }