JSFiddle - React, Tailwind, and code Playground

HTML

<body>      
        <div class="container">
            <div class="MainHeader">

            </div>
            <div class="logged_container">
                You are Logged in as <span style='font-weight:bold;'>Ryan</span> (<a href='logoff.php'>Log Out</a>)
            </div>
            <div class="navigation_container">          
                <a href="main.php">
                    <img src="img/test.png" alt="" height="16" style="vertical-align:top; padding-right:5px;">Home              
                </a>
            </div>


    <div class='content'>
        <div class='contentTableView' style="flex: 1; flex-direction: column;  min-height:100%; height: 100%; position: relative;">
            <span class="contentHeader">Title</span>
            <div id="map" class="map" style="float:left; width: 40%; margin-top: 1%; height:90%; min-height:90%; margin-left:20px; border:1px solid #0a639d;"></div>

            <div id="controls" class="controls" style="float:left; width: 40%; margin-top: 1%; height:90%; min-height:90%; margin-left:10%; border:1px solid rgb(204, 204, 204); background-image: url('img/bms47.png');"></div>

        </div>
    </div>      


        <div class="footer">
            Footer Text
        </div>
    </div>
</body>

CSS

PASTEBINnew pastetrends API tools faq 
search...
 

Guest User
-
      
Public Pastes
Untitled
15 sec ago
Untitled
20 sec ago
Untitled
22 sec ago
F1 2015 Glitch/Ide...
24 sec ago
BDO 1-50
24 sec ago
Untitled
25 sec ago
reactJS ajax
JavaScript | 30 sec ago
Untitled
31 sec ago
Pastebin PRO Accounts WINTER SPECIAL! For a limited time only get 40% discount on a LIFETIME PRO account!
SHARE
TWEET

 Untitled
 A GUEST   FEB 23RD, 2016   2   NEVER
AD-BLOCK DETECTED - PLEASE SUPPORT PASTEBIN BY BUYING A PRO ACCOUNT
For only $2.95 you can unlock loads of extra features, and support Pastebin's development at the same time.
pastebin.com/pro
rawdownloadcloneembedreportprint CSS 21.70 KB
html,body
{
    height: 100vh;
}
 
body
{
   display: table;
   margin: 0 auto;
   font-family: Tahoma,Verdana,Segoe,sans-serif;
}
 
.container
{  
   
    height: 98vh;
    vertical-align: middle;
    width: 98vw;
    min-width:1024px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 1vh;
    display: flex;
    flex-direction: column;
}
 
.MainHeader
{
    height: 75px;
    background-color: #0a639d;
    border-radius: 5px 50px 0px 0px;
    display: block;
    background-image: url(../img/bms3.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
 
.foreground-image {
    vertical-align: top;
    border: 0px;
    position: relative;
    float:right;
    padding-right:65px;
    z-index: 1;
}
 
.MainHeader h1
{
    background-image: url("../img/bms75.gif");
    color: #FFF;
    font-size: 18px;
    line-height: normal;
    font-weight: normal;
    padding-top: 25px;
    padding-left: 7px;
   
}
 
.logged_container
{
    background-image: url("../img/bms76.gif");
    text-align: right;
    padding-right: 5px;
    font-weight: normal;
    font-size:12px;
    height:20px;
}
 
.logged_container a
{
    color: #26AB9A;
    text-decoration: none;
}
 
.logged_container a:hover
{
    color: #26AB9A;
   ...