JSFiddle - React, Tailwind, and code Playground

by slevin

HTML

<header class="headup">
     <h1>  <br>this <br>is <br>header <br></h1>

     <h2>

      <a href="menu1.php">menu1</a>		|	<a href="menu2.php">menu2</a>	|	<a href="menu3.php">menu3</a>

  </h2>

</header>
<body>
    <div class="content">
        <div id="icon">
            <img id="headim" src=https://www.webkit.org/blog-files/acid3-100.png style='width: 50%; '>
        </div>
        <input type="button" class="formButtonfront" value="go to another page" />
    </div>
</body>
<footer>
    <div class="foot"> <small> <br>
    (c) 2012 </small> 
    </div>
</footer>

CSS

header {
    padding-left:5%;
    padding-right:5%;
    margin:auto;
    width: 50%;
    height:auto;
    border-left:1px solid gray;
    border-right:1px solid gray;
    border-top:1px solid gray;
    border-bottom:1px solid gray;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    background-color:#0099FF;
    text-align: center;
    padding-bottom:0%;
    overflow:auto;
}
.foot {
    padding-left:5%;
    padding-right:5%;
    padding-bottom:1%;
    padding-top:0%;
    margin:auto;
    width: 50%;
    height:auto;
    border-left:1px solid gray;
    border-right:1px solid gray;
    border-top:1px solid gray;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    background-color:#0099FF;
    text-align: center;
    clear:both;
    font-family: Arial, Verdana;
    color:#CC0000;
    font-size:0.75em;
}
h1 {
    margin-top: 0px;
    margin-bottom: 0 %;
    padding-top: 0 %;
    margin-left: 0 %;
    margin-right: 0 %;
    padding-left: 0 %;
    padding-right: 0 %;
    font-family: Arial, Verdana;
    font-size: 1.5em;
    text-align: right;
    color: #CCCCCC;
    float:right;
    text-shadow: 1px 1px #fff;
}
h2 {
    padding-bottom: 0 %;
    padding-top: 3 %;
    font-family: Arial, Verdana;
    font-size: 1.125em;
    color: #476B00;
    text-align:right;
    margin-top:3%;
    font-family: Arial, Verdana;
    float:right;
}
.content {
    border:1px solid gray;
    border-radius:10px;
    padding-left:5%;
    padding-right:5%;
    position: static;
    margin: auto;
    margin-top:2%;
    margin-bottom:2%;
    width: 50%;
    text-align: left;
    background-color:#fff;
    font-family:Arial, Verdana;
    font-size:0.875em;
}
#icon {
    width:100%;
    height:50%;
}

.formButtonfront {
 width: auto;
border:1px solid gray;
border-radius:7%;
float:right;
font-size:0.875;

 }