JSFiddle - React, Tailwind, and code Playground

by alachgar

HTML

<html>
	<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" />
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" />
	<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

	</head>
	
	
<header class="container container-fluid">
			
			<div class="container px-0 menuContainer ">
				<nav class="navbar navbar-center navbar-expand-md navbar-light ">			

					<a href="#mobileMenu" id="mobileBar" class="d-none ml-auto"> <i class=" "></i></a>
					<div class="collapse navbar-collapse" id="navbarNav">
						<ul class="navbar-nav ml-md-auto justify-content-end" id="nav">
							<li class="nav-item active">
								<a class="nav-link" href="#">Home <span class="sr-only"></span></a>
							</li>
							<li class="nav-item dd">
								<a class="nav-link" href="#">Justice Server <span class="sr-only"></span></a>
							</li>
							<li class="nav-item dd">
								<a class="nav-link" href="#">Westlaw <span class="sr-only"> </span></a>
								
							</li>
							
							<li>
								
								<a class="nav-link dropdown-toggle" data-toggle = "dropdown"  href = "#">LSNC SPN <span class = "caret sr-only"></span></a>
								<ul class="dropdown-menu">
									<?php
									$conn = new mysqli('localhost', '.....', '.......', 'portal') or die("Database Connection...

CSS

header nav{
    font-family: Roboto;
    font-size: 20px;
	position: relative;
	left: -3%;
	
}


header nav .navbar-nav li>.nav-link{
    padding: 32px 19px !important;
}
header .navbar-light .navbar-nav .active > .nav-link{
    color: #fff;
}
header .navbar-light .navbar-nav .nav-link{
    color: #313131;
    position: relative;
    z-index: 4;
}
header .navbar-light .navbar-nav .nav-link::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 11px;
    z-index: -1;
    transition: 0.2s linear;
}
header{
    --firstNavColor: #07458d;
    --secNavColor: #ed3541;
    --thirdNavColor: #435599;
    --fourthNavColor: #b9c9d9;
    --fiveNavColor: #f1b949;
    --sixNavColor: #07458d;
    --sevenNavColor: #b1dff5;
	--eightNavColor: #33FF8D;
	--nineNavColor: #33EEFF;
}
header .navbar-light .navbar-nav .nav-item{
    z-index: 4;
    position: relative;
}

header .navbar-light .navbar-nav .nav-item.active:nth-child(1) > .nav-link,
header .navbar-light .navbar-nav .nav-item:nth-child(1)>.nav-link::before{
    background-color: var(--firstNavColor);
}
header .navbar-light .navbar-nav .nav-item:nth-child(1):hover .nav-link::before,
header .navbar-light .navbar-nav .nav-item:nth-child(1):hover .nav-link{
    color: #fff;
    height: 100%;
}

header .navbar-light .navbar-nav .nav-item.active:nth-child(2) > .nav-link,
header .navbar-light .navbar-nav .nav-item:nth-child(2)>.nav-link::before{
    background-color: var(--secNavColor);
}
header .navbar-light .navbar-nav .nav-item:nth-child(2):hover .nav-link::before,
header .navbar-light .navbar-nav .nav-item:nth-child(2):hover .nav-link{
    color: #fff;
    height: 100%;
}

header .navbar-light .navbar-nav .nav-item.active:nth-child(3) > .nav-link,
header .navbar-light .navbar-nav .nav-item:nth-child(3)>.nav-link::before{
    background-color: var(--thirdNavColor);
}
header .navbar-light .navbar-nav .nav-item:nth-child(3):hover .nav-link::before,
header .navbar-light .navbar-nav...