JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Pacific Trails Resort</title>
<link rel="stylesheet" media="only screen and (max-width: 480px)" href="Pacific.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<div class="wrapper">
        <header>
        <h1>Pacific Trails Resort</h1>
        </header>
	<div id="nav">
<ul>
   <li> <a href="index.html">Home</a></li>
	<li> <a href="yurts.html">Yurts</a></li>
	<li> <a href="activities.html">Activities</a></li>
	<li> <a href="reservations.html">Reservations</a></li>
</ul>
	</div>
	<div id="content">
	<h2>Enjoy Nature in Luxury</h2>
<img src="coast.jpg" height="250" width="320" alt="coast">
	<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in Serenity with panoramic views of the Pacific Ocean</p>

	<ul>
		<li>Private yurts with decks overlooking the ocean</li>
		<li>Activities lodge with fireplace and gift shop</li>
		<li>Nightly fine dining at the Overlook cafe</li>
		<li>Heated outdoor pool and whirlpool</li>
		<li>Guided hiking tours of the redwoods</li>
	</ul>
<div class="clear">			
		<br />Pacific Trails Resort
 		<br />12010 Pacific Trails Road
 		<br />Zephyr, CA 95555
 		<br /><a id="mobile" href="tel:888-555-5555">888-555-5555</a>
		<br /><span id="desktop">888-555-5555</span>
</div>
<div id="footer">
Copyright &copy; 2013 Pacific Trails Resort
<br><a href="[email protected]">[email protected]</a>
</div>
</div>
</div>
</body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */
body {background-image: none;
		color: #000000; margin:0; padding: 0;
		font-family: arial, verdana, sans-serif;}
h1 {background-image: url(sunset.jpg); background-color: #000033;
	background-position: right; padding-left: 0.3em; background-repeat: no-repeat; height:20px; margin-bottom: 0;
	margin: 0;
	font-size: 1.5em;
	padding-left: 0.3em;
	color: #ffffff;
	line-height: 120%;
	font-family: Georgia, "Times New Roman", serif;}
h2 {color: #3399cc;
	font-family: Georgia, "Times New Roman", serif;}
h3 {color: #000033;}
#content {padding-left: 20px; padding-top: 0.1em; padding-right: 0; padding-bottom: 0; padding-left: 0.4em; background-color: #FFFFFF; margin-left: 0; font-size: 90%;}
#content ul {list-style-position: outside; }
#content img { float: none; padding-right: 0; display: none;}
.clear { clear:both; padding-top: 0;}
dt {color: #00ff00;}
#nav {font-weight: Bold; float: none; width: 10px; padding: 0; background-color: #90c7e3; margin: 0;}
#nav a {text-decoration: none; display: block; padding: 0.2em; font-size: 1.3em; border-bottom: 1px #330000;}
#nav a:link {color: #000033; }
#nav a:visited {color: #344873; }
#nav a:hover {color: #FFFFFF; }
#nav ul { list-style-type: none; margin:0; padding: 0; }
.resort {color: #000033; font-size: 1.2em; }
#footer {font-size: .70em; font-style: italic; text-align: center; padding: 0; Margin: 0;}
.wrapper {background-color: #90C7E3; 
	margin-left: 0; 
	margin-right: 0;
	width: 100%; 
	min-width: 0; 
	-webkit-box-shadow: 
	5px 5px 5px #1e1e1e; 
	-moz-box-shadow: 5px 5px 5px #1e1e1e;
	box-shadow: 5px 5px 5px #1e1e1e;
	}
#mobile { display: inline;}
#desktop { display: none;}