JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Poppins|Vidaloka|Cutive+Mono"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg fixed-top">
  <a class="navbar-brand" href="#home">HS</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse justify-content-end navbar-collapse" id="myNavbar">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">About Me</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#skills">Skills</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#projects">Projects</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#resume">Resume</a>
      </li>
    </ul>
  </div>
</nav>

<div id="home">
  <p id="name" class="text-center main-head">Hemakshi Sachdev</p>
  <p id="keywords" class="text-center">Programmer | Full-Stack Web Developer</p>
  <ul id="connect-with-me" class="text-center">
    <li><a href="https://www.linkedin.com/in/hemakshis" target="_blank"><i class="fa fa-linkedin"></i></a></li>
    <li><a href="https://github.com/hemakshis" target="_blank"><i class="fa fa-github"></i></a></li>
    <li><a...

CSS

#myNavbar>ul>li {
  border: 2px solid transparent;
  border-radius: 10px;
  transition: all 0.8s ease-out;
}

#myNavbar>ul>li:hover {
  border: 2px solid white;
  border-radius: 10px;
}

#myNavbar>ul>li>a,
.navbar-brand {
  color: #25272b;
  font-family: 'Poppins', sans-serif;
  padding: 10px 15px;
  z-index: 1030;
}

.add-bgd {
  background-color: rgba(0, 0, 0, 0.5);
}

#home {
  width: 100%;
  height: 100%;
  background: url("http://www.softekmw.com/img/slider/01.jpg") no-repeat;
  background-size: 100% auto, 100% auto !important;
}

#name {
  font-family: 'Vidaloka', serif;
  text-transform: uppercase;
  color: white;
  word-wrap: break-word;
}

#keywords {
  font-family: 'Vidaloka', serif;
  color: white;
  word-wrap: break-word;
}

#connect-with-me>li {
  display: inline-block;
}

#connect-with-me>li>a>i,
.navbar-brand:hover {
  color: white;
}

.arrow img {
  border: 1px solid white;
  border-radius: 100%;
  position: relative;
  margin: 0 auto;
  display: block;
  top: 0px;
  -webkit-animation: arrow 1s both infinite;
  animation: arrow 1s both infinite;
}

@-webkit-keyframes arrow {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
  }
}

@keyframes arrow {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.carousel-indicators>li,
.carousel-indicators>li.active {
  background-color: transparent;
}

.carousel-indicators>li.active>i {
  color: lightgrey;
}

#name {
  padding-top: 306px;
  font-size: 60px;
  letter-spacing: 20px;
}

#keywords {
  margin-top: -18px;
  font-size: 32px;
}

#connect-with-me {
  margin-right: 36px;
  padding-bottom: 128px;
}

#connect-with-me>li {
  padding: 0px 21px 21px 21px;
}

#connect-with-me>li>a>i {
  font-size: 24px;
}

.arrow {
  background-color: transparent;
  width: 100%;
 ...