JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Spec Tech</title>
    <link href="newStyle.css" rel="stylesheet" type="text/css" /> <!--style-->
    <script type="text/javascript" src="script.js"></script>

</head>

<body >
    <div id="header">
        <div id="spam" class="imgContainer"></div>
        <div class="imgShadow" id="imgShadow"></div>
        <a href="index.html">
            <img src="http://i787.photobucket.com/albums/yy158/PresidentPanda007/logo.png" class="image" id="img" />
        </a>
    </div>
    <div id="container" class="container">
        <div id="rounded" class="center">
            this is the internal content for the page
            this is the internal content for the page
            this is the internal content for the page
            this is the internal content for the page
            this is the internal content for the page
            this is the internal content for the page
            this is the internal content for the page
            this is the internal content for the page
            this is the internal content for the page
        </div>
    </div>
    <div class="bottom">
        the footer is here
    </div>

</body>

</html>

CSS

@charset "utf-8";
/* CSS Document */

#header
{
    /*opacity:.75;*/
    background-color:#c1c1c1;
    height:50px;
    width:100%;
    position:fixed;
    top:0px;
    left:0px;
    z-index:1;
    opacity:.75;
}

.container
{
    position:relative;
    margin-top: 70px;
    width:100%;
}

.bottom
{
    position:relative;
    height: 200px;
    background: blue;
    opacity: .50;
}

.imgContainer
{
    position:absolute;
    width:130px;
    height:65px;
    margin-top:0px;
    margin-left:-3px;
    background-color:#000000;
    z-index:1;
    -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
    -ms-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
}


.image
{
    /*width:130px;
    height:80px;*/
    position:absolute;
    margin-top:0px;
    margin-left:-3px;
    background-color:transparent;
    -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
    -ms-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
    /*border:solid;
    border-color:transparent;
    border-left:thick;
    */
    z-index:2;
}

body
{
    background-image:url('http://i787.photobucket.com/albums/yy158/PresidentPanda007/new.jpg');
    background-size:100% 1000px;
}

#rounded
{
    position: relative;
    width:500px;
    padding: 30px;
    min-height:500px;
   /* background:url('http://i787.photobucket.com/albums/yy158/PresidentPanda007/rounded.png') #000;*/
    background-repeat:no-repeat;
    background: #EEE;
    border-radius: 50px;
    z-index:0;
    margin: 20px auto;
}

#rounded.hover
{
    border:thick;
    border:#000000;
}

.center
{
    margin: auto;    
}