JSFiddle - React, Tailwind, and code Playground

by Ken Sprague

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Vegetables</title>
    <meta charset="utf-8" />

    <style type="text/css">
        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;
        }
        
        section,
        aside,
        article,
        footer {
            clear: both;
        }
        
        footer {
            border-top: thin solid green;
        }
    </style>
</head>

<body>
    <header>
        <h1>Vegetables</h1></header>
    <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>
    <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...

CSS

/* put your style below! */





/* ================================= */
/* below are styles I've provided for the navigation bar and the footer.  No need to change these  */
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;
}