JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<!DOCTYPE html>
<body>
   <div class="body">
       <div class="header">
           <a href="#"><img class="logo" src="img/logo.jpg"></a>
           <ul class="menu">
               <li><a href="#">Aktuelles</a></li>
               <li><a href="#">Philosophie</a></li>
               <li><a href="#">Besonderheiten</a></li>
               <li><a href="#">Partner</a></li>
               <li><a href="#">Kontakt</a></li>
               <li><a href="#">Impressum</a></li>
           </ul>
       </div>
       <div class="content">
           <div class="content-img"><img src="img/content.jpg" alt=""></div>
           <div class="leftbar">
               <h1>Sehr geehrte Patienten,</h1>

<p>wir freuen uns, dass Sie sich für unsere Praxis für moderne Zahnheilkunde interessieren – herzlich willkommen!</p>

<p>Die Homepage soll Ihnen einen ersten Einblick in das Leistungsspektrum und die Behandlungsphilosophie vermitteln. Es wird Sie interessieren, wie schonend und sorgsam ein Zahnarztbesuch sein kann.</p>

<p>Sie sind herzlich eingeladen, sich bei einem Besuch in meiner Praxis mit ihren Fragen und Wünschen anzuvertrauen.</p>


<p>Ihre Dr. Dr. Günther Chmelitschek und Dr. Thomas Chmelitschek</p>
           </div>
           <div class="rightbar">
               <h1>Sprechzeiten</h1>

<p>Zahnarztpraxis Dr. Dr. Chmelitschek<br>
Stollstr. 6<br>
83022 Rosenheim</p>

<p>Mo-Fr von 08:00-18:00 Uhr<br> 
und nach Vereinbarung</p>
           </div>
       </div>
       <div class="footer">
           <p>Zahnarztpraxis Chmelitschek © 2011</p>
       </div>
   </div>
</body>

CSS

*{
	margin: 0;
	padding: 0;
}
img{
    border: none;
}

body{
    background: #f5f5f5f5 url(img/bg.jpg) top repeat-x;
    font: 12px Arial;
    color: #555;
    line-height: 1.8;
}

.body{
    width: 755px;
    margin: 0 auto;
}

.header{
    padding: 30px 0 0 0;
}

.logo{
    margin: 0 auto 20px auto;
    display: block;
}

.menu{
    display: table;
    width: 100%;

    list-style: none;
    background: #fff;
    font-size: 14px;
    border-left: 1px solid #f3f3f3;
    border-right: 1px solid #f3f3f3;
    border-top: 1px solid #f3f3f3;
    border-bottom: 3px solid #9dc5f0;
    overflow: hidden;

}

.menu li{
    display: table-cell;

    //float: left;
    border-left: 1px solid #f3f3f3;
    padding: 15px 25px;
}