JSFiddle - React, Tailwind, and code Playground

by charliejsford

HTML

<body>
<div id="header-container">
	<div id="header-links">
    	<div class="left">Follow Us</div>
        <div class="right">right</div>
    </div>
    
    <!--<div id="header">
		<div class="header-left"><img src="images/phone_icon.png" width="323" height="58" /></div>
		<div class="header-right">RIGHT</div>
        <div class="logo"><img src="images/logo" width="409" height="138" /></div>
	</div>-->
    
	<header class="ex1">
		<div class="header-left"><img src="images/phone_icon.png" width="323" height="58" /></div>
		<div class="header-right">Shopping Basket</div>
		<div class="logo"><img src="images/logo" width="409" height="138" /></div>
	</header>
    
    <?php include 'includes/menu.php'; ?>
	<?php //include 'slider.php'; ?>
    <br /><br /><br /><br />
</div>

<div id="body-container">
    <div id="latest-products-box-left">PRODUCT 1</div>
    
    <div id="latest-products-box-right">PRODUCT 1</div>
</div>        

<div id="footer">&copy; Copyright <?php echo date("Y"); ?> The Beauty Baah Boutique<br />
The celebrities named or featured on thebeautybaahboutique.co.uk have not endorsed, recommended or approved any of the items offered on site.</div>
</body>

CSS

body,html {
	min-width:600px;
	height:100%;
	margin:0;
	padding:0;
	font-family:Calibri;
	overflow:hidden;
}
#header-container {
	width:100%;
	clear:both;
	position:relative;
}
#body-container {
	width:70%;
	margin:20px auto 0 auto;
	border:solid 1px #000000;
}
#header-links {
	width:100%;
}
#header-links .left {
	width:120px;
	float:left;
	padding:5px 10px 5px 10px;
}
#header-links .right {
	width:50px;
	float:right;
	padding:5px 10px 5px 10px;
}
#header {
	width:100%;
	height:160px;
}
header {
    width: 100%;
    min-width: 800px;
    height: 160px;
    overflow: auto;
}
.ex1 .header-left {
    display:inline-block;
    width: 33%;
    max-width: 190px;
    float: left;
	margin:50px 0 0 70px;
}
.ex1 .logo {
    width: 409px; /* width of the logo */
    margin:10px auto 0 auto;
}
.ex1 .logo img {
    display: block;
}
.ex1 .header-right {
    display:inline-block;
    width: 33%;
    max-width: 190px;
    float: right;
	margin:50px 70px 0 0;
}
span {
    margin:0 20px;
}
#latest-products-box-left {
	width:48%;
	height:250px;
	margin:10px 5px 20px 5px;
	display:inline;
	float:left;
	border:dashed #000000 1px;
}
#latest-products-box-right {
	width:48%;
	height:250px;
	margin:10px 5px 20px 5px;
	display:inline;
	float:right;
	border:dashed #000000 1px;
}
#footer {
	width:99%;
	position: relative;
	margin-top: -150px;
	padding:10px 10px 10px 10px;
	height: 80px;
	clear:both;
	text-align:center;
	background-color: #d7d7d7;
	color: #666666;
}