Sections

Compact Navbar
TailwindCSS
ReactJS
Choose colors:
export default function CompactNavbar({}) {
  return (
    <div className=" flex h-screen w-screen items-center justify-center bg-[#F7F8FD]">
      <div className="w-full border-[1px] border-gray-100 bg-white">
        <nav className=" container mx-auto flex items-center px-5 py-4 ">
          <div className=" mr-5  shrink-0">
            <svg
              width="116.59"
              height="34.97"
              x="227.841"
              y="282.185"
              data-layer-type="text"
              viewBox="1.44 18.71 116.59 34.97"
              className="w-14"
              color="#27B2C7"
            >
              <path
                fill="#27B2C7"
                d="M34.51 19.41q1.28.25 1.91.86.64.62.64 1.44 0 1.35-.76 1.97-.76.62-2.4.49-3.69-.28-5.77-.39-2.07-.1-5.43-.14-1.52 7.55-2.8 15.18-.45 2.79-.94 6.47-.49 3.67-.66 5.93-.08 1.19-.98 1.82-.9.64-2.18.64-1.35 0-2.09-.66-.74-.65-.74-1.72 0-.98.31-3.26t.72-4.78q.45-2.51.7-4.35.45-3.12 1.02-6.2.58-3.08 1.15-5.83.12-.61.29-1.41.16-.8.37-1.79-4.02.12-6.32.66-2.3.53-3.27 1.49-.96.97-.96 2.49 0 1.39.82 2.67.17.28.17.61 0 .78-.93 1.46-.92.68-1.91.68-.69 0-1.15-.42-.82-.69-1.35-1.99-.53-1.29-.53-2.93 0-3.49 2.27-5.6 2.28-2.12 6.94-3.1 4.66-.99 11.96-.99 4.52 0 7.21.17 2.68.16 4.69.53Zm-2.25 34.27q-1.56 0-2.2-1.64-.63-1.64-.63-5.25 0-5.34 1.51-10.14.37-1.19 1.22-1.75.84-.55 2.35-.55.83 0 1.15.21.33.2.33.78 0 .65-.61 2.95-.41 1.64-.66 2.87-.25 1.23-.41 3.04 1.35-3.53 3.04-5.75 1.68-2.21 3.3-3.16 1.62-.94 2.98-.94 2.66 0 2.66 2.67 0 .53-.37 2.58-.32 1.65-.32 2.06 0 1.43 1.02 1.43 1.15 0 2.96-1.8.53-.54 1.1-.54.54 0 .85.48.3.47.3 1.25 0 1.52-.82 2.38-1.15 1.19-2.68 2.03-1.54.84-3.27.84-2.17 0-3.3-1.11t-1.13-2.99q0-.62.12-1.24.09-.82.09-1.1 0-.66-.46-.66-.61 0-1.62 1.37-1 1.38-1.99 3.64-.98 2.25-1.6 4.76-.45 1.93-1.04 2.6-.6.68-1.87.68Zm34.06-9.36q.53 0 .84.5.31.49.31 1.35 0 1.64-.78 2.54-1.52 1.85-4.29 3.41t-5.93 1.56q-4.31 0-6.69-2.34-2.38-2.34-2.38-6.4 0-2.83 1.19-5.27 1.19-2.45 3.31-3.88 2.11-1.44 4.78-1.44 2.38 0 3.81 1.42 1.44 1.41 1.44 3.83 0 2.84-2.03 4.87-2.03 2.03-6.88 3.22 1.03 1.89 3.9 1.89 1.85 0 4.21-1.3 2.36-1.29 4.08-3.38.5-.58 1.11-.58Zm-10.34-5.95q-1.52 0-2.57 1.77-1.04 1.76-1.04 4.27v.08q2.42-.58 3.81-1.73 1.4-1.15 1.4-2.66 0-.78-.43-1.26-.43-.47-1.17-.47Zm31.85 5.95q.53 0 .84.5.31.49.31 1.35 0 1.64-.78 2.54-1.81 2.14-3.96 3.55-2.16 1.42-4.87 1.42-2.09 0-3.71-.78t-2.57-2.22q-2.34 2.96-5.54 2.96-2.25 0-3.57-1.31-1.31-1.32-1.31-3.49 0-2.05.94-3.33.95-1.27 2.67-1.27 1.48 0 1.48 1.11 0 .29-.08 1.03-.13 1.47-.13 1.68 0 1.23 1.07 1.23.78 0 1.5-.92.72-.93 1.19-2.53.47-1.6.47-3.53 0-1.47-.37-2.48t-.9-1.01q-.45 0-.66.23-.2.23-.41.76-.25.66-.66 1.05-.41.39-1.43.39-.91 0-1.44-.64-.53-.64-.53-1.95 0-2.09 1.27-3.28t3.28-1.19q1.73 0 3.12.84 1.4.84 2.14 2.44 1.23-1.64 2.77-2.46 1.54-.82 3.01-.82 1.6 0 2.44.74.85.73.85 2.38 0 1.84-.7 2.89t-1.68 1.05q-.91 0-1.24-.37-.32-.37-.49-1.07-.08-.49-.24-.74-.17-.25-.58-.25-.49 0-1.05.93-.55.92-.94 2.44-.39 1.52-.39 3.16 0 1.93.92 2.98.93 1.04 2.53 1.04 1.6 0 3.01-1.09 1.42-1.08 3.31-3.38.49-.58 1.11-.58Zm2.01 9.36q-1.85 0-3.02-1.7-1.17-1.71-1.17-4.25 0-3.08.41-5.64.41-2.57 1.36-5.44.41-1.23 1.15-1.77.73-.53 2.33-.53.91 0 1.26.29t.35.86q0 .33-.46 2.22-.41 1.51-.65 2.75-.82 4.31-.82 5.74 0 .86.2 1.21.21.35.66.35.61 0 1.54-1.23.92-1.23 1.97-3.73 1.04-2.51 2.03-6.16.33-1.23 1-1.77.68-.53 2.04-.53.94 0 1.31.23.37.22.37.84 0 1.02-1.03 5.62-1.15 5.25-1.15 6.48 0 .78.33 1.22.33.43.86.43.82 0 1.95-1.01 1.13-1 3.02-3.26.49-.58 1.11-.58.53 0 .84.5.31.49.31 1.35 0 1.64-.78 2.54-1.77 2.18-3.8 3.58-2.03 1.39-4.62 1.39-1.97 0-2.89-1.52-.92-1.52-.92-4.27-.7 2.79-2.1 4.29-1.39 1.5-2.99 1.5Zm20.15-22.04q-1.73 0-2.59-.8-.86-.8-.86-2.23 0-1.44 1.13-2.41 1.13-.96 2.81-.96 1.52 0 2.46.74.95.74.95 2.09 0 1.64-1.07 2.61-1.07.96-2.83.96Zm-.33 22.04q-2.67 0-3.88-1.89-1.21-1.88-1.21-5 0-1.85.47-4.74.47-2.9 1.21-5.4.37-1.31.99-1.81.61-.49 1.97-.49 2.09 0 2.09 1.4 0 1.02-.78 4.76-.98 4.51-.98 6.11 0 1.23.33 1.89.32.66 1.1.66.74 0 1.85-1.03t2.95-3.24q.5-.58 1.11-.58.54 0 .84.5.31.49.31 1.35 0 1.64-.78 2.54-4.06 4.97-7.59 4.97Z"
                data-horizontal-grow="left"
                data-vertical-center="false"
              ></path>
            </svg>
          </div>
          <div className=" hidden h-8 items-center gap-3 md:flex">
            <div className=" rounded-lg hover:bg-[#27B2C7] hover:text-white cursor-pointer bg-[#27B2C7] p-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="white"
                className="h-4 w-4"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
                />
              </svg>
            </div>
            <div className="  rounded-lg hover:bg-[#27B2C7] hover:text-white cursor-pointer p-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                className="h-4 w-4"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z"
                />
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z"
                />
              </svg>
            </div>
            <div className="  rounded-lg hover:bg-[#27B2C7] hover:text-white cursor-pointer p-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                className="h-4 w-4"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"
                />
              </svg>
            </div>
            <div className="  rounded-lg hover:bg-[#27B2C7] hover:text-white cursor-pointer p-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                className="h-4 w-4"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"
                />
              </svg>
            </div>
          </div>

          <div className="mx-4 flex w-full flex-grow items-center rounded-md border-2 border-gray-100 px-2 py-0.5 ">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              className="h-4 w-4"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
              />
            </svg>
            <input type="text" className=" ml-2 h-[24px] w-full outline-none" />
          </div>
          <div className=" mr-5  flex h-8 shrink-0 items-center gap-5">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              className="hidden h-4 w-4 md:flex"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
              />
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
              />
            </svg>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              className="hidden h-4 w-4 md:flex"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
              />
            </svg>
            <div className=" hidden rounded-md bg-[#DCFCE7] px-4 py-1 text-xs text-[#378F51] md:flex">
              Online
            </div>
            <img
              src="https://images.unsplash.com/photo-1532074205216-d0e1f4b87368?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG5mdCUyMHByb2ZpbGUlMjBwaWN0dXJlfGVufDB8fDB8fHww&auto=format&fit=crop&w=400&q=60"
              alt=""
              className=" h-7 w-7 shrink-0 rounded-full"
            />
          </div>
        </nav>
      </div>
    </div>
  );
}
Read-only
© 2023 TrexUI, Inc. All rights reserved.