JSFiddle - React, Tailwind, and code Playground

by cs_brandt

HTML

<body>
   <div class="container">
      <header>
         <nav>
            <ul class="top-nav">
               <li>
                  <a href="#" class="top-link">Web Design</a>
                  <ul class="nav-menu">
                     <li><a href="#">Web Design</a></li>
                     <li><a href="#">GUI</a></li>
                     <li><a href="#">Mobile Dev</a></li>
                     <li><a href="#">Freelance</a></li>
                     <li><a href="#">Resources</a></li>
                     <li><a href="#">Inspiration</a></li>
                  </ul>
               </li>
               <li>
                  <a href="#" class="top-link">GUI</a>
                  <ul class="nav-menu">
                     <li><a href="#">Web Design</a></li>
                     <li><a href="#">GUI</a></li>
                     <li><a href="#">Mobile Dev</a></li>
                     <li><a href="#">Freelance</a></li>
                     <li><a href="#">Resources</a></li>
                     <li><a href="#">Inspiration</a></li>
                  </ul>
               </li>
               <li>
                  <a href="#" class="top-link">Mobile Dev</a>
                  <ul class="nav-menu">
                     <li><a href="#">Web Design</a></li>
                     <li><a href="#">GUI</a></li>
                     <li><a href="#">Mobile Dev</a></li>
                     <li><a href="#">Freelance</a></li>
                     <li><a href="#">Resources</a></li>
                     <li><a href="#">Inspiration</a></li>
                  </ul>
               </li>
               <li>
                  <a href="#" class="top-link">Graphic Design</a>
                  <ul class="nav-menu">
                     <li><a href="#">Web Design</a></li>
                     <li><a href="#">GUI</a></li>
                     <li><a href="#">Mobile Dev</a></li>
                     <li><a href="#">Freelance</a></li>
                     <li><a href="#">Resources</a></li>
  ...

CSS

body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
   background-color: #f6f6f6;
   margin: 1.5em 3em;
   padding: 0;
}

a {
   color: #5a7a9b;
   text-decoration: none;
}

main {
   display: flex;
}

main > section {
   padding-right: 2em;
   border-right: 1px solid LightGrey;
}

aside > div {
   padding: 0.5em 2em;
}

.container {
   background-color: white;
   padding: 0 2em;
   border-radius: 4px;
   border: 1px solid LightGrey;
}

header > nav {
   width: 100%;
   padding: 0.5em 0;
}

ul.nav-menu > li {
   padding: 0.3em 0;
}

hr {
   background-color: LightGrey;
   height: 1px;
   border: 0;
}

ul.nav-menu {
   display: none;
   position: absolute;
   left: 0;
   top: 100%;
   background-color: #507aa5;
   border-radius: 0 4px 4px 4px;
   padding: 1em 0;
   min-width: 12em;
   font-size: 0.8em;
}

ul.top-nav {
   padding: 0.3em 0;
}

ul.top-nav li {
   list-style: none;
   border-radius: 4px 4px 0 0;
   padding: 0.3em 0.3em;
}

ul.top-nav > li {
   float: left;
   position: relative;
}

ul.top-nav li:hover {
   background-color: #507aa5;
}

ul.top-nav li:hover a {
   color: white;
}

ul.top-nav li:hover ul {
   display: block;
}

ul.top-nav a {
   cursor: pointer;
   color: black;
   text-decoration: none;
   padding: 0 0.5em;
}

.row {
   display: flex;
   margin: 2em 0;
}

.row h2 {
   margin-top: 0;
}

.thumbnail {
   padding-right: 1em;
}

.left {
   float: left;
}

.right {
   float: right;
}