Custom Shape in NextJS with TailwindCSS

Question

I tried to make this one but I have no idea how to make it like this.

I have tried to make it and what I can achieve is like this

I have search and research about how to make custom shape and gradient. But I still don't have any idea how to make it or combine it. https://blog.canopas.com/how-to-make-unique-shapes-using-tailwindcss-18a85523bc15 https://tailwindcss.com/docs/background-image

<nav
      className="flex items-center justify-between flex-wrap p-3 drop-shadow-xl nav_dropshadow"
      style={{ backgroundColor: "#2F3030" }}
    >
      <div className="flex items-center flex-shrink-0 text-white mr-6 lg:mr-96">
        {/* <img src={zerohero} className="w-100 h-10 mr-2" alt="Logo" />
         */}
        <a className="text-white lg:text-4xl font-coolvetica font-bold pl-3">
          ZeroHero
        </a>
      </div>
      <div className="block lg:hidden">
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="flex items-center px-3 py-2 rounded text-black-500 hover:text-black-400"
        >
          <svg
            className={`fill-white h-3 w-3 ${isOpen ? "hidden" : "block"}`}
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
          </svg>
          <svg
            className={`fill-white h-3 w-3 ${isOpen ? "block" : "hidden"}`}
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" />
          </svg>
        </button>
      </div>
      <div
        className={`w-full block flex-grow lg:flex lg:items-center lg:w-auto ${
          isOpen ? "block" : "hidden"
        }`}
      >
        <div className="text-sm lg:flex-grow font-coolveticaCondensed text-white text-xl/8">
          <a
            href="#"
            className="block mt-4 lg:inline-block lg:mt-0 text-white-200 mr-4"
          >
            Dashboard
          </a>
          <a
            href="#"
            className="block mt-4 lg:inline-block lg:mt-0 text-white-200 mr-4"
          >
            Games
          </a>
          <a
            href="#"
            className="block mt-4 lg:inline-block lg:mt-0 text-white-200 mr-4"
          >
            Statistics
          </a>
        </div>
        <div className="pr-3">
          <button
            className="inline-flex items-center border-0 py-3 px-7 text-black rounded-md font-roboto font-bold text-sm"
            style={{ backgroundColor: "#00F0FF" }}
          >
            Connect Wallet
          </button>
        </div>
      </div>
    </nav>

Can anyone give me some reference to make it or the best practice to make it?

Answer 1

Apply the gradient with something like bg-gradient-to-b from-purple-500 to-purple-500/25:

<script src="https://cdn.tailwindcss.com"></script>

<nav class="nav_dropshadow flex flex-wrap items-center justify-between p-3 drop-shadow-xl" style="background-color: #2F3030">
  <div class="mr-96 flex flex-shrink-0 items-center text-white bg-gradient-to-b from-purple-500 to-purple-500/25">
    <a class="font-coolvetica pl-3 font-bold text-white text-4xl">ZeroHero</a>
  </div>
  <div class="flex w-auto flex-grow items-center">
    <div class="text-xl/8 text-white flex-grow">
      <a href="#" class="text-white-200 mr-4 inline-block"> Dashboard </a>
      <a href="#" class="text-white-200 mr-4 inline-block"> Games </a>
      <a href="#" class="text-white-200 mr-4 inline-block"> Statistics </a>
    </div>
    <div class="pr-3">
      <button class="font-roboto inline-flex items-center rounded-md border-0 px-7 py-3 text-sm font-bold text-black" style="background-color: #00F0FF">Connect Wallet</button>
    </div>
  </div>
</nav>

Remove the padding from the <nav>, and apply the effects to the child elements, so that the gradient can be edge-to-edge:

<script src="https://cdn.tailwindcss.com"></script>

<nav class="nav_dropshadow flex flex-wrap items-center justify-between drop-shadow-xl" style="background-color: #2F3030">
  <div class="mr-96 flex flex-shrink-0 items-center text-white bg-gradient-to-b from-purple-500 to-purple-500/25 self-stretch">
    <a class="font-coolvetica pl-3 font-bold text-white text-4xl">ZeroHero</a>
  </div>
  <div class="flex w-auto flex-grow items-center p-3">
    <div class="text-xl/8 text-white flex-grow">
      <a href="#" class="text-white-200 mr-4 inline-block"> Dashboard </a>
      <a href="#" class="text-white-200 mr-4 inline-block"> Games </a>
      <a href="#" class="text-white-200 mr-4 inline-block"> Statistics </a>
    </div>
    <div class="pr-3">
      <button class="font-roboto inline-flex items-center rounded-md border-0 px-7 py-3 text-sm font-bold text-black" style="background-color: #00F0FF">Connect Wallet</button>
    </div>
  </div>
</nav>

Add some padding to the right, for the spacing after the logo:

<script src="https://cdn.tailwindcss.com"></script>

<nav class="nav_dropshadow flex flex-wrap items-center justify-between drop-shadow-xl" style="background-color: #2F3030">
  <div class="mr-56 flex flex-shrink-0 items-center text-white bg-gradient-to-b from-purple-500 to-purple-500/25 self-stretch pr-40">
    <a class="font-coolvetica pl-3 font-bold text-white text-4xl">ZeroHero</a>
  </div>
  <div class="flex w-auto flex-grow items-center p-3">
    <div class="text-xl/8 text-white flex-grow">
      <a href="#" class="text-white-200 mr-4 inline-block"> Dashboard </a>
      <a href="#" class="text-white-200 mr-4 inline-block"> Games </a>
      <a href="#" class="text-white-200 mr-4 inline-block"> Statistics </a>
    </div>
    <div class="pr-3">
      <button class="font-roboto inline-flex items-center rounded-md border-0 px-7 py-3 text-sm font-bold text-black" style="background-color: #00F0FF">Connect Wallet</button>
    </div>
  </div>
</nav>

Apply a clip-path, something like polygon(0 0, 100% 0,calc(100% - theme(spacing.8)) 100%, 0 100%) for the angled edge, using an arbitrary property class:

<script src="https://cdn.tailwindcss.com"></script>

<nav class="nav_dropshadow flex flex-wrap items-center justify-between drop-shadow-xl" style="background-color: #2F3030">
  <div class="mr-56 flex flex-shrink-0 items-center text-white bg-gradient-to-b from-purple-500 to-purple-500/25 self-stretch pr-40 [clip-path:polygon(0_0,100%_0,calc(100%-theme(spacing.8))_100%,0_100%)]">
    <a class="font-coolvetica pl-3 font-bold text-white text-4xl">ZeroHero</a>
  </div>
  <div class="flex w-auto flex-grow items-center p-3">
    <div class="text-xl/8 text-white flex-grow">
      <a href="#" class="text-white-200 mr-4 inline-block"> Dashboard </a>
      <a href="#" class="text-white-200 mr-4 inline-block"> Games </a>
      <a href="#" class="text-white-200 mr-4 inline-block"> Statistics </a>
    </div>
    <div class="pr-3">
      <button class="font-roboto inline-flex items-center rounded-md border-0 px-7 py-3 text-sm font-bold text-black" style="background-color: #00F0FF">Connect Wallet</button>
    </div>
  </div>
</nav>