JSFiddle - React, Tailwind, and code Playground

by Ken Sprague

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Vegetables</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/site.css">
  </head>

  <body>
    <div id="wrapper">
      <div id="header">
        <h1>Vegetables</h1>
      </div>
      <nav class="sitenav">
        <ul>
          <li><a href="#">Home</a></li>
          <li class="youarehere"><a href="#">Grow</a></li>
          <li><a href="#">Buy</a></li>
          <li><a href="#">Cook</a></li>
          <li><a href="#">Eat</a></li>
        </ul>
      </nav>
      <div id="news">
        <aside>
          <h3>What's New</h3>
          <ul>
            <li>Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbage.</li>
            <li>catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.</li>
            <li>Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic.</li>
            <li>Jícama garlic courgette coriander radicchio plantain scallion cauliflower fava bean desert raisin spring onion chicory bunya nuts.</li>
            <li>Sea lettuce water spinach gram fava bean leek dandelion silver beet eggplant bush tomato.</li>
          </ul>
        </aside>
      </div>
      <div id="maincontent">
        <article>
          <h2>Growing Herbs Indoors</h2>
          <section>
            <h3>Basil</h3>
            <p class="basil"><img src="images/basil-250.jpg" alt="Basil"/>Chaya tepary bean elephant garlic swede sweet pepper tomato horseradish water chestnut drumstick good king henry mung bean. Bell pepper ahipa azuki bean bitter melon garden rocket chickpea, canna,
              swede. Tepary bean mung bean yacón, carrot catsear. Carrot ricebean avocado brussels sprout watercress lagos bologi bamboo shoot, garbanzo...

CSS

/* put your style below! */

/* ================================= */

/* below are styles I've provided for the navigation bar and the footer.  No need to change these  */

#wrapper {
  width: 80%;
  margin: 0 auto;
}

#header {
  width: 100%;
}

#maincontent {
  width: 50%;
  float: left;
}

p.basil {
  clear: right;
}

.basil img {
  float: right;
}

p.mint {
  clear: right;
}

.mint img {
  float: right;
}

#news {
  width: 22.5%;
  float: left;
  margin: 0 2.5% 0 0;
}

#resources {
  width: 22.5%;
  float: right;
  margin: 0 0 0 2.5%;
}

#footer {
  width: 100%;
}

.left {
  width: 33%;
  float: left;
  margin: 0 0 0 0;
}

.right {
  width: 33%;
  float: right;
  margin: 0 0 0 0;
}

.center {
  width: 33%;
  float: left;
  margin: 0 0 0 0;
}

nav.sitenav ul {
  list-style: none;
}

nav.sitenav li {
  display: inline-block;
  width: 8em;
  text-align: center;
}

nav.sitenav a {
  display: block;
  font-weight: bold;
}

nav.sitenav a:link,
nav.sitenav a:visited,
nav.sitenav a:hover,
nav.sitenav a:active {
  color: green;
  text-decoration: none;
  border-bottom: thin solid transparent;
}

nav.sitenav a:hover {
  border-bottom: thin solid green;
}

nav.sitenav li.youarehere a {
  background-color: #cdfecd;
  border-bottom: thin solid green;
}

footer {
  border-top: thin solid green;
}