JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>MeroAdda</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">

</head>
<body>
<header class="header">
    <div class="shadow-home"></div>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-6 col-lg-8 col-xl-8 logo mt-5"><a href="#" target="_blank">MeroAdda</a></div>
            <div class="col-sm-6 col-md-6 col-lg-4 col-xl-4 mt-5 text-right top-links">
                <a href="#">Sign in</a>
                <a href="#" class="text-center ml-4">Sign Up</a>
            </div>
        </div>
        <div class="row pt-5 mt-5">
            <div class="col-md-12 col-lg-8 col-xl-8">
            <h1>
                Find a <br />Experienced <br />Lawyer near you.
            </h1>

            <p class="pt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit, ipsum et feugiat tristique, mauris justo auctor nulla, id dapibus libero orci ac urna.</p>

            <form class="home pt-3 pb-3">
                <span class="border-rad">
                    <input type="text" placeholder="Practice area, lawyer name, or firm" class="text">
                    <input type="text" placeholder="City name" class="text">
                </span>
                <button type="button" class="button...

CSS

@import url("https://fonts.googleapis.com/css?family=Bitter:700|Raleway:300,400,500,500i,600,600i,700");
/*** VARIABLES ***/
/*** MIXINS ***/
/*** PRIMARY STYLES ***/
*:focus, button:focus {
  outline: none; }

a {
  color: #0B42BB; }
  a:hover, a:focus {
    border-bottom: 1px solid #99b7f9;
    color: #0B42BB;
    padding-bottom: 1px;
    text-decoration: none; }

p {
  line-height: 24px; }

h1,
h2,
h3,
h4,
h5 {
  color: #FFFFFF;
  font-family: Bitter;
  font-size: 56px;
  font-weight: 700;
  line-height: 66px; }

h2 {
  color: #2d2d2d;
  font-size: 36px; }
  h2:before {
    color: #FFAB02;
    content: '|';
    font-family: Raleway;
    font-size: 30px;
    font-weight: 300;
    padding-right: 20px;
    position: relative;
    top: -3px; }

h3 {
  color: #2d2d2d;
  font-size: 26px;
  line-height: 36px; }

h4,
h5 {
  color: #2d2d2d;
  font-family: Raleway;
  font-size: 18px;
  line-height: 24px; }

h5 {
  font-size: 16px; }

body {
  color: #2d2d2d;
  font-family: Raleway;
  font-size: 14px; }

/*** CAROUSEL SLIDER ***/
.carousel-indicators {
  bottom: -60px; }
  .carousel-indicators li {
    background-color: #dba6d8;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    height: 13px;
    margin-left: 5px;
    margin-right: 5px;
    max-width: 13px; }
  .carousel-indicators .active {
    background-color: #C56FC0; }

.carousel-control-next,
.carousel-control-prev {
  opacity: 1;
  width: 2%; }
  .carousel-control-next .carousel-control-prev-icon,
  .carousel-control-prev .carousel-control-prev-icon {
    background-image: url(../images/arrowcarousel-prev.svg); }
  .carousel-control-next .carousel-control-next-icon,
  .carousel-control-prev .carousel-control-next-icon {
    background-image: url(../images/arrowcarousel-next.svg); }
  .carousel-control-next:hover,
  .carousel-control-prev:hover {
    border-bottom: 0; }

/*** NAV TABS ***/
.nav-tabs {
  border-bottom: 0; }

.nav-tabs .nav-item.show .nav-link,
.nav-tabs...

JavaScript

"use strict";

$(document).ready(function() {

    //AnchorLink
    function anchorLink () {
        $("a.anchor-link").click(function () {
            $("html, body").animate({
                scrollTop: $($(this).attr("href")).offset().top
            }, 500);
            return false;
        });
    }
    anchorLink();


    //Scroll Top
    window.onscroll = function() {scrollFunction() };

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("scroll-top").style.display = "block";
        } else {
            document.getElementById("scroll-top").style.display = "none";
        }
    }
    $("a[href='#top']").click(function() {
        $("html, body").animate({ scrollTop: 0 }, "slow");
        return false;
    });

    //Scroll Loader
    $(function () {
        $(".lazy").slice(0, 3).show();
        $("#loadMore").on('click', function (e) {
            e.preventDefault();
            $(".lazy:hidden").slice(0, 1).slideDown();
        });
    });


    //show-hide
    function showHideContent() {
        $(".show-hide .arrow-down").on('click', function () {
            console.log("Go Down");
            $(".show-hide p").css("height", 240);
            $(this).addClass("arrow-up");
        });
        setInterval(function () {
            $(".show-hide .arrow-down").one('click', function () {
                console.log("Go Up");
                $(this).removeClass("arrow-up");
                $(".show-hide p").css("height", 140);
                return false;
            })
        }, 2500);
    }

    showHideContent();

});