<section className="flex min-h-screen flex-col items-end bg-background px-4 py-20">
  <div className="relative select-none bg-background">
    <button
      className="inline-flex items-center gap-1 rounded-md bg-accent/10 p-2 text-accent-foreground"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="20"
        height="20"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path
          d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"
        />
        <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
        <path d="M21 6.727a11.05 11.05 0 0 0 -2.794 -3.727" />
        <path d="M3 6.727a11.05 11.05 0 0 1 2.792 -3.727" />
      </svg>
    </button>

    <div
      role="menu"
      className="absolute end-0 z-50 mt-2 w-[500px] rounded-md bg-background shadow-lg max-sm:max-w-[80vw]"
    >
      <ul
        className="grid w-full divide-y divide-accent/20 overflow-hidden rounded-md bg-accent/10"
      >
        <li>
          <a
            href="#"
            className="group flex transition ease-in-out hover:bg-accent/10"
          >
            <div
              className="flex h-full w-full items-center gap-2 px-6 py-4 transition-transform ease-in-out group-active:scale-[0.98]"
            >
              <div
                className="rounded-full bg-success/20 p-2 text-success ring-1 ring-inset ring-success/50"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="32"
                  height="32"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path
                    d="M12 19h-6a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v4.5"
                  />
                  <path d="M3 10h18" />
                  <path d="M7 15h.01" />
                  <path d="M11 15h2" />
                  <path d="M16 19h6" />
                  <path d="M19 16l-3 3l3 3" />
                </svg>
              </div>
              <div className="space-y-0">
                <p className="text-sm">
                  <span className="font-bold text-success">$100 US</span>were
                  received
                </p>
                <small className="text-xs text-foreground/50">
                  50 minutes ago
                </small>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a
            href="#"
            className="group flex transition ease-in-out hover:bg-accent/10"
          >
            <div
              className="flex h-full w-full items-center gap-2 px-6 py-4 transition-transform ease-in-out group-active:scale-[0.98]"
            >
              <div
                className="rounded-full bg-danger/20 p-2 text-danger ring-1 ring-inset ring-danger/50"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="32"
                  height="32"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path
                    d="M12 19h-6a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v4.5"
                  />
                  <path d="M3 10h18" />
                  <path d="M16 19h6" />
                  <path d="M19 16l3 3l-3 3" />
                  <path d="M7.005 15h.005" />
                  <path d="M11 15h2" />
                </svg>
              </div>
              <div className="space-y-0">
                <p className="text-sm">
                  <span className="font-bold text-danger">$20 US</span> were paid
                </p>
                <small className="text-xs text-foreground/50">
                  2 minutes ago
                </small>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a
            href="#"
            className="group flex transition ease-in-out hover:bg-accent/10"
          >
            <div
              className="flex h-full w-full items-center gap-2 px-6 py-4 transition-transform ease-in-out group-active:scale-[0.98]"
            >
              <div
                className="rounded-full bg-success/20 p-2 text-success ring-1 ring-inset ring-success/50"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="32"
                  height="32"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path
                    d="M12 19h-6a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v4.5"
                  />
                  <path d="M3 10h18" />
                  <path d="M7 15h.01" />
                  <path d="M11 15h2" />
                  <path d="M16 19h6" />
                  <path d="M19 16l-3 3l3 3" />
                </svg>
              </div>
              <div className="space-y-0">
                <p className="text-sm">
                  <span className="font-bold text-success">$10 US</span>were
                  received
                </p>
                <small className="text-xs text-foreground/50"> 2 hours ago </small>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a
            href="#"
            className="group flex transition ease-in-out hover:bg-accent/10"
          >
            <div
              className="flex h-full w-full items-center gap-2 px-6 py-4 transition-transform ease-in-out group-active:scale-[0.98]"
            >
              <div
                className="rounded-full bg-danger/20 p-2 text-danger ring-1 ring-inset ring-danger/50"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="32"
                  height="32"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path
                    d="M12 19h-6a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v4.5"
                  />
                  <path d="M3 10h18" />
                  <path d="M16 19h6" />
                  <path d="M19 16l3 3l-3 3" />
                  <path d="M7.005 15h.005" />
                  <path d="M11 15h2" />
                </svg>
              </div>
              <div className="space-y-0">
                <p className="text-sm">
                  <span className="font-bold text-danger">$20 US</span> were paid
                </p>
                <small className="text-xs text-foreground/50">
                  2 minutes ago
                </small>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a
            className="flex h-full w-full place-content-center px-6 py-4 font-bold hover:bg-accent/10"
            href="#"
          >
            See All
          </a>
        </li>
      </ul>
    </div>
  </div>
</section>
#Navigation

#Notifications

#User Dropdown
