JSFiddle - React, Tailwind, and code Playground

by Darko

HTML

<div class="container">
    <div class="title_strip">
        <img src="headline_text.png">
    </div>
    <div class="hdr_img_space">
        <img src="leaf_header.jpg">
    </div>
    <div class="lh_col">
        <p align="center">ADMINISTRATION
            <br/>[WEBMASTER]</p>
    </div>
    <div class="rh_image"></div>
    <div class="main_content">
        <p>This is the location for the main administrative page content, and will hopefully be able to contain all the necessary text, even if it over-runs</p>
    </div>
    <br style="clear: both">
</div>

CSS

body {
    margin: 0px;
    padding: 0px;
    background-color: #200542;
}
p {
    color: #CCCCCC;
    font-family: arial, sans-serif;
    font-size: 14pt;
    line-height:1.4em
}
.container {
    width: 1000px;
    min-height: 600px;
    max-height: 2200px;
    margin: 8px auto 0 auto;
    background: #333333;
    padding: 0px;
}
.main_content {
    min-height: 600px;
    max-height: 2000px;
    margin-left: 0px;
    padding-top: 20px;
    background: #333333;
}
.lh_col {
    float: left;
    width: 200px;
    min-height: 600px;
    max-height: 2000px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 24px;
    margin: 0;
    background: #333333;
}
.rh_image {
    min-height: 620px;
    max-height: 2000px;
    float: right;
    padding-top 20px;
    padding-left: 20px;
    padding-right: 20px;
    background: #333333;
}
.rh_image img {
    width:200px;
    height:auto;
}
img {
    display: block;
}
.rh {
    margin-top: 40px;
}