JSFiddle - React, Tailwind, and code Playground

by NicoO

HTML

<div id="wrap">
	<div id="header">
		<span class="claimer">Angus Animal Sanctuary</span>
	</div>

	<ul id="navigation"> 
    	<li><a href="?">Home</a></li>
    	<li><a href="?">About us</a></li>
    	<li><a href="?">Register</a></li>
    	<li><a href="?">Contact us</a></li>	   
	</ul>
    
    <div id="slideshow">
        <img name="slide"  src="http://www.katellaclinic.com/clients/6909/images/bigstock_Group_Of_Pets_Together_In_Fron_8258872.jpg" />
    </div>
	
    <div id="content">
        <div id="left">
        <div class="box">
		<h3>Welcome to Angus Animal Sanctuary</h3>
		<p>Angus Animal Sanctuary is a small animal centre located in Birmingham, UK.  Our focus is on more traditional pets like cat, dogs, rabbits and birds. The objectives of this association are to take in and re-home animals and provide a special living environment. </p>
		<p>An animal adoption makes a unique gift idea for yourself or someone special and provides a valuable contribution to the running costs of Angus. With the help of our staff and volunteers we provide a special and loving atmosphere to help all our animals adapt and find permanent, loving new homes.</p> 
		<p>All potential adopters are interviewed and home vetted.</p> 
	</div>
    </div>
	
	<div id="right">
        
        <div class="box">
		<form action="form1.php" method="login">
  			<h3>Login</h3> 
       		<label for="name">Email*:</label> 
       		<input type="text" value="" required="" placeholder="[email protected]" maxlength="20" size="15" id="name" name="name" />
	    
        	<label for="password">Password*:</label> 
        	<input type="password" value="" required="" placeholder="" maxlength="20" size="15" id="password" name="password" />
	    	<input type="Submit" value="Sign In" name="Submit" /> 
		</form>
	</div>
 </div>
    </div>
 	 
 	<div id="footer">
		<marquee><b>All Content Copyright 2014 Angus All Rights Reserved! Angus Animal Sanctuary website by Amrit Doel</b></marquee>
	</div>

</div>

CSS

*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#wrap
{
    width: 950px;
    margin: auto;
}

#header
{
    background-color: #C8C800;
    border: 1px solid #999999;
    border-radius: 5px;
    box-shadow: 0 0 30px #999999;
    margin: auto;
    padding: 75px;
    text-align: center;
}

#navigation
{
    display: block;
    margin:20px 0px;
    padding:0;
    list-style: none;
    text-align: center;
    background-color: #C8C800;
    border-radius: 5px;
    border: 1px solid #999999;
    box-shadow: 0 0 20px #999999;
}

#navigation > li
{
    display: inline-block;
    vertical-align: middle;
}

#navigation > li A
{ 
    font-weight:bold;
    font-style: italic;
    display: block;
    padding: 10px;
    font-size: 20px;
    color: #000;
    text-decoration: none;
    
}


#navigation > li A:hover,
#navigation > li A:focus
{
    background-color: #000;
    color: #FFF;
}

#slideshow
{
    border:1px solid black;
    clear: left;
    margin-bottom: 15px;
    text-align: center;
    background-color: white;
    border-radius: 5px;
}

.box
{
    background-color: #FBFBE8;
    border: 1px solid #999999;
    border-radius: 5px;
    box-shadow: 0 0 30px #999999;
    padding: 15px;
}

.claimer
{
    font-size: 50px;
    font-style: italic;
}

#left
{
    width:71.5%;
    float: left;
    padding-right: 20px;
}

#right
{
    margin-left: 71.5%;
}

#content:after 
{
    content: "";
    display: table;
    clear: both; 
}

 

#footer 
{
    background-color: #C8C800;
    border-radius: 5px;
    box-shadow: 0 0 30px #999999;
    margin-top: 15px;
}

h3
{
    display: block;
    text-align: center;
}