JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Custom CSS stylesheet -->
    <!-- CoreUI CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <!-- jQuery 3.3.1 -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

    <title>Eric Soobin Kim</title>
  </head>
  <body class="app">
<div class="banner">
    <nav id="navbar" class="navbar navbar-expand-md navbar-light bg-light">
      <a class="navbar-brand" href="#">Eric Soobin Kim</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">

        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link rem_08" href="#">About<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link rem_08" href="#">Articles</a>
          </li>
          <li...

CSS

.banner {
    background-color: #2A3F54 !important;
}
#navbar {
    background-color: #2A3F54 !important;
    margin: 0 auto;
    max-width: 1080px;
    padding: 0 !important;
}
#navbar a {
    color: #ECF0F1;
    text-transform: uppercase;
    font-weight: 400;
}
.navbar-brand {
    margin-left: 1rem;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    font-size: 1.1rem !important;
}
.hidden {
    display: None !important;
}
.navbar-nav {
}
.navbar-toggler {
    border-color: #ECF0F1;
    margin-right: 1rem;
    padding: 0 3px !important;
}
.btn.btn-circle {
    border-radius: 50px;
}
.btn.btn-outline {
    background-color: transparent;
}
.navbar-toggler {
    border-color: rgb(186,184,184) !important;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(236,240,241)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}
.nav-item {
    display: inline-block;
    text-decoration: none;
    height: 37px;
    text-align: center;
}
.rem_08 {
    font-size: 0.8rem !important
}
.nav-link.collapsed {
    background-color: #172D44;;
}
.text-align-center {
    text-align: center;
}

.nav-item::after {
    content: '';
    display: block;
    width: 0;
    margin-top: 3px;
    height: 2px;
    background: #7b7777;
    transition: width .3s;
}
.nav-item:hover::after {
    width: 100%;
}
#search-box {
    width: 250px;
    border: none;
    height: 1.8rem;
    display: inline-block;
}
#search-form {
    height: 37px;
}
#search-form .row .collapsed{
    border-radius: .25rem;
    background-color: #fff;
}
#search-form.collapsed{
    background-color: #172D44;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}
form .row .collapsed{
    width: 100%;
}
#search-btn {
    height: 1.8rem;
    padding: 1px 6px...

JavaScript

var COLLAPSE_WIDTH = 768;

function init_navbar () {
    $('.nav-link').on( {
        mouseenter: function () {
            $(this).addClass('hover');
        },
        mouseleave: function () {
            $(this).removeClass('hover');
        }
    });

    window.isCollapsed = true;
    $('.btn-search').on('click', function () {
        if (window.windowSize > COLLAPSE_WIDTH) {
            $('#search-box').toggleClass('hidden');
            $('.navbar-nav').toggleClass('hidden');
        }
        window.isCollapsed = !isCollapsed
    });
}
function check_width() {
    window.windowSize = $(window).width();
    if (windowSize < COLLAPSE_WIDTH) {
        $('#search-box').removeClass('hidden');
        //$('#search-btn').addClass('hidden');
        $('.navbar-nav').removeClass('hidden');
        $('.nav-link').addClass('collapsed');
       

    }
    if (windowSize > COLLAPSE_WIDTH) {
        $('#search-box').addClass('hidden');
        //$('#search-btn').removeClass('hidden');
        $('.navbar-nav').removeClass('hidden');
        $('.nav-link').removeClass('collapsed');
      
    }
}
$(document).ready(function() {
    check_width();
    $(window).resize(check_width);
    init_navbar();
});