JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fresh As A Daisy : Interior Decor &amp; Design</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!---<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="bookmarkscroll.js"></script>-->
</head>

<body>
<div id="posfix">
<div id="width">
<div id="header">
<h1>Fresh As A Daisy Domestic Assistance And Decor Advice</h1>
<div id="navigation">
<a href="#welcomebox" id="home">Home</a>
<a href="#aboutbox" id="about">About</a>
<a href="#interiorbox" id="interior">Interior Design</a>
<a href="#home_org" id="home_org">Home Organisation</a>
<a href="#staging" id="staging">Home Staging</a>
<a href="#decor" id="decor">Decor Advice</a>
<a href="#contact" id="contact">Contact</a>

<!---navigation end--></div><!---end-->
<div id="phone">
+44 (0)7909 860 359<br />
<a href="#contact">Send us an email</a> 
</div>

<!---header end--></div><!---end-->
<!---100 width end--></div><!---end-->
<!---posfix--></div><!---end-->
<div id="wrapper">
<div id="floatleft">

<!-----------------------HOME------->

    <div class="contentbox" id="welcomebox">
<img src="http://www.erudit.com/faad/imageswelcome.jpg" alt="Welcome To Fresh As A Daisy"/>
</div>
<a name="homesection"></a>
<div class="contentbox" id="homebox">
<div id="intro">
<p>Fresh as a Daisy provide Interior Design, Home Organisation, Home Staging and Décor Advice for home owners throughout Leicestershire and Warwickshire.</p>
<p>We have many years’ experience dealing with Interior  Design, Home Organisation,Home Staging and Décor Advice for homes of all shapes and sizes and in several different companies.</p>
<p>Our staff are personable, friendly and helpful and can offer lots of advice and assistance in the following areas:</p>
 <!---intro end --></div><!---end-->
 <div id="homeleft">
<p><h3>Interior Design</h3>
Looking to change your home?...

CSS

@charset "utf-8";
body {
background:url(http://www.erudit.com/faad/images/bodybg.jpg);
font-family:georgia;
margin:0;
}

.clear {
clear:both;
}

#width {
background:url("http://www.erudit.com/faad/images/header.jpg") repeat-x scroll 0 0;
float:left;
height:177px;
width:100%;
display:block;
position:fixed;
}

#header {
height:177px;
width:900px;
margin-left:auto;
margin-right:auto;
background:url(www.erudit.com/faad/images/navbg.jpg) no-repeat;
position:relative;
}

#posfix {
position:relative;
z-index:1000;
}

#navigation {
bottom:16px;
float:left;
height:50px;
left:0;
position:absolute;
width:729px;
}

#navigation a:hover {
color:#000;
}

#contact {
right:9px;
}

#decor {
right:87px;
}

#staging {
right:198px;
}

#home_org {
right:310px;
}

#interior {
left:155px;
}

#about {
left:89px;
}

#home {
left:17px;
}

#wrapper {
margin-left:auto;
margin-right:auto;
width:900px;
position:relative;
z-index:0;
}

#floatleft {
float:left;
width:900px;
position:relative;
}

#phone {
float:right;
text-align:right;
color:#fff;
font-weight:700;
font-style:italic;
margin-top:10px;
font-size:14px;
}

#phone a {
color:#fff;
text-decoration:none;
}

#phone a:visited {
color:#fff;
}

#phone a:hover {
text-decoration:underline;
}

#header h1 {
font-size:1px;
position:absolute;
top:-100px;
}

.contentbox {

    float: left;
    padding-top: 200px;
    width: 894px;
    margin-top:20px;    
}

.contentboxinner {
      background:#F1F1F1;  
}

#welcomebox {
border:3px solid #1d0c03;
height:337px;
}

#homebox {
border:3px solid #63224b;
float:left;
}

#boxhead1 {
background:none repeat scroll 0 0 #63224B;
height:70px;
margin-bottom:20px;
margin-left:4px;
margin-top:4px;
width:885px;
float:left;
}

.contentbox h2 {
float:left;
color:#fff;
margin-left:10px;
font-weight:400;
}

#intro {
background:#63224b;
font-weight:700;
border-radius:5px 5px 5px 5px;
color:#FFF;
margin-bottom:10px;
margin-left:10px;
margin-top:10px;
width:854px;
float:left;
padding:10px;
}

#homeleft...