JSFiddle - React, Tailwind, and code Playground

by Amir Sharifian

HTML

<div class="main">
  <h1>Simple Business.</h1>

<ul>
  <li><a href="#1">I need Option 1.</a></li>
  <li><a href="#2">I just need Option 2.</a></li>
  <li><a href="#3">I just need Option 3.</a></li>
  <li><a href="#4">I need Option 4.</a></li>
</ul>

  <footer>
  <h1>About THIS BUSINESS.</h1>
  <p class="about"> Insert About Text Here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae dolor nibh. Ut at pulvinar ex. Cras nibh ante, iaculis quis aliquet at, placerat quis enim. In maximus nulla ut commodo sollicitudin. Etiam a erat laoreet augue tempus pellentesque. Fusce tempor sed urna in cursus. Sed lectus leo, tempor sed magna quis, maximus vulputate velit. Ut non pellentesque arcu, quis placerat magna. Cras ac odio in leo egestas convallis. Nunc egestas pulvinar placerat. 
  </p>
</footer>
</div>

CSS

* {
 -moz-box-sizing: border-box; /* Firexfox */
 -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
 box-sizing: border-box; /* IE */
}

/* Clear fix hack */
.clearfix:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}

.clear {
  clear: both;
}

.alignright {
    float: right; 
    padding: 0 0 10px 10px; /* note the padding around a right floated image */
}

.alignleft {
    float: left; 
    padding: 0 10px 10px 0; /* note the padding around a left floated image */
}

/******************************************
/* BASE STYLES                   
/*******************************************/

body {
     color: #000;
     background-color: #ececec;
     font-size: 12px;
     line-height: 1.4;
     font-family: Helvetica, Arial, sans-serif;
     text-align: center;
}

h1 {
     font-family:'Arial Black';
     font-size: 4em;
     padding-top: 5px;
}

li {
     text-decoration: none;
     font-size: 2em;
     line-height: 2.5em;
     color: #FF48D0;
}

ul {
  list-style: none;
  padding: 0; 
}

.mainImage {
     width:75%;
     max-width:483px;
}

a:active, a:hover {outline: 0 none; text-decoration: none;}
a {text-decoration: none}

/******************************************
/* LAYOUT                   
/*******************************************/

.main {
  background-color: #FFF;
  max-width: 960px;
  display: table;
  margin: 0 auto;
}

.about, p {
     float:center;
     max-width: 960px;
     padding-left: 1em;
     padding-right: 1em;
     text-align: justify;
 }

header {
 padding:10px;
}

footer {
 padding: 5px;
}

/******************************************
/* ADDITIONAL STYLES                   
/*******************************************/

/* =======================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 930px) {

 .main {
   max-width:...