JSFiddle - React, Tailwind, and code Playground

by Alireza Safian

HTML

<div class="main-wrapper">
    <header class="main-header">
         <h1 id="main-logo"><a href="#"> Food </a></h1>

        <ul id="main-nav">
            <li> <a href="#">How Much </a>

            </li>
            <li> <a href="#">Nutrition </a>

            </li>
            <li> <a href="#">How Often </a>

            </li>
        </ul>
    </header>
    <div class="container">
        <div class="inner-wrapper left">
             <h2 id="left-header">Food Source</h2>

            <div class="left-panel">
                <p>The first key to keeping the tracked changes with the text being copied is to make sure the “Track Changes” feature is turned off. To do this, click the “Review” tab on the ribbon. If the “Track Changes” button in the “Tracking” section is highlighted in blue, the “Track Changes” feature is on. Click the lower-half of the “Track Changes” button and select “Track Changes” from the drop-down menu. The “Track Changes” button should not be highlighted when the feature is off</p>
            </div>
        </div>
        <div class="inner-wrapper right">
            
<h2 id="right-header">Nutritional Facts</h2>

            <div class="right-panel">
                <p>The first key to keeping the tracked changes with the text being copied is to make sure the “Track Changes” feature is turned off. To do this, click the “Review” tab on the ribbon. If the “Track Changes” button in the “Tracking” section is highlighted in blue, the “Track Changes” feature is on. Click the lower-half of the “Track Changes” button and select “Track Changes” from the drop-down menu. The “Track Changes” button should not be highlighted when the feature is off</p>
            </div>
            <div class="current-day">
                <p>Today is November 10th, 2015</div>
        </div>
    </div>
</div>
</body>

</html>

CSS

body {


        height: 100%;


        background-color: green;


    }


    header {


        margin-top: -8px;


        margin-left: -10px;


        padding: 10px;


        background-color: darkgrey;


        width: 100%;


    }


    #main-logo, #main-nav, #main-nav li {


        display: inline-block;


        margin-top: 0px;


        margin-bottom: 0px;


    }


    #main-logo, #main-nav li {


        border-radius: 5px;


        list-style-type: none;


    }


    #main-logo {


        background-color: forestgreen;


        margin-right: 30px;


    }


    #main-nav li {


        background-color: gold;


        margin-right: 10px;


    }


    #main-logo a, #main-nav li a {


        text-decoration: none;


        text-align: center;


    }


    #main-logo a {


        padding: 10px 20px;


        color: gold;


    }


    #main-nav li a {


        color: forestgreen;


        padding: 20px 40px;


    }


    .container {


        display: inline-block;


        width: 100%;


        min-height: 550px;


    }


    #left-header {


        max-width:40%;


        margin-left: 3%;


        color: black;


        padding: 0px;


    }


    #right-header {


        max-width:40%;


        margin-left: 10%;


        color: black;


        padding: 0px;


    }


    .left-panel {


        border: 2px solid black;


        width: 100%;


        min-height: 300px;


        display: inline-block;


        margin-left: 3%;


        background-color: gold;


    }


    .right-panel {


        border: 2px solid black;


        width: 100%;


        min-height: 300px;


        display: inline-block;


        margin-left:10%;


        background-color: gold;


    }


    .current-day {


        width: 40%;


        margin-left: 2.5%;


    }


    .inner-wrapper {


        float: left;


        width: 50%;


    }