JSFiddle - React, Tailwind, and code Playground

by Vanessa RC

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
 <nav>
    <div class="navicon">&#9776;</div>
    <div class="image-logo">
      <img src="https://pbs.twimg.com/profile_images/783619679663382528/nBiGQ6qe_bigger.jpg" alt="image here" /> 
    </div>
    <div class="name-title">
       <p class="name-logo">Vanessa</p>
       <p class="title">Designer - Developer</p>
    </div>
    
    <div class="container-navigation no-display">
      <div class="nav-items"><a href="#about-me"
                                class="tabs a--background">About Me</a></div>
      <div class="nav-items"><a href="#projects" class="tabs a--background">Projects</a></div>
      <div class="nav-items"><a href="#articles" class="tabs a--background">Articles</a></div>
      <div class="nav-items"><a href="#portfolio" class="tabs a--background">Portfolio</a></div>
       <div class="nav-items" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap" id="contactButton"><a href="#" class="tabs a--background">Contact Me</a></div>
    </div>
  </nav>

<!-- social nav here -->
<div class="social-nav">
        <ul>
          <li><a class="social-icon" href="https://twitter.com/VanessaR_C" target="_blank" >
        <span class="fa-stack fa-lg">
          <i class="fa fa-twitter"></i>
          </span></a></li>
          <li><a class="social-icon" href="https://dribbble.com/vanessarc" target="_blank"> <span class="fa-stack fa-lg">
          <i class="fa fa-dribbble"></i>
          </span></a></li>
          <li><a class="social-icon" href="https://github.com/lunnaris" target="_blank" > <span class="fa-stack fa-lg">
          <i class="fa fa-github"></i>
          </span></a></li>
          <li><a class="social-icon" href="https://www.linkedin.com/in/vanessa87" target="_blank"> <span class="fa-stack fa-lg">
          <i...

CSS

@import 'https://fonts.googleapis.com/css?family=Lato:100,300,400';

@import 'https://fonts.googleapis.com/css?family=Marvel:400,700';

/* Some resets */
a,
a:hover{
  text-decoration: none;
  color: #222;
}

.image-logo,
.name-title {
  display: inline-block;
  left: 0;
}

.image-logo {
  margin: 0;
  padding: 10px; 
}
.name-title {
  margin: 0;
  padding: 0 0 30px 0;
}

.name-logo {
  font-family: "Lato", Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 400;
  }

.title {
  font-family: "Lato", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
}
/*
/* Here all the Nav */
nav {
  &:before,
  &:after {
    display: block;
    content: " ";
    clear: both;
  }
}

.navicon {
  display: none;
}

.container-navigation {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
    -webkit-justify-content: flex-end;
  justify-content: flex-end;
  align-items: flex-start;
  width: 95%;
}

.nav-items {
  flex-grow: 0;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.tabs {
  float: right;
  display: block;
  margin: 1em;
  padding: 1em 2em;
  border: 1px solid #333;
  background: none;
  position: relative;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Lato", sans-serif;
  font-size: 12px;
  text-align: center;
}

.tabs:focus {
  outline: none;
}

.tabs:hover {
  border: 1px solid #fff;
}

.a--background {
  -webkit-transition: border-color 0.4s, color 0.4s;
  transition: border-color 0.4s, color 0.4s;
}

.a--background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e84a5e;
  z-index: -1;
  opacity: 0;
  -webkit-transform: scale3d(0.7, 1, 1);
  transform: scale3d(0.7, 1, 1);
  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
  transition: transform 0.4s, opacity 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3,...

JavaScript

/* Here the code for navigation */
$(document).ready(function() {
  var navIcon = $('.navicon');
  cp = $('.no-display');
  navIcon.on('click', function() {
    cp.toggleClass('display');
  });
});

/* Here the code for the smooth scroll */
$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});