JSFiddle - React, Tailwind, and code Playground

by Valeri Dage

HTML

<body>
    <div id="header">
        <h1 id="headTxt"> What you need to do for a brighter future </h1>
    </div>
    <div id="menu">
        
    </div>
    <div id="content">
        <h3>TO DO LIST</h3>
        <ul>
            <li>Eat <strong>Lots</strong> Of <abbr title="Rich in Vitamin K, P, PP, C, A">Broccolli</abbr> <dfn>(hover over 'Broccolli' for more info)</dfn></li>
            <li>Eat <b>Fruits</b> And <em>Vegetables</em></li>
            <li>Drink at least <mark>5 liters</mark> of water every morning</li>
        </ul>
        <hr>
        <h3>Watch This Picture For 30 Minutes</h3>
        <div id="image">
            <img id="forest" src="http://goo.gl/811F4l" width="320" height="180"/>
        </div>
        <div id="imageDesc">
            <h4>On The Picture We See:</h4>
            <ul>
                <li>A Big Tree With Yellow Leaves</li>
                <li>A Small Bush In The Background</li>
                <li>Really Nice Grass</li>
            </ul>
        </div>
    </div>
    <div id="footer">
        <p id="author">Author: Valeri Hristov</p>
    </div>
</body>

CSS

#header {
    position:fixed;
    margin:-10px 10px 10px 10px;
    width: 97%;
    height: 12.4%;
    background-color: #006699;
    border-radius: 5px;
    text-align: center;
    font-family: serif;
    color:#FFCCCC;
    z-index: 1;
}

#header:hover {
    background-color: #FF66CC;
}

#menu {
    position: relative;
    width: 15%;
    height: 500px;
    margin-top: 80px;
    margin-left: 10px;
    background-color: #FFCC00;
    float: left;
    border-radius: 5px;
}

#menu:hover {
    background-color: #FF3300;
}

#content {
    position: relative;
    height: 500px;
    width:82.5%;
    margin-right: 12px;
    margin-top: 80px;
    margin-bottom: 10px;
    background-color: #339999;
    float: right;
    border-radius: 5px;
}
    
#footer {
    position:relative;
    height: 70px;
    width: 98.5%;
    margin: 10px 12px 0px 10px;
    background-color: #00CCCC;
    clear: both;
    border-radius: 5px;
}

#content h3 {
    margin-left: 10px;
    border:0px;
}

#image {
    margin-left: 10px;
    float:left;
}
#imageDesc {
    text-align: center;
}

#author {
    text-align: center;
    margin-top:300px;
    font-family: cursive;
    font-size: 20px;
}