JSFiddle - React, Tailwind, and code Playground

by Alex Fogarty

HTML

<!DOCTYPE html>
<html>

<head>
  <title>Sole Shoes</title>
  <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet'>
  <link rel='stylesheet' type='text/css' href='css/styles.css'>
</head>

<body>

  <!-- Navigation -->
  <nav>
    <div class='container'>
      <object type='image/svg+xml' data='https://s3.amazonaws.com/codecademy-content/courses/jquery/audit/images/sole-logo.svg'></object>
      <div>
        <span class='menu-button'>Menu</span>
        <span class='login-button'>Login</span>
      </div>
    </div>
  </nav>

  <!-- Nav Menu -->
  <div class='nav-menu hide' id="nav-dropdown">
    <div class='container'>
      <ul>
        <li>Shoes</li>
        <li>Women's Shoes</li>
        <li>Men's Shoes</li>
        <li>Shoe Accessories</li>
        <li>Wholesale</li>
      </ul>
      <ul>
        <li>Contact</li>
        <li>Twitter</li>
        <li>Facebook</li>
        <li>Instagram</li>
        <li>Email</li>
      </ul>
    </div>
  </div>

  <!-- Login Form -->
  <div class='login-form'>
    <div class='container'>
      <form>
        <h4>Username</h4>
        <input class='username' />
        <h4>Password</h4>
        <input type='password' />
        <input class='sign-in-button' type='submit' value='Sign In' />
      </form>
    </div>
  </div>

  <!-- Product Cards -->
  <div class='container'>
    <div class='product-card'>
      <div class='product-photo sole-air-ii'></div>
      <div class='product-details'>
        <h4>Sole Air II</h4>
        <div>
          <p>$35</p>
          <div class='more-details-button'>
            <img src='https://s3.amazonaws.com/codecademy-content/courses/jquery/audit/images/right-arrow.svg' />
          </div>
        </div>
      </div>

      <div class='shoe-details'>
        <p>The ultimate in style and comfort, the Sole Air II's are great for walking and casual...

CSS

* {
  margin: 0;
  padding: 0;
  transition: 0.1s; }

body {
  font-family: 'Roboto Condensed', Helvetica, sans-serif;
  text-align: left;
  font-size: 18px;
  color: #303030; }

.container {
  max-width: 450px;
  margin: 0 auto; }

h3 {
  color: #C3FF00;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em; }

h4 {
  text-transform: uppercase; }

.disabled h3 {
  color: #535353;
  cursor: not-allowed; }

.button-active {
  color: #C3FF00;
  background-color: #535353; }

nav {
  background-color: #303030;
  color: #EFEFEF; }
  nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    nav .container object {
      width: 4.5em;
      padding: 1.2em 0.5em; }
    nav .container .login-button,
    nav .container .menu-button {
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 1em 1.25em;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: pointer; }

.nav-menu {
  background-color: #535353;
  color: #EFEFEF;
  display: flex;
  justify-content: center; }
  .nav-menu .container {
    padding: 1.5em;
    display: flex; }
    .nav-menu .container ul {
      list-style: none; }
      .nav-menu .container ul li {
        padding: 0.25em 2em; }
        .nav-menu .container ul li:first-child {
          text-transform: uppercase;
          color: #C3FF00;
          letter-spacing: 0.05em; }

.hide {
  display: none; }

.login-form {
  background-color: #535353;
  padding: 1em 0 0;
  color: #EFEFEF;
  display: none; }
  .login-form .container {
    padding: 0 0.5em; }
  .login-form h4 {
    font-weight: 400; }
  .login-form input {
    width: calc(100% - 1em);
    border: none;
    height: 2em;
    margin: 0.5em 0;
    font-size: 1em;
    padding: 0 0.5em; }
  .login-form .sign-in-button {
    background-color: #303030;
    color: #C3FF00;
    font-weight: 700;
    text-transform: uppercase;
   ...

JavaScript

$(document).ready(() => {
  const $menuButton = $('.menu-button');
  const $navDropdown = $('#nav-dropdown');

  $menuButton.on('click', () => {
    $navDropdown.show();
  })
  
  $navDropdown.on('mouseleave', () => {
    $navDropdown.hide();
  })
})