JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<head>

    <!--- basic page needs
   ================================================== -->
    <meta charset="utf-8">
    <title>Testing Website</title>


    <!-- mobile specific metas
   ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS
   ================================================== -->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">




    <!-- script
   ================================================== -->

</head>


<body>

    <div class="nav-top-bar">
        <a class="navbar-brand" id="navbar-brand" href=""><i class="fas fa-angle-left" id="navbar-brand"></i></a>
        <h1 id="navbar-name">Live Auction Results</h1>
        <img (click)="openNav()" src="assets/images/white-hamburger.png" id="white-hamburger">
    </div>


    <div class="nav-top-searchbar">
        <form class="back">
            <div class="input-searchicon">
                <input type="text" name="search" class="extand">
                <span class=" fa fa-search searchicon" aria-hidden="true "></span>
            </div>
            <div style="">
                <img tabindex="1" src="https://s18.postimg.cc/iukcms3cp/Ellipsis.png" id="ellipsis">
                <div class="dropdown">
                    <li><a href="#">View Status</a><i class="fa fa-angle-down" aria-hidden="true"></i></li>
                    <li><a href="#">Release Bills</a></li>
                    <li><a href="#">Add Attendee</a></li>
                    <li><a href="#">Export as...</a></li>
          ...

CSS

.nav-top-searchbar {
    position: relative;
    border: none;
}

.back {
    padding: 0.5%;
    background-color: #10314c;
    position: relative;
}

.extand {
    width: 2.4%;
    box-sizing: border-box;
    border: 0.10rem solid #ccc;
    border-radius: 4px;
    padding-left: 24px;
    font-size: 16px;
    background-color: #10314c;
    transition: width 0.4s ease-in-out;
}

.extand:focus {
    width: 25%;
    background-color: #fff;
}

.extand:focus+.searchicon {
    color: black;
}

.searchicon {
    position: absolute;
    left: 3.5%;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    pointer-events: none;
}

.input-searchicon {
    padding-left: 2.5%;
}


/******* Search Icon with Square border END ******/


/*********Ellipsis Start *************/

.dropdown {
    background-color: #FFFFFF;
    display: none;
    /* padding-left: 2%; */
    position: absolute;
    /* height: 150px; */
    right: 0;
    width: 200px;
    z-index: 10;
    list-style-type: none;
    padding-top: 40px;
    padding-bottom: 25px;
    box-shadow: 0 0 15px #888;
    top: 2px;
}

.dropdown li a {
    font-size: 16px;
    font-weight: bold;
    font-family: "Open Sans";
    color: #676767;
}

.dropdown li {
    padding-bottom: 2%;
    padding-left: 20px;
}

.dropdown li:hover {
    background-color: #EDEDED;
}

#ellipsis {
    top: 12px;
    position: absolute;
    right: 43px;
    cursor: pointer;
}

#ellipsis:hover {
    visibility: visible;
}

#ellipsis:focus {
    outline: none;
}

#ellipsis:focus+.dropdown {
    display: block;
}

.nav-top-bar {
    display: flex;
    justify-content: space-between;
    padding: 0% 2.5%;
    background: rgb(16, 49, 76);
    align-items: center;
}

#navbar-brand {
    font-family: 'Open-Sans', sans-serif;
    color: #fff;
    font-weight: 600;
    margin-right: 0rem;
}

#navbar-name {
    font-family: 'Open-Sans', sans-serif;
    color: #fff;
    font-weight: bold;
    margin-bottom: 0rem;
}

.sidenav {
    width: 0;
   ...