JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <div class="container">
  
  <div class="row">
  <div class="twelve columns" id="header">
  Cupid's
  </div>
  </div>
  
  <div class="row">
  <div class="twelve columns" id="row1">
  <ul>
  <li><a href="#menu">Menu</a></li>
  <li><a id="kjn" href="#about">About</a></li>
  <li><a href="#gallery">Gallery</a></li>
  </ul>
  </div>
  </div>
  
  
  <div class="row" id="boxRow">
  <div class="six columns" id="boxRowImg1" >
  </div>
  <div class="six columns" id="boxRowTxt" >
  <div id="aa-outer-container">
  <div id="aa-inner-container">
  <div id="aa">
  <h5>The Bakery</h5></br>
  <p>Like a home away from home, our secluded cafe is the perfect place to relax, work, or settle in with a good book. Make sure to try one of our delicious lunch options or expertly brewed hot drinks. </p>
  <hr align="left" >
  </div>
  </div>
  </div>
  </div>
  </div>
  
  <div class="row">
  <div class="twelve columns" id="row3">
  <p id="mail">Join our mailing list</p>
  <p id="first">Be the first to know about special promotions, and events!</p>
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" required>
  </div>
  </div>
  
  
  
  
  
  
  
  <div class="row">
  <div class="twelve columns" id="row5">
  <hr width="100%">
  </div>
  </div>
  
  <div class="row">
  <div class="twelve columns" id="row6">
  copyright 2016, emily baker
  </div>
  </div>
  
    
  </div>

CSS

@font-face {
    font-family: 'Trend Sans 004'; /*a name to be used later*/
    src: url('fonts/Trend Sans W00 Four.ttf'); /*URL to font*/
}


@font-face {
    font-family: 'Utopia Regular'; /*a name to be used later*/
    src: url('fonts/utopia-regular.ttf'); /*URL to font*/
}

@font-face {
    font-family: 'Trend Sans 001'; /*a name to be used later*/
    src: url('fonts/Trend Sans W00 One.ttf'); /*URL to font*/
}




/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0;
    }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
 ...