JSFiddle - React, Tailwind, and code Playground

by beebul

HTML

<div class="wrapper">
  <nav role="navigation">
    <div class="horizontal" id="navigation">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Articles</a></li>
        <li><a href="#">Shift</a></li>
        <li><a href="#">Run</a></li>
        <li><a href="#">Stop</a></li>
        <li><a href="#">Login</a></li>
      </ul>
    </div>
  </nav>
  <fieldset>
    <legend>Personal Deets</legend>
    <form action="#">
      <label for="firstName">First name:</label>
      <input type="text" id="firstName" required>
      <label for="lastName">Last name:</label>
      <input type="text" id="lastName" required>
      <input type="submit" value="Submit" class="btn">
    </form>
  </fieldset>
</div>

CSS

* {
  font-family: "Segoe UI", sans-serif;
}

.wrapper {
  padding: 2rem 0 0 2rem;
  width: 90%;
}


/* Menu Elements */

div.horizontal {
  width: 100%;
  height: 63px;
}

div.horizontal ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

div.horizontal li {
  float: left;
}

div.horizontal a {
  display: block;
  width: 86px;
}

div.horizontal a:link,
div.horizontal a:visited {
  font-weight: bold;
  color: #fff;
  background-color: #98bf21;
  text-align: center;
  padding: 8px;
  text-decoration: none;
  text-transform: uppercase;
}

div.horizontal a:hover,
div.horizontal a:active {
  background-color: #7A991A;
}

div.horizontal a:hover {
  /* just because! */
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

li+li {
  border-left: 2px solid #fff;
}


/* Form Elements */

input {
  margin: .6rem;
  padding: .4rem;
  margin-bottom:1.2rem;
  font-weight: bolder;
  color: grey;
}

label,
.btn {
  cursor: pointer;
}

fieldset {
  border: 1px solid #98bf21;
  width: 85%;
  padding: .6rem;
  text-align: center;
}

legend {
  font-weight: bolder;
  font-size: 1.2rem;
  padding: .5rem .5em;
  color: #98bf21;
  text-align: left;
  margin-left: 2rem;
}