JSFiddle - React, Tailwind, and code Playground

by kimiliini

HTML

<div id="wrap">
    <div id="head">
        <div id="logo">
            <a href="index.php">
                <img id="logo_img" src="http://cupido.g6.cz/pictures/header.png" alt="EWITA" /></a>
        </div>
        <div id="menubar">
            <ul>
                <li><a class="menu" href="smaler.php">úvodní&nbsp;stránka</a></li>
                <li><a class="menu" href="sluzby.php">služby</a></li>
                <li><a class="menu" href="kontakt.php">kontakt</a> </li>
            </ul>
        </div>
    </div>
    <div id="divider"></div>
    <div id="main_content">
        <div class="content_text">
            <p>
                <b>Chcete zaujmout nebo představit svůj produkt či služby neotřelým způsobem?</b>
                Nabízíme profesionální grafické práce – kompletní designové zpracování webu, navržení plakátů, vizitek, nálepek či internetových bannerů a různých dalších propagačních materiálů.
            </p><p>
                Můžeme Vám zařídit komplet webové stránky včetně <a id="i5e5c6b87208fa2519263adab8e5858d1" href="http://www.stable.cz/">hostingu</a>, <a id="w9e3b0bb96cef4fc3c9d71a5b540c43a8" href="http://www.domenovecentrum.cz/">domény</a>, designu a sepsání samostatného webu v jazyce php či html. Dále nabízíme web s redakčním systémem – Wordpress, Joomla nebo Dropal, které umožňují například snadné moderování <br />a užívání e-shopu.
            </p>
        </div>
    </div>
    <div id="footer">
        Copyright © 2004, EWITA s.r.o.
    </div>
</div>

CSS

* {
    margin     : 0;
    padding    : 0;
}
body {
    font-family: Arial;
    height     : 100%;
}
img {
    border     : none;
}
/* ----------------------------------------------- */
#wrap {
    position   : relative;
    width      : 100%;
    height     : 100%;
}
/* ----------------------------------------------- */
#head {
    position   : relative;
    width      : 800px;
    height     : 131px;
    margin     : 100px auto 0 auto;
    background : blue;
}
/* ----------------------------------------------- */
#logo {
    position   : relative;
    width      : 431px;
    float      : left;
    background : red ;
}
#logo_img {
    width      : 439px;
    height     : 131px;
    float      : left;
}
/* ----------------------------------------------- */
#menubar {
    position   : relative;
    background : green url('http://cupido.g6.cz/pictures/menu.png') no-repeat;
    width      : 300px;
    color      : #fff;
    float      : left;
    margin-top : 107px;
    padding    : 3px 0 3px 10px; /* Missing px */
}
#menubar ul {
    list-style : none;
}
#menubar li {
    padding    : 0 10px;
    float      : left;
}
a.menu {
    text-decoration : none;
    color      : #fff;
}
a.menu:hover,
a.menu:active {
    color      : #3cc8a8;
}
/* ----------------------------------------------- */
#divider {
    border-top   : 5px solid #353535;
    border-bottom: 3px solid #888;
}
/* ----------------------------------------------- */
#main_content {
    position   : relative;
    background : url('http://cupido.g6.cz/pictures/background.png');
    border-top : 2px solid #fff;
    padding    : 120px 0 130px 0;
}
.content_text {
    margin     : 0 auto;
    width      : 700px;
    background : #fff;
    border     : 1px solid;
    padding    : 50px 30px;

}
.content_text p {
    font-size  : 16px;
}
/* ----------------------------------------------- */
#footer {
    position   : relative;
    height     : 17px;
    width      : 100%;
    bottom     : 0;
    font-size  :...