JSFiddle - React, Tailwind, and code Playground

by kimiliini

HTML

<div id="head">
    <div id="header">
        <a href="index.php"><img src="http://cupido.g6.cz/pictures/header.png" width="439" height="131" alt="" /></a> </div>
    <hr class="main" />
    <div id="menubar">
        <table>
            <tr>
                <td><a class="header" href="index.php">úvodní&nbsp;stránka</a></td>
                <td><a class="header" href="sluzby.php">služby</a></td>
                <td><a class="header" href="kontakt.php">kontakt</a> </td>
            </tr>
        </table>
    </div>
</div>
<div id="wrapper">
    <div id="content">
        <div id="content_text">
            <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ů.
            <br /><br />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.
        </div>
    </div>
</div>
<div id="footer">
    <hr />
    Copyright © 2004, EWITA s.r.o. 
</div>

CSS

body  {
    background : #888;
    color      : #000;
    font-family: Arial;
}
#header {
    position  : relative;
    left      : -150px;
    background: #008; /*transparent;*/
    text-align: center;
    margin-top: 50px;
    padding   : 0;
}
#menubar {
    position : relative;
    background: green; /*transparent url('http://cupido.g6.cz/pictures/menu.png') no-repeat;*/
    left      : 730px;
    top       : -40px;
    height    : 25px;
    width     : 300px;
    color     : #fff;
    padding   : 5px 0 0 20px; /* Missing px */
}

#wrapper {
    margin     : auto;
    min-height : 500px;
    background : orange; /*url('http://cupido.g6.cz/pictures/background.png');*/
    z-index    : -2;
}

hr.main {
    position   : relative;
    top        : -5px;
    background : red; /*#353535;*/
    height     : 10px;
    width      : 100%;
    margin     : 0;
    padding    : 0;
    z-index    : -1;
}

table,tr,td {
    border-spacing : 0;
    border-collapse: collapse;
    padding        : 0 10px; /* No need to repeat. Same as 0 10px 0 10px */
}
img {
    border    : none;
}
h2 {
    color     : #d04242;
    font-size : 26px;
}

#content {
    margin    : auto;
    width     : 700px;
    background: #fff;
    margin-top: 80px;
    border    : 1px solid;
    padding   : 50px 30px;
}
#content_text {
    text-align : left;
    font-size  : 16px;
}
#footer {
    margin     : auto;
    font-size  : 14px;
    text-align : center;
    background : blue; /*url('http://cupido.g6.cz/pictures/background.png');*/
}
hr {
    margin  : 0;
    padding : 0;
}
/* Combine equal */
a.header:link,
a.header:visited {
    text-decoration : none;
    color           : #fff;
}
a.header:hover, 
a.header:active {
    color : #3cc8a8;
}