JSFiddle - React, Tailwind, and code Playground

by Fredy Sudhir

HTML

<body><div class="external-box">
<div class='wrapper'><img src="logo.jpg" class="logo"><img src="cartello.png" class="tagline">
<div class="menu"><strong>
<a class="menulink" href="<?php echo $this->baseUrl();?>/index">home</a>  
<a class="menulink" href="<?php echo $this->baseUrl();?>/chisiamo">chi siamo</a>  
<a class="menulink" href="<?php echo $this->baseUrl();?>/dovesiamo">dove siamo</a>  
<a class="menulink" href="<?php echo $this->baseUrl();?>/camereservizi">camere e servizi</a>  
<a class="menulink" href="<?php echo $this->baseUrl();?>/prezzi">prezzi</a>  
<a class="menulink" href="<?php echo $this->baseUrl();?>/fotogallery">fotogallery</a></strong></div>
<div class="nastro"><i><br>Un luogo di pace immerso nella natura,<br> a due passi da Ferrara</i></div>
<div class="content">
<h1><strong>Dove Siamo</strong></h1>

<p>Il B&B Ai Prati &egrave; situato sulla Statale SS16 Adriatica, in una posizione strategica nella provincia di Ferrara, facile e veloce da raggiungere sia dalla autostrada A13 
che dalla superstrada Ferrara-Lidi ferraresi, senza dover affrontare il traffico della citt&agrave;..</p>
<p>Questi sono i principali centri e punti di interesse pi&ugrave; vicini a noi:<br>
8 km dal centro di Ferrara<br>
11 km dal polo ospedaliero di Cona<br>
30 km da Bologna<br>
50 km da Ravenna<br>
40 km da Comacchio e dai suoi 7 lidi<br>
80 km da Venezia<br>
60 km da Padova<br>
</p>
<h1><strong>Come Arrivare</strong></h1>
<p>
<strong>Da Bologna</strong><br>
Prendere l’uscita FERRARA SUD sull’autostrada A13 Bologna-Padova,proseguire diritto per circa 5 km e prendere l’uscita STATALE SS 16 ADRIATICA proseguire diritto per la statale per circa 6 km, prendere a riferimento il secondo distributore di carburanti Agip e dopo 600 metri svoltare in via dei Prati e raggiungere il numero 17
<br><br>
<strong>Da Comacchio-Lidi Ferraresi</strong><br>
Prendere la superstrada Ferrara-Lidi ferraresi e prendere l’uscita STATALE SS 16 ADRIATICA, proseguire diritto per la statale per...

CSS

html, body {
    height: 100%;
	background-image:url(sfondo_tile.jpg);
	background-repeat:repeat;
}
.menu a{
	color: #000000;
}
.menu a:visited{
	color: #000000;
}
.menu a:hover{
	color: #ff3c12;
}
.external-box {
	background: #f8f5f0;
	width:840px;
	padding: 0px;
	margin:0 auto;
	margin-top: 60px;
	-moz-box-shadow: 0 0 25px #333333;
	-webkit-box-shadow:0 0 25px #333333;
	box-shadow: 0 0 25px #333333;
}
.wrapper {
    height: 500px; // remove this
    margin: 0 auto; 
    overflow:hidden;
}
.push {
    height: 142px; /* .push must be the same height as .footer */
}
.logo {
	float: left;
	clear:left;
	position: relative;
	margin-top:30px;
	margin-left: 30px;
}
.tagline {
	float:right;
	clear: right;
	position:relative;
	margin-top:30px;
	margin-right: 30px;
}
.menu{
	float: left;
	clear:left;
	font-family: Georgia, Garamond;
	font-variant:small-caps;
	position:relative;
	margin-top: 30px;
	margin-bottom: 30px;
}
.menulink{
	position:relative;
	display:inline;
	margin-left: 30px;
}
.nastro{
	position: relative;
	display:block;
	float: left;
	clear:left;
	height:80px;
	width:840px;
	text-align: center;
	color: #ffffff;
	background-image: url(nastro_arancio_home.jpg);
    font-family: Georgia, Garamond;
	font-size: 18px;
}
.content{
	position: relative;
	display:block;
	float:left;
	padding: 30px;
}
.content h1{
	color: #61340a;
	font-size: 18px;
}
#center {
	margin: 30px;
}
.line{
	height: 10px;
	width:840;
	background-color: #4b3e2d;
}
.footer{
	height: 122px;
	width:840px;
	text-align: center;
	color: #ffffff;	
	margin-top: 30px;
	border-top: #4b3e2d 5px solid;
	background-image: url(nastro_arancio_pedice.jpg);
    font-family: Georgia, Garamond;
	font-size: 10px;
}
.galleryitem{
	float:right;
	display:block;
	margin-left: 30px;
	margin-bottom: 30px;
	clear:right;
}