JSFiddle - React, Tailwind, and code Playground

HTML

body {
  font-size: 1.1em;
  font-family: Arial, sans-serif;
  background-color: #e1d387;
}

#container { 
  width: 940px;
  margin: 0 0 auto;
  border-width: 1px;
}

CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Griff Jewelers</title>

<!-- 
Tutorial 6, Case Problem 2
Your Name:
Today's Date:
Filename: griffnew.htm
-->

<style type="text/css">

@import url("link.css");
* {
  margin: 0;
  padding: 0;
}

body {
  font-size: 1.1em;
  font-family: Arial, sans-serif;
  background-color: #e1d387;
}

#container { 
  width: 940px;
  margin: 0 0 auto;
  border-width: 1px;
}

#wrapper {
  width: 930px;
  background-image: url (back.gif);
  margin-bottom: 10px;
  overflow: auto;  /* needed for Firefox */
  display: block;
}


</style>




</style>

</head>

<body>

<div id="container"> 

<div id="header"> 
<p><img src="grifflogo.gif" alt="Griff's Jewelry logo" width="930" height="150" /></p>
</div> <!-- end header -->

<div id="navbar"> <!-- styles for the navbar are imported from links.css -->
<ul>
  <li><a href="#">Gold</a></li>
  <li><a href="#">Silver</a></li>
  <li><a href="#">Diamonds</a></li>
  <li><a href="#">Gift Cards</a></li>
  <li><a href="#">Layaway Plans</a></li>
  <li><a href="#">Directions</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</div> <!-- end navbar -->
         
<div id="wrapper"> 

<div id="sidebar"> 
<ul>
  <li>Charms &ndash; Under $20</li>
  <li>Engagement Rings &ndash; Under $100</li>
  <li>Wedding Rings &ndash; Under $80</li>
  <li>Pendants &ndash; Under $10</li>
</ul>
 
<div id="special">  <!-- the nested divs begin here -->

<p>SPECIAL!</p>

<div id="content">
<p>This month only &ndash; all diamond pendants are 50% off original price.</p>
</div> <!-- end content -->

</div> <!-- end special -->  <!-- the nested divs end here -->

</div> <!-- end sidebar  -->
     
<div id="main"> 

<h3>Make Griff's Your One Stop for Jewelry</h3>
<p>We know that times are tough for many people, but that doesn't mean that...