JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

<body>
    <!-- Navigation area -->
   <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
   <div class="container">
       <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon icon-bar"></span>
                    <span class="icon icon-bar"></span>
                    <span class="icon icon-bar"></span>
         </button>
         <!-- Logo text -->
               <a href="index.html" class="navbar-brand">Maureen.</a>  
       </div>
       <!-- Navigation -->
       <div class="collapse navbar-collapse" id="navbar-collapse-main">
             <ul class="nav navbar-nav navbar-right">
                    <li><a class="active" href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#service">Service</a></li>
                    <li><a href="#resume">Resume</a></li>
                    <li><a href="#skills">Skills</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
                    <li><a href="#contact">Contact</a></li>
            </ul>
       </div>
    </div>    
    </nav> 

<!-- Home section start -->
<section class="home" id="home">
     <div class="container">
          <div class="row">
               <div class="col s12 m12 l6 center-align">
                    <div class="home-content">
                        <h1>HELLO THERE!</h1><br/>
                         <p>My name is Maureen</p>
                         <h3>I AM A UI/UX DEVELOPER</h3>
                         <div class="border"></div>
                        <a href="#" class="">Download Resume PDF</a>
                    </div>
               </div>
          </div>
     </div>
</section>
<!-- About section -->
        <section class="section" id="about">
            <div class="container">
            ...

CSS

body {
    background: #fff;
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-weight: normal;
    overflow-x: hidden;
}

html, body {
  width: 100%;
  height: 100%;
}

.section {
    padding-top: 100px;
    position: relative;
    padding-bottom: 100px;
    background-color: #fff;
}


h1,h2,h3,h4,h5,h6 {
  font-style: normal;
  font-weight: bold;
  letter-spacing: 0px;
}

h1 {
  color: #373737;
  font-size: 45px;
  line-height: normal;
}

h2 {
  color: #454545;
  font-size: 35px;
  line-height: 52px;
  margin-top: 0px;
}

h3 {
  color: #585858;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: 6px;
  text-transform: uppercase;
}

h4 {
  color: #656565;
  font-size: 20px;
}

p {
  color: #878787;
  font-size: 16px;
  font-weight: normal;
  line-height: 25px;
  letter-spacing: 0.2px;
}




/*-------- Navigation section--------*/
.navbar-default {
  border: none;
  margin-bottom: 0;
  background-color: #ffffff;
  padding: 12px 0;
  border-bottom: 1px solid #000;
}

.navbar-default .navbar-brand {
  color: #444;
  font-weight: normal;
  font-size: 20px;
}

.navbar-default .navbar-nav li a {
  font-size: 12px;
  font-weight: bold;
  color: #858585;
  letter-spacing: 1px;
  text-transform: uppercase;
  -webkit-transition: all ease-in-out 0.4s;
  transition: all ease-in-out 0.4s;
  padding: 0 12px;
  margin: 15px 8px;
}

.navbar-default .navbar-nav > li a:hover {
  color: #000 !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #000;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #000;
}

.navbar-default .navbar-toggle {
  border: none;
  padding-top: 10px;
}

.navbar-default .navbar-toggle {
  background-color: transparent;
}

.navbar-default .navbar-toggle .icon-bar {
  background: #000000;
  border-color: transparent;
}

/*=============Home section...