JSFiddle - React, Tailwind, and code Playground

by IllusionMH

HTML

<div id="header" class="wrapper">Fixed header</div>
<div id="contentwrapper">
    <div id="content">Давным-давно в одной далекой галактике бушевали...
<a href="http://www.yaplakal.com/uploads/post-3-13388133387425.jpg">"ЗВЁЗДНЫЕ ВОЙНЫ"</a>

"ЭПИЗОД V: ИМПЕРИЯ НАНОСИТ ОТВЕТНЫЙ УДАР"

Для повстанцев настали тёмные времена.
"Звезда Смерти" уничтожена, но имперские войска вынудили мятежников 
покинуть тайную базу и преследуют их по всей галактике.

Скрываясь от грозного имперского флота,
отряд борцов за свободу во главе с Люком Скайуокером
создал новую тайную базу на затерянной ледяной планете Хот.

Зловещий лорд Вейдер, одержимый идеей найти юного Скайуокера, 
разослал зонды-разведчики во все отдаленные уголки Вселенной...


Давным-давно,
в далекой-далекой галактике...
ЗВЕЗДНЫЕ ВОЙНЫ
ЭПИЗОД VI
ВОЗВРАЩЕНИЕ ДЖЕДАЯ
Люк Скайуокер вернулся домой,
на планету Татуин, в попытках...
...разыскать своего друга Хана Соло...
...и вырвать его из рук
подлого бандита Джаббы Хатта.
Люк не знал, что в это время
Империя начала строительство...
...новой бронированной
космической станции...
...еще более мощной, чем
первая грозная ''Звезда Смерти''.
Создание этого
разрушительного оружия...
...означало бы окончательное
поражение повстанцев...
...в их войне за свободу галактики...
</div>
</div> <!-- content wrapper -->
<div id="sidebars" class="wrapper">
    <div id="left"><a href="http://placekitten.com/200/200">Link in Left sidebar</a></div>
    <div id="right">Right sidebar</div>
</div> <!-- sidebars -->
<div id="footer" class="wrapper">Footer</div>

CSS

html, body {
    margin: 0; padding: 0;
}
.wrapper {
    position: fixed;
    width: 80%;
    left: 50%;
    margin-left: -40%;
}
#header {
    height: 100px;
    background-color: #454545;
    top: 0;
    z-index: 2;
}
#sidebars {
    top: 100px;
    background-color: rgba(255, 0, 0, 0.3);
}
#left {
    float: left;
    height: 250px;
    width: 100px;
    background-color: rgba(150,150,150, .5);
}
#right {
    float: right;
    width: 150px;
    height: 400px;
    background-color: rgba(150,150,150, .5);
}
#contentwrapper {
    width: 80%;
    margin: 100px auto 20px;
    position: relative;
}
#content {
    margin: 0 150px 0 100px;
    font-size: 30px;
    white-space: pre-line;
    text-align: center;
    background-color: #09C;
    position: relative;
    z-index: 1;
}
#footer {
    height: 20px;
    bottom: 0;
    background-color: rgba(150,150,150, .5);
    z-index: 2;
}