Navbar MGB

import React from "react";

const Navbar = () => {
  return (
    <header class="bg-white bg-opacity-5  shadow-lg hidden md:block">
  <div class="container mx-auto flex items-center h-24">
    <a href="" class="flex items-center justify-center">
      <img class="h-16" src="https://mbgcard.in/wp-content/uploads/2021/02/cropped-cropped-cropped-cropped-favicon-1.png" alt="" />
      {/* <span class="ml-4 uppercase font-black">MBG<br/>Card</span> */}
    </a>
    <nav class="contents font-semibold text-base lg:text-lg">
      <ul class="mx-auto flex items-center">
        <li class="p-5 xl:p-8 active">
          <a href="">
            <span>Home</span>
          </a>
        </li>
        <li class="p-5 xl:p-8">
          <a href="">
            <span>About</span>
          </a>
        </li>
        <li class="p-5 xl:p-8">
          <a href="">
            <span>Career</span>
          </a>
        </li>
        <li class="p-5 xl:p-8">
          <a href="">
            <span>Contact Us</span>
          </a>
        </li>
        {/* <li class="p-5 xl:p-8">
          <a href="">
            <span>Blog</span>
          </a>
        </li> */}
      </ul>
    </nav>

    <button class="group relative h-12 w-48 overflow-hidden rounded-lg bg-white text-lg shadow">
    <div class="absolute inset-0 w-3 bg-amber-400 transition-all duration-[250ms] ease-out group-hover:w-full"></div>
    <span class="relative text-black group-hover:text-white">Demo</span>
  </button>

  </div>
</header>
  );
};

export default Navbar;