UI Components in Trizzle library

Tailwind Component #21

<section>
  <div class="p-8 bg-gray-600">
    <div class="flex flex-wrap items-center justify-between -mx-2">
      <div class="w-full md:w-auto px-2 mb-6 md:mb-0">
        <div>
          <ul class="flex mb-2 items-center">
            <li><a class="text-xs text-gray-300 opacity-50 hover:opacity-80" href="#">Dashboard</a></li>
            <div class="w-1 h-1 mx-1 transform translate-y-1/2 bg-gray-300 bg-opacity-50 rounded-full"></div>
            <li><a class="text-xs text-gray-300 opacity-50 hover:opacity-80" href="#">Overview</a></li>
          </ul>
          <h4 class="text-2xl font-bold text-white leading-5">Subpage name</h4>
        </div>
      </div>
      <div class="w-full md:w-auto px-2">
        <div class="flex px-4 h-14 max-w-sm items-center border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
          <span class="flex-shrink-0">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.4733 12.5267L10.9999 10.0734C11.96 8.87633 12.4249 7.35692 12.2991 5.82759C12.1733 4.29826 11.4664 2.87525 10.3236 1.85115C9.18085 0.827062 7.68914 0.279732 6.15522 0.321705C4.62129 0.363679 3.16175 0.991766 2.0767 2.07682C0.991644 3.16187 0.363557 4.62142 0.321583 6.15534C0.27961 7.68926 0.82694 9.18097 1.85103 10.3237C2.87512 11.4665 4.29814 12.1735 5.82747 12.2993C7.3568 12.4251 8.87621 11.9601 10.0733 11.0001L12.5266 13.4534C12.5886 13.5159 12.6623 13.5655 12.7436 13.5993C12.8248 13.6332 12.9119 13.6506 12.9999 13.6506C13.0879 13.6506 13.1751 13.6332 13.2563 13.5993C13.3376 13.5655 13.4113 13.5159 13.4733 13.4534C13.5934 13.3291 13.6606 13.163 13.6606 12.9901C13.6606 12.8172 13.5934 12.651 13.4733 12.5267ZM6.33327 11.0001C5.41029 11.0001 4.50804 10.7264 3.74061 10.2136C2.97318 9.7008 2.37504 8.97197 2.02183 8.11925C1.66862 7.26653 1.57621 6.32821 1.75627 5.42297C1.93634 4.51773 2.38079 3.6862 3.03344 3.03356C3.68608 2.38091 4.5176 1.93646 5.42285 1.75639C6.32809 1.57633 7.2664 1.66874 8.11913 2.02195C8.97185 2.37516 9.70068 2.9733 10.2135 3.74073C10.7262 4.50816 10.9999 5.41041 10.9999 6.33339C10.9999 7.57107 10.5083 8.75805 9.6331 9.63322C8.75793 10.5084 7.57095 11.0001 6.33327 11.0001Z" fill="#3D485B"></path>
            </svg>
          </span>
          <input class="pl-2 text-sm font-medium text-gray-300 placeholder-gray-400 bg-transparent outline-none" id="pageHeaderInput8-1" type="search" placeholder="Search...">
        </div>
      </div>
    </div>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

A centered dark authentication card with a logo badge, heading, email and password fields, a remember-me checkbox, a forgot password link, a primary Sign In button, a Gmail sign-in option, and a sign-up link. The layout is a single vertical stack optimized for account login.

<section class="py-36">
  <div class="container px-4 mx-auto">
    <div class="relative max-w-lg mx-auto pt-16 pb-16 px-6 md:px-10 lg:px-16 bg-gray-500 rounded-xl">
      <a class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2" href="#">
        <img class="block" src="trizzle-assets/logos/trizzle-logo-blue.svg" alt="">
      </a>
      <div class="relative max-w-md mx-auto text-center">
        <h2 class="text-2xl text-gray-100 font-semibold mb-2">Log in to your account</h2>
        <p class="text-gray-300 font-medium mb-10">Welcome back! Please enter your details.</p>
        <form action="">
          <div class="relative w-full h-14 py-4 px-3 mb-8 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
            <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-300 px-1 bg-gray-500">Email</span>
            <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="signInInput1-1" type="email">
          </div>
          <div class="relative w-full h-14 py-4 px-3 mb-6 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
            <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-300 px-1 bg-gray-500">Password</span>
            <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="signInInput1-2" type="password">
          </div>
          <div class="flex flex-wrap items-center justify-between mb-6">
            <div class="flex items-center mb-4 sm:mb-0">
              <input id="signInInput1-3" type="checkbox">
              <label class="ml-2 text-xs text-gray-300 font-semibold" for="">Remember for 30 days</label>
            </div>
            <div class="w-full sm:w-auto"><a class="inline-block text-xs font-semibold text-blue-500 hover:text-blue-600" href="#">Forgot password?</a></div>
          </div>
          <button class="block w-full py-4 mb-4 leading-6 text-white font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200">Sign In</button>
          <a class="flex items-center justify-center w-full py-4 mb-6 leading-6 text-white font-semibold bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
            <div class="w-4 bg-white rounded-sm">
              <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.5 0H14L8 4.738L2 0H1.5C0.672 0 0 0.672 0 1.5V10.5C0 11.328 0.672 12 1.5 12H2V2.646L8 7.261L14 2.645V12H14.5C15.328 12 16 11.328 16 10.5V1.5C16 0.672 15.328 0 14.5 0Z" fill="#F44336"></path>
              </svg>
            </div>
            <span class="ml-3">Sign In with Gmail</span>
          </a>
          <p class="font-medium">
            <span class="text-gray-300">Don’t have an account?</span>
            <a class="inline-block text-blue-500 hover:underline" href="#">Sign up</a>
          </p>
        </form>
      </div>
    </div>
  </div>
</section>

Tailwind Component #38

Tailwind CSS

Trizzle

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="mb-6">
      <div class="flex flex-wrap -mx-3 -mb-6">
        <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
          <div class="max-w-sm mx-auto py-8 px-6 bg-gray-500 rounded-xl">
            <div class="max-w-xs mx-auto text-center">
              <div class="flex mx-auto w-12 h-12 mb-4 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21 16H1C0.734784 16 0.48043 16.1054 0.292893 16.2929C0.105357 16.4804 0 16.7348 0 17C0 17.2652 0.105357 17.5196 0.292893 17.7071C0.48043 17.8946 0.734784 18 1 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17C22 16.7348 21.8946 16.4804 21.7071 16.2929C21.5196 16.1054 21.2652 16 21 16ZM21 20H1C0.734784 20 0.48043 20.1054 0.292893 20.2929C0.105357 20.4804 0 20.7348 0 21C0 21.2652 0.105357 21.5196 0.292893 21.7071C0.48043 21.8946 0.734784 22 1 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21C22 20.7348 21.8946 20.4804 21.7071 20.2929C21.5196 20.1054 21.2652 20 21 20ZM5 6C4.80222 6 4.60888 6.05865 4.44443 6.16853C4.27998 6.27841 4.15181 6.43459 4.07612 6.61732C4.00043 6.80004 3.98063 7.00111 4.01921 7.19509C4.0578 7.38907 4.15304 7.56725 4.29289 7.70711C4.43275 7.84696 4.61093 7.9422 4.80491 7.98079C4.99889 8.01937 5.19996 7.99957 5.38268 7.92388C5.56541 7.84819 5.72159 7.72002 5.83147 7.55557C5.94135 7.39112 6 7.19778 6 7C6 6.73478 5.89464 6.48043 5.70711 6.29289C5.51957 6.10536 5.26522 6 5 6ZM19 0H3C2.20435 0 1.44129 0.31607 0.87868 0.87868C0.31607 1.44129 0 2.20435 0 3V11C0 11.7956 0.31607 12.5587 0.87868 13.1213C1.44129 13.6839 2.20435 14 3 14H19C19.7956 14 20.5587 13.6839 21.1213 13.1213C21.6839 12.5587 22 11.7956 22 11V3C22 2.20435 21.6839 1.44129 21.1213 0.87868C20.5587 0.31607 19.7956 0 19 0ZM20 11C20 11.2652 19.8946 11.5196 19.7071 11.7071C19.5196 11.8946 19.2652 12 19 12H3C2.73478 12 2.48043 11.8946 2.29289 11.7071C2.10536 11.5196 2 11.2652 2 11V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H19C19.2652 2 19.5196 2.10536 19.7071 2.29289C19.8946 2.48043 20 2.73478 20 3V11ZM11 4C10.4067 4 9.82664 4.17595 9.33329 4.50559C8.83994 4.83524 8.45542 5.30377 8.22836 5.85195C8.0013 6.40013 7.94189 7.00333 8.05764 7.58527C8.1734 8.16721 8.45912 8.70176 8.87868 9.12132C9.29824 9.54088 9.83279 9.8266 10.4147 9.94236C10.9967 10.0581 11.5999 9.9987 12.1481 9.77164C12.6962 9.54458 13.1648 9.16006 13.4944 8.66671C13.8241 8.17336 14 7.59334 14 7C14 6.20435 13.6839 5.44129 13.1213 4.87868C12.5587 4.31607 11.7956 4 11 4ZM11 8C10.8022 8 10.6089 7.94135 10.4444 7.83147C10.28 7.72159 10.1518 7.56541 10.0761 7.38268C10.0004 7.19996 9.98063 6.99889 10.0192 6.80491C10.0578 6.61093 10.153 6.43275 10.2929 6.29289C10.4327 6.15304 10.6109 6.0578 10.8049 6.01921C10.9989 5.98063 11.2 6.00043 11.3827 6.07612C11.5654 6.15181 11.7216 6.27998 11.8315 6.44443C11.9414 6.60888 12 6.80222 12 7C12 7.26522 11.8946 7.51957 11.7071 7.70711C11.5196 7.89464 11.2652 8 11 8ZM17 6C16.8022 6 16.6089 6.05865 16.4444 6.16853C16.28 6.27841 16.1518 6.43459 16.0761 6.61732C16.0004 6.80004 15.9806 7.00111 16.0192 7.19509C16.0578 7.38907 16.153 7.56725 16.2929 7.70711C16.4327 7.84696 16.6109 7.9422 16.8049 7.98079C16.9989 8.01937 17.2 7.99957 17.3827 7.92388C17.5654 7.84819 17.7216 7.72002 17.8315 7.55557C17.9414 7.39112 18 7.19778 18 7C18 6.73478 17.8946 6.48043 17.7071 6.29289C17.5196 6.10536 17.2652 6 17 6Z" fill="#194BFB"></path>
                </svg>
              </div>
              <span class="text-xs text-gray-300 font-semibold">Budget</span>
              <h4 class="text-2xl leading-8 text-gray-100 font-semibold mb-4">$28K</h4>
              <div class="flex flex-wrap items-center justify-center -m-1">
                <div class="w-auto p-1">
                  <span class="inline-block py-1 px-2 text-xs text-green-500 font-medium bg-teal-900 rounded-full">1,0%</span>
                </div>
                <div class="w-auto p-1">
                  <span class="text-xs text-gray-300 font-medium">Since last month</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
          <div class="max-w-sm mx-auto py-8 px-6 bg-gray-500 rounded-xl">
            <div class="max-w-xs mx-auto text-center">
              <div class="flex mx-auto w-12 h-12 mb-4 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
                <svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.3 9.22C11.8336 8.75813 12.2616 8.18688 12.5549 7.54502C12.8482 6.90316 13 6.20571 13 5.5C13 4.17392 12.4732 2.90215 11.5355 1.96447C10.5979 1.02678 9.32608 0.5 8 0.5C6.67392 0.5 5.40215 1.02678 4.46447 1.96447C3.52678 2.90215 3 4.17392 3 5.5C2.99999 6.20571 3.1518 6.90316 3.44513 7.54502C3.73845 8.18688 4.16642 8.75813 4.7 9.22C3.30014 9.85388 2.11247 10.8775 1.27898 12.1685C0.445495 13.4596 0.00147185 14.9633 0 16.5C0 16.7652 0.105357 17.0196 0.292893 17.2071C0.48043 17.3946 0.734784 17.5 1 17.5C1.26522 17.5 1.51957 17.3946 1.70711 17.2071C1.89464 17.0196 2 16.7652 2 16.5C2 14.9087 2.63214 13.3826 3.75736 12.2574C4.88258 11.1321 6.4087 10.5 8 10.5C9.5913 10.5 11.1174 11.1321 12.2426 12.2574C13.3679 13.3826 14 14.9087 14 16.5C14 16.7652 14.1054 17.0196 14.2929 17.2071C14.4804 17.3946 14.7348 17.5 15 17.5C15.2652 17.5 15.5196 17.3946 15.7071 17.2071C15.8946 17.0196 16 16.7652 16 16.5C15.9985 14.9633 15.5545 13.4596 14.721 12.1685C13.8875 10.8775 12.6999 9.85388 11.3 9.22ZM8 8.5C7.40666 8.5 6.82664 8.32405 6.33329 7.99441C5.83994 7.66476 5.45542 7.19623 5.22836 6.64805C5.0013 6.09987 4.94189 5.49667 5.05764 4.91473C5.1734 4.33279 5.45912 3.79824 5.87868 3.37868C6.29824 2.95912 6.83279 2.6734 7.41473 2.55764C7.99667 2.44189 8.59987 2.5013 9.14805 2.72836C9.69623 2.95542 10.1648 3.33994 10.4944 3.83329C10.8241 4.32664 11 4.90666 11 5.5C11 6.29565 10.6839 7.05871 10.1213 7.62132C9.55871 8.18393 8.79565 8.5 8 8.5ZM17.74 8.82C18.38 8.09933 18.798 7.20905 18.9438 6.25634C19.0896 5.30362 18.9569 4.32907 18.5618 3.45C18.1666 2.57093 17.5258 1.8248 16.7165 1.30142C15.9071 0.77805 14.9638 0.499742 14 0.5C13.7348 0.5 13.4804 0.605357 13.2929 0.792893C13.1054 0.98043 13 1.23478 13 1.5C13 1.76522 13.1054 2.01957 13.2929 2.20711C13.4804 2.39464 13.7348 2.5 14 2.5C14.7956 2.5 15.5587 2.81607 16.1213 3.37868C16.6839 3.94129 17 4.70435 17 5.5C16.9986 6.02524 16.8593 6.5409 16.5961 6.99542C16.3328 7.44994 15.9549 7.82738 15.5 8.09C15.3517 8.17552 15.2279 8.29766 15.1404 8.44474C15.0528 8.59182 15.0045 8.7589 15 8.93C14.9958 9.09976 15.0349 9.2678 15.1137 9.41826C15.1924 9.56872 15.3081 9.69665 15.45 9.79L15.84 10.05L15.97 10.12C17.1754 10.6917 18.1923 11.596 18.901 12.7263C19.6096 13.8566 19.9805 15.1659 19.97 16.5C19.97 16.7652 20.0754 17.0196 20.2629 17.2071C20.4504 17.3946 20.7048 17.5 20.97 17.5C21.2352 17.5 21.4896 17.3946 21.6771 17.2071C21.8646 17.0196 21.97 16.7652 21.97 16.5C21.9782 14.9654 21.5938 13.4543 20.8535 12.1101C20.1131 10.7659 19.0413 9.63331 17.74 8.82Z" fill="#194BFB"></path>
                </svg>
              </div>
              <span class="text-xs text-gray-300 font-semibold">Total customers</span>
              <h4 class="text-2xl leading-8 text-gray-100 font-semibold mb-4">1.6K</h4>
              <div class="flex flex-wrap items-center justify-center -m-1">
                <div class="w-auto p-1">
                  <span class="inline-block py-1 px-2 text-xs text-green-500 font-medium bg-teal-900 rounded-full">1,0%</span>
                </div>
                <div class="w-auto p-1">
                  <span class="text-xs text-gray-300 font-medium">Since last month</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
          <div class="max-w-sm mx-auto py-8 px-6 bg-gray-500 rounded-xl">
            <div class="max-w-xs mx-auto text-center">
              <div class="flex mx-auto w-12 h-12 mb-4 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
                <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13 2H11.82C11.6137 1.41645 11.2319 0.910998 10.7271 0.552938C10.2222 0.194879 9.61894 0.00173951 9 0H7C6.38106 0.00173951 5.7778 0.194879 5.27293 0.552938C4.76807 0.910998 4.38631 1.41645 4.18 2H3C2.20435 2 1.44129 2.31607 0.87868 2.87868C0.316071 3.44129 0 4.20435 0 5V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H13C13.7956 20 14.5587 19.6839 15.1213 19.1213C15.6839 18.5587 16 17.7956 16 17V5C16 4.20435 15.6839 3.44129 15.1213 2.87868C14.5587 2.31607 13.7956 2 13 2ZM6 3C6 2.73478 6.10536 2.48043 6.29289 2.29289C6.48043 2.10536 6.73478 2 7 2H9C9.26522 2 9.51957 2.10536 9.70711 2.29289C9.89464 2.48043 10 2.73478 10 3V4H6V3ZM14 17C14 17.2652 13.8946 17.5196 13.7071 17.7071C13.5196 17.8946 13.2652 18 13 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V5C2 4.73478 2.10536 4.48043 2.29289 4.29289C2.48043 4.10536 2.73478 4 3 4H4V5C4 5.26522 4.10536 5.51957 4.29289 5.70711C4.48043 5.89464 4.73478 6 5 6H11C11.2652 6 11.5196 5.89464 11.7071 5.70711C11.8946 5.51957 12 5.26522 12 5V4H13C13.2652 4 13.5196 4.10536 13.7071 4.29289C13.8946 4.48043 14 4.73478 14 5V17Z" fill="#194BFB"></path>
                </svg>
              </div>
              <span class="text-xs text-gray-300 font-semibold">Tasks Progress</span>
              <h4 class="text-2xl leading-8 text-gray-100 font-semibold mb-4">64.5%</h4>
              <div class="flex flex-wrap items-center justify-center -m-1">
                <div class="w-auto p-1">
                  <span class="inline-block py-1 px-2 text-xs text-green-500 font-medium bg-teal-900 rounded-full">1,0%</span>
                </div>
                <div class="w-auto p-1">
                  <span class="text-xs text-gray-300 font-medium">Since last month</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
          <div class="max-w-sm mx-auto py-8 px-6 bg-gray-500 rounded-xl">
            <div class="max-w-xs mx-auto text-center">
              <div class="flex mx-auto w-12 h-12 mb-4 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19 0H3C2.20435 0 1.44129 0.31607 0.87868 0.87868C0.31607 1.44129 0 2.20435 0 3V19C0 19.7956 0.31607 20.5587 0.87868 21.1213C1.44129 21.6839 2.20435 22 3 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V3C22 2.20435 21.6839 1.44129 21.1213 0.87868C20.5587 0.31607 19.7956 0 19 0ZM7 20H3C2.73478 20 2.48043 19.8946 2.29289 19.7071C2.10536 19.5196 2 19.2652 2 19V17.82C2.32067 17.9364 2.65886 17.9973 3 18H7V20ZM7 16H3C2.73478 16 2.48043 15.8946 2.29289 15.7071C2.10536 15.5196 2 15.2652 2 15V13.82C2.32067 13.9364 2.65886 13.9973 3 14H7V16ZM7 12H3C2.73478 12 2.48043 11.8946 2.29289 11.7071C2.10536 11.5196 2 11.2652 2 11V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H7V12ZM13 20H9V14H13V20ZM13 12H9V2H13V12ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H15V18H19C19.3411 17.9973 19.6793 17.9364 20 17.82V19ZM20 15C20 15.2652 19.8946 15.5196 19.7071 15.7071C19.5196 15.8946 19.2652 16 19 16H15V14H19C19.3411 13.9973 19.6793 13.9364 20 13.82V15ZM20 11C20 11.2652 19.8946 11.5196 19.7071 11.7071C19.5196 11.8946 19.2652 12 19 12H15V2H19C19.2652 2 19.5196 2.10536 19.7071 2.29289C19.8946 2.48043 20 2.73478 20 3V11ZM17 6C16.8022 6 16.6089 6.05865 16.4444 6.16853C16.28 6.27841 16.1518 6.43459 16.0761 6.61732C16.0004 6.80004 15.9806 7.00111 16.0192 7.19509C16.0578 7.38907 16.153 7.56725 16.2929 7.70711C16.4327 7.84696 16.6109 7.9422 16.8049 7.98079C16.9989 8.01937 17.2 7.99957 17.3827 7.92388C17.5654 7.84819 17.7216 7.72002 17.8315 7.55557C17.9414 7.39112 18 7.19778 18 7C18 6.73478 17.8946 6.48043 17.7071 6.29289C17.5196 6.10536 17.2652 6 17 6ZM5 8C5.19778 8 5.39112 7.94135 5.55557 7.83147C5.72002 7.72159 5.84819 7.56541 5.92388 7.38268C5.99957 7.19996 6.01937 6.99889 5.98079 6.80491C5.9422 6.61093 5.84696 6.43275 5.70711 6.29289C5.56725 6.15304 5.38907 6.0578 5.19509 6.01921C5.00111 5.98063 4.80004 6.00043 4.61732 6.07612C4.43459 6.15181 4.27841 6.27998 4.16853 6.44443C4.05865 6.60888 4 6.80222 4 7C4 7.26522 4.10536 7.51957 4.29289 7.70711C4.48043 7.89464 4.73478 8 5 8Z" fill="#194BFB"></path>
                </svg>
              </div>
              <span class="text-xs text-gray-300 font-semibold">Total profit</span>
              <h4 class="text-2xl leading-8 text-gray-100 font-semibold mb-4">$23K</h4>
              <div class="flex flex-wrap items-center justify-center -m-1">
                <div class="w-auto p-1">
                  <span class="inline-block py-1 px-2 text-xs text-green-500 font-medium bg-teal-900 rounded-full">1,0%</span>
                </div>
                <div class="w-auto p-1">
                  <span class="text-xs text-gray-300 font-medium">Since last month</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mb-6">
      <div class="flex flex-wrap -mx-3">
        <div class="w-full lg:w-2/3 px-3 mb-6 lg:mb-0">
          <div class="p-6 bg-gray-500 rounded-xl">
            <div class="flex flex-wrap -mx-4 -mb-4 justify-between items-center">
              <div class="w-auto px-4 mb-4">
                <h4 class="text-gray-100 font-bold tracking-wide">Latest Sales</h4>
              </div>
              <div class="w-auto px-4 mb-4">
                <div class="flex items-center">
                  <div class="mr-4">
                    <span class="inline-block w-2 h-2 mr-1 bg-blue-500 rounded-full"></span>
                    <span class="text-xs text-gray-300">This year</span>
                  </div>
                  <div class="mr-6">
                    <span class="inline-block w-2 h-2 mr-1 bg-purple-500 rounded-full"></span>
                    <span class="text-xs text-gray-300">Last year</span>
                  </div>
                  <div class="relative inline-block bg-gray-600 rounded-xl">
                    <select class="relative py-3 pl-2 pr-6 cursor-pointer bg-transparent text-xs text-gray-300 font-semibold appearance-none outline-none" style="z-index: 1;" name="" id="">
                      <option value="">Last 7 days</option>
                      <option value="">Last Month</option>
                    </select>
                    <span class="absolute top-1/2 right-0 mr-2 transform -translate-y-1/2" style="z-index: 0;">
                      <svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1 1.5L5 5.5L9 1.5" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="chart mt-8 mb-3" data-type="columns-thin" data-variant="two" style="min-height: 200px;"></div>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-3">
          <div class="p-6 bg-gray-500 rounded-xl">
            <h4 class="text-gray-100 font-bold tracking-wide mb-8">Traffic by Device</h4>
            <div class="chart mb-10" data-type="donut" style="min-height: 180px;"></div>
            <div class="flex flex-wrap px-4 items-center justify-between">
              <div class="text-center">
                <span class="inline-block w-2 h-2 mb-2 bg-blue-500 rounded-full"></span>
                <h6 class="text-xs text-gray-300 font-semibold">Desktop</h6>
                <h5 class="text-2xl text-gray-100 font-semibold">65%</h5>
              </div>
              <div class="text-center">
                <span class="inline-block w-2 h-2 mb-2 bg-purple-500 rounded-full"></span>
                <h6 class="text-xs text-gray-300 font-semibold">Mobile</h6>
                <h5 class="text-2xl text-gray-100 font-semibold">20%</h5>
              </div>
              <div class="text-center">
                <span class="inline-block w-2 h-2 mb-2 bg-yellow-500 rounded-full"></span>
                <h6 class="text-xs text-gray-300 font-semibold">Tablet</h6>
                <h5 class="text-2xl text-gray-100 font-semibold">15%</h5>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-3">
      <div class="w-full lg:w-1/3 px-3 mb-6 lg:mb-0">
        <div class="h-full py-6 px-4 sm:px-6 bg-gray-500 rounded-xl">
          <h4 class="text-lg text-gray-100 font-semibold mb-6">Latest Products</h4>
          <a class="flex p-4 items-center justify-between hover:bg-gray-600 rounded-xl transition duration-150" href="#">
            <div class="flex items-center pr-2">
              <div class="flex w-10 h-10 mr-3 items-center justify-center bg-gray-400 bg-opacity-20 text-blue-500 rounded-xl">
                <img src="trizzle-assets/logos/dropbox.svg" alt="">
              </div>
              <div>
                <h5 class="text-sm text-gray-100 leading-5 font-medium mb-1">Dropbox</h5>
                <p class="text-xs text-gray-300 font-semibold">Updated about 7 hours</p>
              </div>
            </div>
            <svg width="4" height="18" viewBox="0 0 4 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 4C2.39556 4 2.78224 3.8827 3.11114 3.66294C3.44004 3.44318 3.69639 3.13082 3.84776 2.76537C3.99914 2.39992 4.03874 1.99778 3.96157 1.60982C3.8844 1.22186 3.69392 0.865492 3.41421 0.585787C3.13451 0.306082 2.77814 0.115601 2.39018 0.0384303C2.00222 -0.0387401 1.60009 0.000866562 1.23463 0.152242C0.869182 0.303617 0.556825 0.559962 0.337062 0.88886C0.117299 1.21776 1.07779e-06 1.60444 1.07779e-06 2C1.07779e-06 2.53043 0.210715 3.03914 0.585788 3.41421C0.960861 3.78929 1.46957 4 2 4ZM2 14C1.60444 14 1.21776 14.1173 0.888861 14.3371C0.559963 14.5568 0.303617 14.8692 0.152242 15.2346C0.000866562 15.6001 -0.0387401 16.0022 0.0384303 16.3902C0.115601 16.7781 0.306083 17.1345 0.585788 17.4142C0.865493 17.6939 1.22186 17.8844 1.60982 17.9616C1.99778 18.0387 2.39992 17.9991 2.76537 17.8478C3.13082 17.6964 3.44318 17.44 3.66294 17.1111C3.8827 16.7822 4 16.3956 4 16C4 15.4696 3.78929 14.9609 3.41421 14.5858C3.03914 14.2107 2.53043 14 2 14ZM2 7C1.60444 7 1.21776 7.1173 0.888861 7.33706C0.559963 7.55682 0.303617 7.86918 0.152242 8.23463C0.000866562 8.60009 -0.0387401 9.00222 0.0384303 9.39018C0.115601 9.77814 0.306083 10.1345 0.585788 10.4142C0.865493 10.6939 1.22186 10.8844 1.60982 10.9616C1.99778 11.0387 2.39992 10.9991 2.76537 10.8478C3.13082 10.6964 3.44318 10.44 3.66294 10.1111C3.8827 9.78224 4 9.39556 4 9C4 8.46957 3.78929 7.96086 3.41421 7.58579C3.03914 7.21071 2.53043 7 2 7Z" fill="#3D485B"></path>
            </svg>
          </a>
          <a class="flex p-4 items-center justify-between hover:bg-gray-600 rounded-xl transition duration-150" href="#">
            <div class="flex items-center pr-2">
              <div class="flex w-10 h-10 mr-3 items-center justify-center bg-gray-400 bg-opacity-20 text-blue-500 rounded-xl">
                <img src="trizzle-assets/logos/medium.svg" alt="">
              </div>
              <div>
                <h5 class="text-sm text-gray-100 leading-5 font-medium mb-1">Medium</h5>
                <p class="text-xs text-gray-300 font-semibold">Updated about 7 hours</p>
              </div>
            </div>
            <svg width="4" height="18" viewBox="0 0 4 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 4C2.39556 4 2.78224 3.8827 3.11114 3.66294C3.44004 3.44318 3.69639 3.13082 3.84776 2.76537C3.99914 2.39992 4.03874 1.99778 3.96157 1.60982C3.8844 1.22186 3.69392 0.865492 3.41421 0.585787C3.13451 0.306082 2.77814 0.115601 2.39018 0.0384303C2.00222 -0.0387401 1.60009 0.000866562 1.23463 0.152242C0.869182 0.303617 0.556825 0.559962 0.337062 0.88886C0.117299 1.21776 1.07779e-06 1.60444 1.07779e-06 2C1.07779e-06 2.53043 0.210715 3.03914 0.585788 3.41421C0.960861 3.78929 1.46957 4 2 4ZM2 14C1.60444 14 1.21776 14.1173 0.888861 14.3371C0.559963 14.5568 0.303617 14.8692 0.152242 15.2346C0.000866562 15.6001 -0.0387401 16.0022 0.0384303 16.3902C0.115601 16.7781 0.306083 17.1345 0.585788 17.4142C0.865493 17.6939 1.22186 17.8844 1.60982 17.9616C1.99778 18.0387 2.39992 17.9991 2.76537 17.8478C3.13082 17.6964 3.44318 17.44 3.66294 17.1111C3.8827 16.7822 4 16.3956 4 16C4 15.4696 3.78929 14.9609 3.41421 14.5858C3.03914 14.2107 2.53043 14 2 14ZM2 7C1.60444 7 1.21776 7.1173 0.888861 7.33706C0.559963 7.55682 0.303617 7.86918 0.152242 8.23463C0.000866562 8.60009 -0.0387401 9.00222 0.0384303 9.39018C0.115601 9.77814 0.306083 10.1345 0.585788 10.4142C0.865493 10.6939 1.22186 10.8844 1.60982 10.9616C1.99778 11.0387 2.39992 10.9991 2.76537 10.8478C3.13082 10.6964 3.44318 10.44 3.66294 10.1111C3.8827 9.78224 4 9.39556 4 9C4 8.46957 3.78929 7.96086 3.41421 7.58579C3.03914 7.21071 2.53043 7 2 7Z" fill="#3D485B"></path>
            </svg>
          </a>
          <a class="flex p-4 items-center justify-between hover:bg-gray-600 rounded-xl transition duration-150" href="#">
            <div class="flex items-center pr-2">
              <div class="flex w-10 h-10 mr-3 items-center justify-center bg-gray-400 bg-opacity-20 text-blue-500 rounded-xl">
                <img src="trizzle-assets/logos/slack.svg" alt="">
              </div>
              <div>
                <h5 class="text-sm text-gray-100 leading-5 font-medium mb-1">Slack</h5>
                <p class="text-xs text-gray-300 font-semibold">Updated about 7 hours</p>
              </div>
            </div>
            <svg width="4" height="18" viewBox="0 0 4 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 4C2.39556 4 2.78224 3.8827 3.11114 3.66294C3.44004 3.44318 3.69639 3.13082 3.84776 2.76537C3.99914 2.39992 4.03874 1.99778 3.96157 1.60982C3.8844 1.22186 3.69392 0.865492 3.41421 0.585787C3.13451 0.306082 2.77814 0.115601 2.39018 0.0384303C2.00222 -0.0387401 1.60009 0.000866562 1.23463 0.152242C0.869182 0.303617 0.556825 0.559962 0.337062 0.88886C0.117299 1.21776 1.07779e-06 1.60444 1.07779e-06 2C1.07779e-06 2.53043 0.210715 3.03914 0.585788 3.41421C0.960861 3.78929 1.46957 4 2 4ZM2 14C1.60444 14 1.21776 14.1173 0.888861 14.3371C0.559963 14.5568 0.303617 14.8692 0.152242 15.2346C0.000866562 15.6001 -0.0387401 16.0022 0.0384303 16.3902C0.115601 16.7781 0.306083 17.1345 0.585788 17.4142C0.865493 17.6939 1.22186 17.8844 1.60982 17.9616C1.99778 18.0387 2.39992 17.9991 2.76537 17.8478C3.13082 17.6964 3.44318 17.44 3.66294 17.1111C3.8827 16.7822 4 16.3956 4 16C4 15.4696 3.78929 14.9609 3.41421 14.5858C3.03914 14.2107 2.53043 14 2 14ZM2 7C1.60444 7 1.21776 7.1173 0.888861 7.33706C0.559963 7.55682 0.303617 7.86918 0.152242 8.23463C0.000866562 8.60009 -0.0387401 9.00222 0.0384303 9.39018C0.115601 9.77814 0.306083 10.1345 0.585788 10.4142C0.865493 10.6939 1.22186 10.8844 1.60982 10.9616C1.99778 11.0387 2.39992 10.9991 2.76537 10.8478C3.13082 10.6964 3.44318 10.44 3.66294 10.1111C3.8827 9.78224 4 9.39556 4 9C4 8.46957 3.78929 7.96086 3.41421 7.58579C3.03914 7.21071 2.53043 7 2 7Z" fill="#3D485B"></path>
            </svg>
          </a>
          <a class="flex p-4 items-center justify-between hover:bg-gray-600 rounded-xl transition duration-150" href="#">
            <div class="flex items-center pr-2">
              <div class="flex w-10 h-10 mr-3 items-center justify-center bg-gray-400 bg-opacity-20 text-blue-500 rounded-xl">
                <img src="trizzle-assets/logos/github.svg" alt="">
              </div>
              <div>
                <h5 class="text-sm text-gray-100 leading-5 font-medium mb-1">Github</h5>
                <p class="text-xs text-gray-300 font-semibold">Updated about 7 hours</p>
              </div>
            </div>
            <svg width="4" height="18" viewBox="0 0 4 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 4C2.39556 4 2.78224 3.8827 3.11114 3.66294C3.44004 3.44318 3.69639 3.13082 3.84776 2.76537C3.99914 2.39992 4.03874 1.99778 3.96157 1.60982C3.8844 1.22186 3.69392 0.865492 3.41421 0.585787C3.13451 0.306082 2.77814 0.115601 2.39018 0.0384303C2.00222 -0.0387401 1.60009 0.000866562 1.23463 0.152242C0.869182 0.303617 0.556825 0.559962 0.337062 0.88886C0.117299 1.21776 1.07779e-06 1.60444 1.07779e-06 2C1.07779e-06 2.53043 0.210715 3.03914 0.585788 3.41421C0.960861 3.78929 1.46957 4 2 4ZM2 14C1.60444 14 1.21776 14.1173 0.888861 14.3371C0.559963 14.5568 0.303617 14.8692 0.152242 15.2346C0.000866562 15.6001 -0.0387401 16.0022 0.0384303 16.3902C0.115601 16.7781 0.306083 17.1345 0.585788 17.4142C0.865493 17.6939 1.22186 17.8844 1.60982 17.9616C1.99778 18.0387 2.39992 17.9991 2.76537 17.8478C3.13082 17.6964 3.44318 17.44 3.66294 17.1111C3.8827 16.7822 4 16.3956 4 16C4 15.4696 3.78929 14.9609 3.41421 14.5858C3.03914 14.2107 2.53043 14 2 14ZM2 7C1.60444 7 1.21776 7.1173 0.888861 7.33706C0.559963 7.55682 0.303617 7.86918 0.152242 8.23463C0.000866562 8.60009 -0.0387401 9.00222 0.0384303 9.39018C0.115601 9.77814 0.306083 10.1345 0.585788 10.4142C0.865493 10.6939 1.22186 10.8844 1.60982 10.9616C1.99778 11.0387 2.39992 10.9991 2.76537 10.8478C3.13082 10.6964 3.44318 10.44 3.66294 10.1111C3.8827 9.78224 4 9.39556 4 9C4 8.46957 3.78929 7.96086 3.41421 7.58579C3.03914 7.21071 2.53043 7 2 7Z" fill="#3D485B"></path>
            </svg>
          </a>
          <a class="flex p-4 items-center justify-between hover:bg-gray-600 rounded-xl transition duration-150" href="#">
            <div class="flex items-center pr-2">
              <div class="flex w-10 h-10 mr-3 items-center justify-center bg-gray-400 bg-opacity-20 text-blue-500 rounded-xl">
                <img src="trizzle-assets/logos/discord.svg" alt="">
              </div>
              <div>
                <h5 class="text-sm text-gray-100 leading-5 font-medium mb-1">Discord</h5>
                <p class="text-xs text-gray-300 font-semibold">Updated about 7 hours</p>
              </div>
            </div>
            <svg width="4" height="18" viewBox="0 0 4 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 4C2.39556 4 2.78224 3.8827 3.11114 3.66294C3.44004 3.44318 3.69639 3.13082 3.84776 2.76537C3.99914 2.39992 4.03874 1.99778 3.96157 1.60982C3.8844 1.22186 3.69392 0.865492 3.41421 0.585787C3.13451 0.306082 2.77814 0.115601 2.39018 0.0384303C2.00222 -0.0387401 1.60009 0.000866562 1.23463 0.152242C0.869182 0.303617 0.556825 0.559962 0.337062 0.88886C0.117299 1.21776 1.07779e-06 1.60444 1.07779e-06 2C1.07779e-06 2.53043 0.210715 3.03914 0.585788 3.41421C0.960861 3.78929 1.46957 4 2 4ZM2 14C1.60444 14 1.21776 14.1173 0.888861 14.3371C0.559963 14.5568 0.303617 14.8692 0.152242 15.2346C0.000866562 15.6001 -0.0387401 16.0022 0.0384303 16.3902C0.115601 16.7781 0.306083 17.1345 0.585788 17.4142C0.865493 17.6939 1.22186 17.8844 1.60982 17.9616C1.99778 18.0387 2.39992 17.9991 2.76537 17.8478C3.13082 17.6964 3.44318 17.44 3.66294 17.1111C3.8827 16.7822 4 16.3956 4 16C4 15.4696 3.78929 14.9609 3.41421 14.5858C3.03914 14.2107 2.53043 14 2 14ZM2 7C1.60444 7 1.21776 7.1173 0.888861 7.33706C0.559963 7.55682 0.303617 7.86918 0.152242 8.23463C0.000866562 8.60009 -0.0387401 9.00222 0.0384303 9.39018C0.115601 9.77814 0.306083 10.1345 0.585788 10.4142C0.865493 10.6939 1.22186 10.8844 1.60982 10.9616C1.99778 11.0387 2.39992 10.9991 2.76537 10.8478C3.13082 10.6964 3.44318 10.44 3.66294 10.1111C3.8827 9.78224 4 9.39556 4 9C4 8.46957 3.78929 7.96086 3.41421 7.58579C3.03914 7.21071 2.53043 7 2 7Z" fill="#3D485B"></path>
            </svg>
          </a>
          <a class="flex p-4 items-center justify-between hover:bg-gray-600 rounded-xl transition duration-150" href="#">
            <div class="flex items-center pr-2">
              <div class="flex w-10 h-10 mr-3 items-center justify-center bg-gray-400 bg-opacity-20 text-blue-500 rounded-xl">
                <img src="trizzle-assets/logos/spotify.svg" alt="">
              </div>
              <div>
                <h5 class="text-sm text-gray-100 leading-5 font-medium mb-1">Spotify</h5>
                <p class="text-xs text-gray-300 font-semibold">Updated about 7 hours</p>
              </div>
            </div>
            <svg width="4" height="18" viewBox="0 0 4 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 4C2.39556 4 2.78224 3.8827 3.11114 3.66294C3.44004 3.44318 3.69639 3.13082 3.84776 2.76537C3.99914 2.39992 4.03874 1.99778 3.96157 1.60982C3.8844 1.22186 3.69392 0.865492 3.41421 0.585787C3.13451 0.306082 2.77814 0.115601 2.39018 0.0384303C2.00222 -0.0387401 1.60009 0.000866562 1.23463 0.152242C0.869182 0.303617 0.556825 0.559962 0.337062 0.88886C0.117299 1.21776 1.07779e-06 1.60444 1.07779e-06 2C1.07779e-06 2.53043 0.210715 3.03914 0.585788 3.41421C0.960861 3.78929 1.46957 4 2 4ZM2 14C1.60444 14 1.21776 14.1173 0.888861 14.3371C0.559963 14.5568 0.303617 14.8692 0.152242 15.2346C0.000866562 15.6001 -0.0387401 16.0022 0.0384303 16.3902C0.115601 16.7781 0.306083 17.1345 0.585788 17.4142C0.865493 17.6939 1.22186 17.8844 1.60982 17.9616C1.99778 18.0387 2.39992 17.9991 2.76537 17.8478C3.13082 17.6964 3.44318 17.44 3.66294 17.1111C3.8827 16.7822 4 16.3956 4 16C4 15.4696 3.78929 14.9609 3.41421 14.5858C3.03914 14.2107 2.53043 14 2 14ZM2 7C1.60444 7 1.21776 7.1173 0.888861 7.33706C0.559963 7.55682 0.303617 7.86918 0.152242 8.23463C0.000866562 8.60009 -0.0387401 9.00222 0.0384303 9.39018C0.115601 9.77814 0.306083 10.1345 0.585788 10.4142C0.865493 10.6939 1.22186 10.8844 1.60982 10.9616C1.99778 11.0387 2.39992 10.9991 2.76537 10.8478C3.13082 10.6964 3.44318 10.44 3.66294 10.1111C3.8827 9.78224 4 9.39556 4 9C4 8.46957 3.78929 7.96086 3.41421 7.58579C3.03914 7.21071 2.53043 7 2 7Z" fill="#3D485B"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="w-full lg:w-2/3 px-3">
        <div class="h-full p-6 bg-gray-500 rounded-xl">
          <h4 class="text-lg text-gray-100 font-semibold mb-6">Latest Products</h4>
          <div class="w-full mt-6 pb-4 overflow-x-auto">
            <table class="w-full min-w-max">
              <thead>
                <tr class="text-left">
                  <th class="p-0">
                    <div class="py-3 px-6 rounded-l-xl bg-gray-600">
                      <span class="text-xs text-gray-300 font-semibold">ORDER REF</span>
                    </div>
                  </th>
                  <th class="p-0">
                    <div class="py-3 px-6 bg-gray-600">
                      <span class="text-xs text-gray-300 font-semibold">CUSTOMER</span>
                    </div>
                  </th>
                  <th class="p-0">
                    <div class="py-3 px-6 bg-gray-600">
                      <button class="inline-flex items-center text-xs text-gray-300 font-semibold">
                        <span class="mr-2">DATE</span>
                        <svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M7.8598 8.52669L4.9998 11.3934L2.1398 8.52669C2.01426 8.40115 1.844 8.33063 1.66646 8.33063C1.48893 8.33063 1.31867 8.40115 1.19313 8.52669C1.0676 8.65222 0.99707 8.82249 0.99707 9.00002C0.99707 9.17756 1.0676 9.34782 1.19313 9.47335L4.52646 12.8067C4.58844 12.8692 4.66217 12.9188 4.74341 12.9526C4.82465 12.9865 4.91179 13.0039 4.9998 13.0039C5.08781 13.0039 5.17494 12.9865 5.25618 12.9526C5.33742 12.9188 5.41116 12.8692 5.47313 12.8067L8.80646 9.47335C8.86862 9.41119 8.91793 9.3374 8.95157 9.25619C8.98521 9.17497 9.00252 9.08793 9.00252 9.00002C9.00252 8.91211 8.98521 8.82507 8.95157 8.74385C8.91793 8.66264 8.86862 8.58885 8.80646 8.52669C8.7443 8.46453 8.67051 8.41522 8.5893 8.38158C8.50808 8.34794 8.42104 8.33063 8.33313 8.33063C8.24522 8.33063 8.15818 8.34794 8.07696 8.38158C7.99575 8.41522 7.92196 8.46453 7.8598 8.52669ZM2.1398 5.47335L4.9998 2.60669L7.8598 5.47335C7.92177 5.53584 7.99551 5.58544 8.07675 5.61928C8.15799 5.65313 8.24512 5.67055 8.33313 5.67055C8.42114 5.67055 8.50828 5.65313 8.58952 5.61928C8.67075 5.58544 8.74449 5.53584 8.80646 5.47335C8.86895 5.41138 8.91855 5.33764 8.95239 5.2564C8.98624 5.17517 9.00366 5.08803 9.00366 5.00002C9.00366 4.91201 8.98624 4.82488 8.95239 4.74364C8.91855 4.6624 8.86895 4.58866 8.80646 4.52669L5.47313 1.19335C5.41116 1.13087 5.33742 1.08127 5.25618 1.04743C5.17494 1.01358 5.08781 0.996155 4.9998 0.996155C4.91179 0.996155 4.82465 1.01358 4.74341 1.04743C4.66217 1.08127 4.58844 1.13087 4.52646 1.19335L1.19313 4.52669C1.0676 4.65222 0.99707 4.82249 0.99707 5.00002C0.99707 5.17756 1.0676 5.34782 1.19313 5.47335C1.31867 5.59889 1.48893 5.66941 1.66646 5.66941C1.844 5.66941 2.01426 5.59889 2.1398 5.47335Z" fill="currentColor"></path>
                        </svg>
                      </button>
                    </div>
                  </th>
                  <th class="p-0">
                    <div class="py-3 px-5 rounded-r-xl bg-gray-600">
                      <span class="text-xs text-gray-300 font-semibold">STATUS</span>
                    </div>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="p-0">
                    <div class="h-16 p-6">
                      <h5 class="text-sm font-medium text-gray-100">CDD1049</h5>
                    </div>
                  </td>
                  <td class="p-0">
                    <div class="h-16 p-6">
                      <div class="flex h-full items-center">
                        <img class="w-8 h-8 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                        <span class="text-sm font-medium text-gray-100">John Doe</span>
                      </div>
                    </div>
                  </td>
                  <td class="p-0">
                    <div class="h-16 p-6">
                      <span class="text-sm text-gray-100 font-medium">July 06, 2022</span>
                    </div>
                  </td>
                  <td class="p-0">
                    <div class="h-16 p-6">
                      <div class="flex h-full items-center">
                        <span class="inline-block w-2 h-2 mr-1 bg-yellow-500 rounded-full"></span>
                        <span class="text-sm font-medium text-gray-100">Pending</span>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="p-0">
                    <div class="h-16 p-6 rounded-l-xl bg-gray-600">
                      <h5 class="text-sm font-medium text-gray-100">CDD1049</h5>
                    </div>
                  </td>
                  <td class="p-0">
                    <div class="h-16 p-6 bg-gray-600">
                      <div class="flex h-full items-center">
                        <img class="w-8 h-8 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                        <span class="text-sm font-medium text-gray-100">John Doe</span>
                      </div>
                    </div>
                  </td>
                  <td class="p-0">
                    <div class="h-16 p-6 bg-gray-600">
                      <h5 class="text-sm font-medium text-gray-100">July 06, 2022</h5>
                    </div>
                  </td>
                  <td class="p-0">
                    <div class="flex h-16 p-6 items-center rounded-r-xl bg-gray-600">
                      <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                      <span class="text-sm font-medium text-gray-100">Delivered</span>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="p-0">
                    <div class="h-16 p-6">
                      <h5 class="text-sm font-medium text-gray-100">CDD1049</h5>
                    </div>
                  </td>
                  <td class="p-0">
                    <div class="h-16 p-6">
                      <div class="flex h-full items-center">
                        <img class="w-8 h-8 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                        <span class="text-sm font-medium text-gray-100">John Doe</span>
                      </div>
                    </div>
                  </td>
                  <td class="p-0">
                    <div class="h-16 p-6">
                      <span class="text-sm text-gray-100 font-medium">July 06, 2022</span>
                    </div>
                  </td>
                  <td class="p-0">
                    <div class="h-16 p-6">
                      <div class="flex h-full items-center">
                        <span class="inline-block w-2 h-2 mr-1 bg-yellow-500 rounded-full"></span>
                        <span class="text-sm font-medium text-gray-100">Pending</span>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="p-0">
                    <div class="h-16 p-6 rounded-l-xl bg-gray-600">
                      <h5 class="text-sm font-medium text-gray-100">CDD1049</h5>
                    </div>
                  </td>
                  <td class="p-0">
                    <div class="h-16 p-6 bg-gray-600">
                      <div class="flex h-full items-center">
                        <img class="w-8 h-8 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                        <span class="text-sm font-medium text-gray-100">John Doe</span>
                      </div>
                    </div>
                  </td>
                  <td class="p-0">
                    <div class="h-16 p-6 bg-gray-600">
                      <h5 class="text-sm font-medium text-gray-100">July 06, 2022</h5>
                    </div>
                  </td>
                  <td class="p-0">
                    <div class="flex h-16 p-6 items-center rounded-r-xl bg-gray-600">
                      <span class="inline-block w-2 h-2 mr-1 bg-red-500 rounded-full"></span>
                      <span class="text-sm font-medium text-gray-100">Refunded</span>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="p-0">
                    <div class="h-16 p-6">
                      <h5 class="text-sm font-medium text-gray-100">CDD1049</h5>
                    </div>
                  </td>
                  <td class="p-0">
                    <div class="h-16 p-6">
                      <div class="flex h-full items-center">
                        <img class="w-8 h-8 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                        <span class="text-sm font-medium text-gray-100">John Doe</span>
                      </div>
                    </div>
                  </td>
                  <td class="p-0">
                    <div class="h-16 p-6">
                      <span class="text-sm text-gray-100 font-medium">July 06, 2022</span>
                    </div>
                  </td>
                  <td class="p-0">
                    <div class="h-16 p-6">
                      <div class="flex h-full items-center">
                        <span class="inline-block w-2 h-2 mr-1 bg-yellow-500 rounded-full"></span>
                        <span class="text-sm font-medium text-gray-100">Pending</span>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="p-0">
                    <div class="h-16 p-6 rounded-l-xl bg-gray-600">
                      <h5 class="text-sm font-medium text-gray-100">CDD1049</h5>
                    </div>
                  </td>
                  <td class="p-0">
                    <div class="h-16 p-6 bg-gray-600">
                      <div class="flex h-full items-center">
                        <img class="w-8 h-8 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                        <span class="text-sm font-medium text-gray-100">John Doe</span>
                      </div>
                    </div>
                  </td>
                  <td class="p-0">
                    <div class="h-16 p-6 bg-gray-600">
                      <h5 class="text-sm font-medium text-gray-100">July 06, 2022</h5>
                    </div>
                  </td>
                  <td class="p-0">
                    <div class="flex h-16 p-6 items-center rounded-r-xl bg-gray-600">
                      <span class="inline-block w-2 h-2 mr-1 bg-red-500 rounded-full"></span>
                      <span class="text-sm font-medium text-gray-100">Refunded</span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #39

Tailwind CSS

Trizzle

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="px-4 pt-6 pb-24 bg-gray-500 rounded-xl">
      <div class="flex items-center justify-between mb-3">
        <div class="flex items-center">
          <h3 class="text-lg text-white font-semibold mr-2">To do</h3>
          <span class="inline-flex items-center justify-center w-6 h-7 rounded-full bg-gray-600 text-xs font-medium text-gray-400">3</span>
        </div>
        <div>
          <button class="inline-block mr-2 text-gray-400 hover:text-gray-300">
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
            </svg>
          </button>
          <a class="inline-block py-1 text-gray-400 hover:text-gray-300" href="#">
            <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="h-1 w-full mb-4 rounded-full bg-purple-500"></div>
      <a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
        <h4 class="text-white font-semibold leading-6 mb-1">Implement Login</h4>
        <div class="flex items-center mb-4">
          <span class="h-2 w-2 mr-1 bg-pink-400 rounded-full"></span>
          <span class="text-xs font-medium text-pink-400">Development</span>
        </div>
        <p class="text-xs text-gray-300 leading-normal mb-10">This is an example task that can be used within a Kanban system.</p>
        <div class="pt-4 border-t border-gray-500">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <div class="flex items-center p-2 bg-gray-500 rounded-md">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span class="ml-2 text-xs font-medium text-gray-200">Jul 03</span>
              </div>
            </div>
            <div class="w-auto p-2">
              <div class="flex h-full items-center">
                <img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                <img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </a>
      <a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
        <h4 class="text-white font-semibold leading-6 mb-1">Release MVP</h4>
        <div class="flex items-center mb-4">
          <span class="h-2 w-2 mr-1 bg-green-500 rounded-full"></span>
          <span class="text-xs font-medium text-green-500">Planning</span>
        </div>
        <p class="text-xs text-gray-300 leading-normal mb-10">This is an example task that can be used within a Kanban system.</p>
        <div class="pt-4 border-t border-gray-500">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <div class="flex items-center p-2 bg-gray-500 rounded-md">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span class="ml-2 text-xs font-medium text-gray-200">Jul 04</span>
              </div>
            </div>
            <div class="w-auto p-2">
              <div class="flex h-full items-center">
                <img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-2-circle-border.png" alt="">
                <img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-women-3-circle-border.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </a>
      <a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
        <h4 class="text-white font-semibold leading-6 mb-1">Design Review</h4>
        <div class="flex items-center mb-4">
          <span class="h-2 w-2 mr-1 bg-purple-500 rounded-full"></span>
          <span class="text-xs font-medium text-purple-500">Design</span>
        </div>
        <div class="pt-4 border-t border-gray-500">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <div class="flex items-center p-2 bg-gray-500 rounded-md">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span class="ml-2 text-xs font-medium text-gray-200">Jul 05</span>
              </div>
            </div>
            <div class="w-auto p-2">
              <div class="inline-flex items-center justify-center w-8 h-8 bg-gray-500 rounded-full">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9.47333 7.47332C10.1269 6.95909 10.604 6.25393 10.8382 5.45594C11.0723 4.65796 11.0519 3.80682 10.7799 3.02096C10.5078 2.23509 9.9975 1.55358 9.32005 1.07122C8.64259 0.588861 7.83163 0.329651 7 0.329651C6.16836 0.329651 5.35741 0.588861 4.67995 1.07122C4.0025 1.55358 3.49223 2.23509 3.22014 3.02096C2.94805 3.80682 2.92767 4.65796 3.16184 5.45594C3.396 6.25393 3.87307 6.95909 4.52666 7.47332C3.40672 7.92201 2.42952 8.66621 1.69926 9.62659C0.968996 10.587 0.51304 11.7275 0.379998 12.9266C0.370368 13.0142 0.378075 13.1028 0.402681 13.1874C0.427287 13.2719 0.468309 13.3508 0.523405 13.4195C0.634677 13.5583 0.79652 13.6472 0.973331 13.6666C1.15014 13.6861 1.32744 13.6345 1.46621 13.5232C1.60499 13.412 1.69388 13.2501 1.71333 13.0733C1.85972 11.7701 2.48112 10.5665 3.45881 9.69251C4.4365 8.8185 5.70193 8.33533 7.01333 8.33533C8.32473 8.33533 9.59016 8.8185 10.5679 9.69251C11.5455 10.5665 12.1669 11.7701 12.3133 13.0733C12.3315 13.2371 12.4096 13.3884 12.5327 13.498C12.6559 13.6076 12.8152 13.6676 12.98 13.6666H13.0533C13.2281 13.6465 13.3878 13.5582 13.4977 13.4208C13.6076 13.2835 13.6587 13.1082 13.64 12.9333C13.5063 11.7308 13.0479 10.5873 12.3139 9.62545C11.5799 8.6636 10.5979 7.91963 9.47333 7.47332ZM7 6.99998C6.47258 6.99998 5.95701 6.84358 5.51848 6.55057C5.07995 6.25755 4.73815 5.84107 4.53632 5.3538C4.33449 4.86653 4.28168 4.33036 4.38457 3.81307C4.48746 3.29579 4.74144 2.82064 5.11438 2.4477C5.48732 2.07476 5.96247 1.82078 6.47976 1.71789C6.99704 1.61499 7.53322 1.6678 8.02049 1.86964C8.50776 2.07147 8.92423 2.41326 9.21725 2.85179C9.51027 3.29033 9.66667 3.8059 9.66667 4.33331C9.66667 5.04056 9.38571 5.71884 8.88562 6.21893C8.38552 6.71903 7.70724 6.99998 7 6.99998Z" fill="#3D485B"></path>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </a>
    </div>
  </div>
</section>

Tailwind Component #40

Tailwind CSS

Trizzle

<div x-data="{ mobileNavOpen: false }">
  <nav class="lg:hidden flex items-center justify-between p-8 bg-gray-700 mb-3">
    <div class="w-full xl:w-auto px-2 xl:mr-12">
      <div class="flex items-center justify-between">
        <a class="inline-flex items-center h-8" href="#">
          <img src="trizzle-assets/logos/trizzle-logo.svg" alt="">
        </a>
        <div class="xl:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="text-gray-400 hover:text-gray-300 focus:outline-none">
            <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <title>Mobile menu</title>
              <path d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden relative z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed top-0 left-0 w-full h-full bg-gray-800 opacity-50" :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}"></div>
    <nav class="fixed top-0 left-0 bottom-0 w-full max-w-xxs flex flex-col h-full py-8 px-4 bg-gray-700 overflow-auto">
      <div class="mb-6">
        <a class="inline-block mb-12" href="#">
          <img class="h-7" src="trizzle-assets/logos/trizzle-logo.svg" alt="">
        </a>
        <ul>
          <li class="mb-4">
            <a class="flex items-center p-4 text-white bg-blue-500 rounded-xl" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 11H1C0.734784 11 0.48043 11.1054 0.292893 11.2929C0.105357 11.4804 0 11.7348 0 12V19C0 19.2652 0.105357 19.5196 0.292893 19.7071C0.48043 19.8946 0.734784 20 1 20H8C8.26522 20 8.51957 19.8946 8.70711 19.7071C8.89464 19.5196 9 19.2652 9 19V12C9 11.7348 8.89464 11.4804 8.70711 11.2929C8.51957 11.1054 8.26522 11 8 11ZM7 18H2V13H7V18ZM19 0H12C11.7348 0 11.4804 0.105357 11.2929 0.292893C11.1054 0.48043 11 0.734784 11 1V8C11 8.26522 11.1054 8.51957 11.2929 8.70711C11.4804 8.89464 11.7348 9 12 9H19C19.2652 9 19.5196 8.89464 19.7071 8.70711C19.8946 8.51957 20 8.26522 20 8V1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0ZM18 7H13V2H18V7ZM19 11H12C11.7348 11 11.4804 11.1054 11.2929 11.2929C11.1054 11.4804 11 11.7348 11 12V19C11 19.2652 11.1054 19.5196 11.2929 19.7071C11.4804 19.8946 11.7348 20 12 20H19C19.2652 20 19.5196 19.8946 19.7071 19.7071C19.8946 19.5196 20 19.2652 20 19V12C20 11.7348 19.8946 11.4804 19.7071 11.2929C19.5196 11.1054 19.2652 11 19 11ZM18 18H13V13H18V18ZM8 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V8C0 8.26522 0.105357 8.51957 0.292893 8.70711C0.48043 8.89464 0.734784 9 1 9H8C8.26522 9 8.51957 8.89464 8.70711 8.70711C8.89464 8.51957 9 8.26522 9 8V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0ZM7 7H2V2H7V7Z" fill="currentColor"></path>
              </svg>
              <span class="ml-4 text-sm font-semibold">Overview</span>
            </a>
          </li>
          <li class="mb-4">
            <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
              <span class="text-gray-400">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 4C9.73478 4 9.48043 4.10536 9.29289 4.29289C9.10536 4.48043 9 4.73478 9 5V15C9 15.2652 9.10536 15.5196 9.29289 15.7071C9.48043 15.8946 9.73478 16 10 16C10.2652 16 10.5196 15.8946 10.7071 15.7071C10.8946 15.5196 11 15.2652 11 15V5C11 4.73478 10.8946 4.48043 10.7071 4.29289C10.5196 4.10536 10.2652 4 10 4ZM5 10C4.73478 10 4.48043 10.1054 4.29289 10.2929C4.10536 10.4804 4 10.7348 4 11V15C4 15.2652 4.10536 15.5196 4.29289 15.7071C4.48043 15.8946 4.73478 16 5 16C5.26522 16 5.51957 15.8946 5.70711 15.7071C5.89464 15.5196 6 15.2652 6 15V11C6 10.7348 5.89464 10.4804 5.70711 10.2929C5.51957 10.1054 5.26522 10 5 10ZM15 8C14.7348 8 14.4804 8.10536 14.2929 8.29289C14.1054 8.48043 14 8.73478 14 9V15C14 15.2652 14.1054 15.5196 14.2929 15.7071C14.4804 15.8946 14.7348 16 15 16C15.2652 16 15.5196 15.8946 15.7071 15.7071C15.8946 15.5196 16 15.2652 16 15V9C16 8.73478 15.8946 8.48043 15.7071 8.29289C15.5196 8.10536 15.2652 8 15 8ZM17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7956 20 17V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V17Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="ml-4 text-sm font-semibold">Analytics</span>
            </a>
          </li>
          <li class="mb-4">
            <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
              <span class="text-gray-400">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17 4.5H14V3.5C14 2.70435 13.6839 1.94129 13.1213 1.37868C12.5587 0.816071 11.7956 0.5 11 0.5H9C8.20435 0.5 7.44129 0.816071 6.87868 1.37868C6.31607 1.94129 6 2.70435 6 3.5V4.5H3C2.20435 4.5 1.44129 4.81607 0.87868 5.37868C0.316071 5.94129 0 6.70435 0 7.5V16.5C0 17.2956 0.316071 18.0587 0.87868 18.6213C1.44129 19.1839 2.20435 19.5 3 19.5H17C17.7956 19.5 18.5587 19.1839 19.1213 18.6213C19.6839 18.0587 20 17.2956 20 16.5V7.5C20 6.70435 19.6839 5.94129 19.1213 5.37868C18.5587 4.81607 17.7956 4.5 17 4.5ZM8 3.5C8 3.23478 8.10536 2.98043 8.29289 2.79289C8.48043 2.60536 8.73478 2.5 9 2.5H11C11.2652 2.5 11.5196 2.60536 11.7071 2.79289C11.8946 2.98043 12 3.23478 12 3.5V4.5H8V3.5ZM18 16.5C18 16.7652 17.8946 17.0196 17.7071 17.2071C17.5196 17.3946 17.2652 17.5 17 17.5H3C2.73478 17.5 2.48043 17.3946 2.29289 17.2071C2.10536 17.0196 2 16.7652 2 16.5V11C2.97544 11.3869 3.97818 11.7011 5 11.94V12.53C5 12.7952 5.10536 13.0496 5.29289 13.2371C5.48043 13.4246 5.73478 13.53 6 13.53C6.26522 13.53 6.51957 13.4246 6.70711 13.2371C6.89464 13.0496 7 12.7952 7 12.53V12.32C7.99435 12.4554 8.99649 12.5255 10 12.53C11.0035 12.5255 12.0057 12.4554 13 12.32V12.53C13 12.7952 13.1054 13.0496 13.2929 13.2371C13.4804 13.4246 13.7348 13.53 14 13.53C14.2652 13.53 14.5196 13.4246 14.7071 13.2371C14.8946 13.0496 15 12.7952 15 12.53V11.94C16.0218 11.7011 17.0246 11.3869 18 11V16.5ZM18 8.81C17.0274 9.22049 16.0244 9.55483 15 9.81V9.5C15 9.23478 14.8946 8.98043 14.7071 8.79289C14.5196 8.60536 14.2652 8.5 14 8.5C13.7348 8.5 13.4804 8.60536 13.2929 8.79289C13.1054 8.98043 13 9.23478 13 9.5V10.24C11.0113 10.54 8.98875 10.54 7 10.24V9.5C7 9.23478 6.89464 8.98043 6.70711 8.79289C6.51957 8.60536 6.26522 8.5 6 8.5C5.73478 8.5 5.48043 8.60536 5.29289 8.79289C5.10536 8.98043 5 9.23478 5 9.5V9.83C3.97562 9.57483 2.9726 9.24049 2 8.83V7.5C2 7.23478 2.10536 6.98043 2.29289 6.79289C2.48043 6.60536 2.73478 6.5 3 6.5H17C17.2652 6.5 17.5196 6.60536 17.7071 6.79289C17.8946 6.98043 18 7.23478 18 7.5V8.81Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="ml-4 text-sm font-semibold">Products</span>
            </a>
          </li>
          <li class="mb-4">
            <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
              <span class="text-gray-400">
                <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 17C12.2653 17 12.5196 16.8947 12.7071 16.7071C12.8947 16.5196 13 16.2652 13 16V14C13 13.7348 12.8947 13.4805 12.7071 13.2929C12.5196 13.1054 12.2653 13 12 13C11.7348 13 11.4805 13.1054 11.2929 13.2929C11.1054 13.4805 11 13.7348 11 14V16C11 16.2652 11.1054 16.5196 11.2929 16.7071C11.4805 16.8947 11.7348 17 12 17ZM8.00004 17C8.26525 17 8.51961 16.8947 8.70714 16.7071C8.89468 16.5196 9.00004 16.2652 9.00004 16V14C9.00004 13.7348 8.89468 13.4805 8.70714 13.2929C8.51961 13.1054 8.26525 13 8.00004 13C7.73482 13 7.48047 13.1054 7.29293 13.2929C7.10539 13.4805 7.00004 13.7348 7.00004 14V16C7.00004 16.2652 7.10539 16.5196 7.29293 16.7071C7.48047 16.8947 7.73482 17 8.00004 17ZM17 5.00003H15.62L13.89 1.55003C13.8372 1.42308 13.7587 1.3084 13.6595 1.21316C13.5603 1.11791 13.4426 1.04414 13.3136 0.996469C13.1846 0.948794 13.0472 0.928235 12.9099 0.936075C12.7726 0.943915 12.6384 0.979987 12.5157 1.04204C12.3929 1.10408 12.2843 1.19078 12.1966 1.2967C12.1089 1.40261 12.044 1.52548 12.006 1.65762C11.9679 1.78976 11.9575 1.92833 11.9754 2.06467C11.9933 2.20102 12.0391 2.3322 12.11 2.45003L13.38 5.00003H6.62004L7.89004 2.45003C7.9871 2.21693 7.9924 1.95575 7.90486 1.71891C7.81732 1.48208 7.64343 1.28712 7.4181 1.17319C7.19277 1.05926 6.93268 1.03479 6.69005 1.10469C6.44742 1.17458 6.24022 1.33368 6.11004 1.55003L4.38004 5.00003H3.00004C2.29323 5.01078 1.61291 5.27077 1.07909 5.73416C0.545259 6.19755 0.192211 6.83455 0.0822073 7.53283C-0.0277959 8.23112 0.112313 8.94581 0.477823 9.55088C0.843332 10.1559 1.41076 10.6125 2.08004 10.84L2.82004 18.3C2.89466 19.0426 3.24338 19.7307 3.79811 20.2299C4.35284 20.7292 5.07374 21.0038 5.82004 21H14.2C14.9463 21.0038 15.6672 20.7292 16.222 20.2299C16.7767 19.7307 17.1254 19.0426 17.2 18.3L17.94 10.84C18.6108 10.6118 19.1791 10.1536 19.5443 9.54651C19.9096 8.93942 20.0482 8.22266 19.9356 7.52317C19.823 6.82368 19.4665 6.18661 18.9292 5.7248C18.3919 5.26299 17.7085 5.00624 17 5.00003ZM15.19 18.1C15.1652 18.3475 15.0489 18.5769 14.864 18.7433C14.6791 18.9098 14.4388 19.0013 14.19 19H5.81004C5.56127 19.0013 5.32097 18.9098 5.13606 18.7433C4.95115 18.5769 4.83491 18.3475 4.81004 18.1L4.10004 11H15.9L15.19 18.1ZM17 9.00003H3.00004C2.73482 9.00003 2.48047 8.89467 2.29293 8.70713C2.10539 8.5196 2.00004 8.26524 2.00004 8.00003C2.00004 7.73481 2.10539 7.48046 2.29293 7.29292C2.48047 7.10538 2.73482 7.00003 3.00004 7.00003H17C17.2653 7.00003 17.5196 7.10538 17.7071 7.29292C17.8947 7.48046 18 7.73481 18 8.00003C18 8.26524 17.8947 8.5196 17.7071 8.70713C17.5196 8.89467 17.2653 9.00003 17 9.00003Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="ml-4 mr-auto text-sm font-semibold">Orders</span>
              <span class="flex items-center justify-center w-6 h-6 bg-blue-500 text-white text-xs font-semibold rounded-full">4</span>
            </a>
          </li>
          <li class="mb-4">
            <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
              <span class="text-gray-400">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.81 10.28C13.443 9.60024 13.7996 8.70877 13.81 7.78C13.81 6.77748 13.4118 5.81602 12.7029 5.10714C11.994 4.39825 11.0325 4 10.03 4C9.02748 4 8.06602 4.39825 7.35714 5.10714C6.64825 5.81602 6.25 6.77748 6.25 7.78C6.26044 8.70877 6.61702 9.60024 7.25 10.28C6.36865 10.7189 5.61022 11.3699 5.04292 12.1746C4.47561 12.9793 4.11723 13.9124 4 14.89C3.97083 15.1552 4.0482 15.4212 4.21511 15.6293C4.38202 15.8375 4.62478 15.9708 4.89 16C5.15522 16.0292 5.42116 15.9518 5.62932 15.7849C5.83749 15.618 5.97083 15.3752 6 15.11C6.11933 14.1411 6.58885 13.2494 7.32009 12.6027C8.05133 11.956 8.99382 11.599 9.97 11.599C10.9462 11.599 11.8887 11.956 12.6199 12.6027C13.3512 13.2494 13.8207 14.1411 13.94 15.11C13.9678 15.3664 14.0936 15.6022 14.2911 15.768C14.4887 15.9339 14.7426 16.017 15 16H15.11C15.3721 15.9698 15.6117 15.8373 15.7766 15.6313C15.9414 15.4252 16.0181 15.1624 15.99 14.9C15.8815 13.9276 15.5344 12.997 14.9796 12.191C14.4248 11.3851 13.6796 10.7286 12.81 10.28ZM10 9.56C9.64795 9.56 9.3038 9.4556 9.01108 9.26002C8.71836 9.06443 8.49022 8.78643 8.35549 8.46118C8.22077 8.13592 8.18552 7.77803 8.2542 7.43274C8.32288 7.08745 8.49241 6.77029 8.74135 6.52135C8.99029 6.27241 9.30745 6.10288 9.65274 6.0342C9.99803 5.96552 10.3559 6.00077 10.6812 6.13549C11.0064 6.27022 11.2844 6.49837 11.48 6.79109C11.6756 7.0838 11.78 7.42795 11.78 7.78C11.78 8.25208 11.5925 8.70484 11.2586 9.03865C10.9248 9.37247 10.4721 9.56 10 9.56ZM17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7956 20 17V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V17Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="ml-4 text-sm font-semibold">Customers</span>
            </a>
          </li>
          <li class="mb-4">
            <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
              <span class="text-gray-400">
                <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.8999 11.66C18.7396 11.4775 18.6512 11.2429 18.6512 11C18.6512 10.7571 18.7396 10.5225 18.8999 10.34L20.1799 8.9C20.3209 8.74267 20.4085 8.54471 20.4301 8.33451C20.4516 8.12431 20.4061 7.91269 20.2999 7.73L18.2999 4.27C18.1948 4.08752 18.0348 3.94288 17.8426 3.85669C17.6505 3.7705 17.4361 3.74716 17.2299 3.79L15.3499 4.17C15.1107 4.21943 14.8616 4.17959 14.6498 4.058C14.4379 3.93641 14.2779 3.74149 14.1999 3.51L13.5899 1.68C13.5228 1.48138 13.395 1.30887 13.2245 1.18684C13.0541 1.06482 12.8495 0.999461 12.6399 1H8.6399C8.42183 0.98862 8.20603 1.04893 8.02546 1.17172C7.84489 1.2945 7.70948 1.47302 7.6399 1.68L7.0799 3.51C7.0019 3.74149 6.84187 3.93641 6.63001 4.058C6.41815 4.17959 6.16911 4.21943 5.9299 4.17L3.9999 3.79C3.80445 3.76238 3.6052 3.79322 3.42724 3.87864C3.24929 3.96406 3.1006 4.10023 2.9999 4.27L0.999896 7.73C0.891056 7.91065 0.842118 8.12109 0.860079 8.33123C0.878039 8.54136 0.961979 8.74044 1.0999 8.9L2.3699 10.34C2.53022 10.5225 2.61863 10.7571 2.61863 11C2.61863 11.2429 2.53022 11.4775 2.3699 11.66L1.0999 13.1C0.961979 13.2596 0.878039 13.4586 0.860079 13.6688C0.842118 13.8789 0.891056 14.0894 0.999896 14.27L2.9999 17.73C3.10499 17.9125 3.26502 18.0571 3.45715 18.1433C3.64928 18.2295 3.86372 18.2528 4.0699 18.21L5.9499 17.83C6.18911 17.7806 6.43815 17.8204 6.65001 17.942C6.86187 18.0636 7.0219 18.2585 7.0999 18.49L7.7099 20.32C7.77948 20.527 7.91489 20.7055 8.09546 20.8283C8.27603 20.9511 8.49183 21.0114 8.7099 21H12.7099C12.9195 21.0005 13.1241 20.9352 13.2945 20.8132C13.465 20.6911 13.5928 20.5186 13.6599 20.32L14.2699 18.49C14.3479 18.2585 14.5079 18.0636 14.7198 17.942C14.9316 17.8204 15.1807 17.7806 15.4199 17.83L17.2999 18.21C17.5061 18.2528 17.7205 18.2295 17.9126 18.1433C18.1048 18.0571 18.2648 17.9125 18.3699 17.73L20.3699 14.27C20.4761 14.0873 20.5216 13.8757 20.5001 13.6655C20.4785 13.4553 20.3909 13.2573 20.2499 13.1L18.8999 11.66ZM17.4099 13L18.2099 13.9L16.9299 16.12L15.7499 15.88C15.0297 15.7328 14.2805 15.8551 13.6445 16.2238C13.0085 16.5925 12.53 17.1818 12.2999 17.88L11.9199 19H9.3599L8.9999 17.86C8.76975 17.1618 8.29128 16.5725 7.6553 16.2038C7.01932 15.8351 6.27012 15.7128 5.5499 15.86L4.3699 16.1L3.0699 13.89L3.8699 12.99C4.36185 12.44 4.63383 11.7279 4.63383 10.99C4.63383 10.2521 4.36185 9.54002 3.8699 8.99L3.0699 8.09L4.3499 5.89L5.5299 6.13C6.25012 6.27722 6.99932 6.15488 7.6353 5.7862C8.27128 5.41752 8.74975 4.82816 8.9799 4.13L9.3599 3H11.9199L12.2999 4.14C12.53 4.83816 13.0085 5.42752 13.6445 5.7962C14.2805 6.16488 15.0297 6.28722 15.7499 6.14L16.9299 5.9L18.2099 8.12L17.4099 9.02C16.9235 9.56876 16.6549 10.2767 16.6549 11.01C16.6549 11.7433 16.9235 12.4512 17.4099 13ZM10.6399 7C9.84877 7 9.07541 7.2346 8.41761 7.67412C7.75982 8.11365 7.24713 8.73836 6.94438 9.46927C6.64163 10.2002 6.56241 11.0044 6.71675 11.7804C6.8711 12.5563 7.25206 13.269 7.81147 13.8284C8.37088 14.3878 9.08361 14.7688 9.85954 14.9231C10.6355 15.0775 11.4397 14.9983 12.1706 14.6955C12.9015 14.3928 13.5262 13.8801 13.9658 13.2223C14.4053 12.5645 14.6399 11.7911 14.6399 11C14.6399 9.93914 14.2185 8.92172 13.4683 8.17157C12.7182 7.42143 11.7008 7 10.6399 7ZM10.6399 13C10.2443 13 9.85765 12.8827 9.52876 12.6629C9.19986 12.4432 8.94351 12.1308 8.79214 11.7654C8.64076 11.3999 8.60116 10.9978 8.67833 10.6098C8.7555 10.2219 8.94598 9.86549 9.22568 9.58579C9.50539 9.30608 9.86175 9.1156 10.2497 9.03843C10.6377 8.96126 11.0398 9.00087 11.4053 9.15224C11.7707 9.30362 12.0831 9.55996 12.3028 9.88886C12.5226 10.2178 12.6399 10.6044 12.6399 11C12.6399 11.5304 12.4292 12.0391 12.0541 12.4142C11.679 12.7893 11.1703 13 10.6399 13Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="ml-4 text-sm font-semibold">Settings</span>
            </a>
          </li>
          <li>
            <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
              <span class="text-gray-400">
                <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="ml-4 text-sm font-semibold">Notifications</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="mt-auto">
        <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
          <span class="text-gray-400">
            <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.71 11.71C14.6904 10.9387 15.406 9.88092 15.7572 8.68394C16.1085 7.48697 16.0779 6.21027 15.6698 5.03147C15.2617 3.85267 14.4963 2.83039 13.4801 2.10686C12.4639 1.38332 11.2474 0.994507 10 0.994507C8.75255 0.994507 7.53611 1.38332 6.51993 2.10686C5.50374 2.83039 4.73834 3.85267 4.33021 5.03147C3.92208 6.21027 3.89151 7.48697 4.24276 8.68394C4.59401 9.88092 5.3096 10.9387 6.29 11.71C4.61007 12.383 3.14428 13.4994 2.04889 14.9399C0.953495 16.3805 0.26956 18.0913 0.0699967 19.89C0.0555513 20.0213 0.0671132 20.1542 0.104022 20.2811C0.140931 20.4079 0.202464 20.5263 0.285108 20.6293C0.452016 20.8375 0.69478 20.9708 0.959997 21C1.22521 21.0292 1.49116 20.9518 1.69932 20.7849C1.90749 20.618 2.04082 20.3752 2.07 20.11C2.28958 18.1552 3.22168 16.3498 4.68822 15.0388C6.15475 13.7278 8.0529 13.003 10.02 13.003C11.9871 13.003 13.8852 13.7278 15.3518 15.0388C16.8183 16.3498 17.7504 18.1552 17.97 20.11C17.9972 20.3557 18.1144 20.5827 18.2991 20.747C18.4838 20.9114 18.7228 21.0015 18.97 21H19.08C19.3421 20.9698 19.5817 20.8373 19.7466 20.6313C19.9114 20.4252 19.9881 20.1624 19.96 19.9C19.7595 18.0962 19.0719 16.381 17.9708 14.9382C16.8698 13.4954 15.3969 12.3795 13.71 11.71ZM10 11C9.20887 11 8.43551 10.7654 7.77772 10.3259C7.11992 9.88636 6.60723 9.26164 6.30448 8.53074C6.00173 7.79983 5.92251 6.99557 6.07686 6.21964C6.2312 5.44372 6.61216 4.73099 7.17157 4.17158C7.73098 3.61217 8.44371 3.2312 9.21964 3.07686C9.99556 2.92252 10.7998 3.00173 11.5307 3.30448C12.2616 3.60724 12.8863 4.11993 13.3259 4.77772C13.7654 5.43552 14 6.20888 14 7C14 8.06087 13.5786 9.07828 12.8284 9.82843C12.0783 10.5786 11.0609 11 10 11Z" fill="currentColor"></path>
            </svg>
          </span>
          <span class="ml-4 text-sm font-semibold">Account</span>
        </a>
        <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
          <span class="text-gray-400">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.59 11L8.29 13.29C8.19627 13.383 8.12188 13.4936 8.07111 13.6154C8.02034 13.7373 7.9942 13.868 7.9942 14C7.9942 14.132 8.02034 14.2627 8.07111 14.3846C8.12188 14.5064 8.19627 14.617 8.29 14.71C8.38296 14.8037 8.49356 14.8781 8.61542 14.9289C8.73728 14.9797 8.86799 15.0058 9 15.0058C9.13201 15.0058 9.26272 14.9797 9.38458 14.9289C9.50644 14.8781 9.61704 14.8037 9.71 14.71L13.71 10.71C13.801 10.6149 13.8724 10.5028 13.92 10.38C14.02 10.1365 14.02 9.86347 13.92 9.62001C13.8724 9.49726 13.801 9.38511 13.71 9.29001L9.71 5.29001C9.61676 5.19677 9.50607 5.12281 9.38425 5.07235C9.26243 5.02189 9.13186 4.99592 9 4.99592C8.86814 4.99592 8.73757 5.02189 8.61575 5.07235C8.49393 5.12281 8.38324 5.19677 8.29 5.29001C8.19676 5.38325 8.1228 5.49394 8.07234 5.61576C8.02188 5.73758 7.99591 5.86815 7.99591 6.00001C7.99591 6.13187 8.02188 6.26244 8.07234 6.38426C8.1228 6.50608 8.19676 6.61677 8.29 6.71001L10.59 9.00001H1C0.734784 9.00001 0.48043 9.10537 0.292893 9.2929C0.105357 9.48044 0 9.73479 0 10C0 10.2652 0.105357 10.5196 0.292893 10.7071C0.48043 10.8947 0.734784 11 1 11H10.59ZM10 8.14093e-06C8.13109 -0.00833565 6.29724 0.507221 4.70647 1.4882C3.11569 2.46918 1.83165 3.87632 1 5.55001C0.880653 5.7887 0.861015 6.06503 0.945406 6.31821C1.0298 6.57138 1.21131 6.78066 1.45 6.90001C1.68869 7.01936 1.96502 7.03899 2.2182 6.9546C2.47137 6.87021 2.68065 6.6887 2.8 6.45001C3.43219 5.17333 4.39383 4.08863 5.58555 3.308C6.77727 2.52736 8.15582 2.07913 9.57876 2.0096C11.0017 1.94007 12.4174 2.25178 13.6795 2.91252C14.9417 3.57325 16.0045 4.55904 16.7581 5.768C17.5118 6.97697 17.9289 8.36526 17.9664 9.78939C18.0039 11.2135 17.6605 12.6219 16.9715 13.8688C16.2826 15.1158 15.2731 16.1562 14.0475 16.8824C12.8219 17.6087 11.4246 17.9945 10 18C8.50888 18.0065 7.04615 17.5924 5.77969 16.8053C4.51323 16.0181 3.49435 14.8899 2.84 13.55C2.72065 13.3113 2.51137 13.1298 2.2582 13.0454C2.00502 12.961 1.72869 12.9807 1.49 13.1C1.25131 13.2194 1.0698 13.4286 0.985406 13.6818C0.901015 13.935 0.920653 14.2113 1.04 14.45C1.83283 16.0455 3.03752 17.4002 4.52947 18.3741C6.02142 19.3479 7.74645 19.9054 9.52612 19.989C11.3058 20.0726 13.0755 19.6792 14.6521 18.8495C16.2288 18.0198 17.5552 16.784 18.4941 15.2698C19.433 13.7557 19.9503 12.0181 19.9925 10.237C20.0347 8.45588 19.6003 6.6958 18.7342 5.13884C17.8682 3.58188 16.6018 2.28457 15.0663 1.38111C13.5307 0.477653 11.7816 0.000844593 10 8.14093e-06Z" fill="currentColor"></path>
            </svg>
          </span>
          <span class="ml-4 text-sm font-semibold">Log Out</span>
        </a>
      </div>
    </nav>
  </div>
  <div class="hidden lg:block relative z-50">
    <nav class="fixed top-0 left-0 bottom-0 w-full max-w-xxs flex flex-col h-full py-8 px-4 bg-gray-700 overflow-auto">
      <div class="mb-6">
        <a class="inline-block mb-12" href="#">
          <img class="h-7" src="trizzle-assets/logos/trizzle-logo.svg" alt="">
        </a>
        <ul>
          <li class="mb-4">
            <a class="flex items-center p-4 text-white bg-blue-500 rounded-xl" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 11H1C0.734784 11 0.48043 11.1054 0.292893 11.2929C0.105357 11.4804 0 11.7348 0 12V19C0 19.2652 0.105357 19.5196 0.292893 19.7071C0.48043 19.8946 0.734784 20 1 20H8C8.26522 20 8.51957 19.8946 8.70711 19.7071C8.89464 19.5196 9 19.2652 9 19V12C9 11.7348 8.89464 11.4804 8.70711 11.2929C8.51957 11.1054 8.26522 11 8 11ZM7 18H2V13H7V18ZM19 0H12C11.7348 0 11.4804 0.105357 11.2929 0.292893C11.1054 0.48043 11 0.734784 11 1V8C11 8.26522 11.1054 8.51957 11.2929 8.70711C11.4804 8.89464 11.7348 9 12 9H19C19.2652 9 19.5196 8.89464 19.7071 8.70711C19.8946 8.51957 20 8.26522 20 8V1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0ZM18 7H13V2H18V7ZM19 11H12C11.7348 11 11.4804 11.1054 11.2929 11.2929C11.1054 11.4804 11 11.7348 11 12V19C11 19.2652 11.1054 19.5196 11.2929 19.7071C11.4804 19.8946 11.7348 20 12 20H19C19.2652 20 19.5196 19.8946 19.7071 19.7071C19.8946 19.5196 20 19.2652 20 19V12C20 11.7348 19.8946 11.4804 19.7071 11.2929C19.5196 11.1054 19.2652 11 19 11ZM18 18H13V13H18V18ZM8 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V8C0 8.26522 0.105357 8.51957 0.292893 8.70711C0.48043 8.89464 0.734784 9 1 9H8C8.26522 9 8.51957 8.89464 8.70711 8.70711C8.89464 8.51957 9 8.26522 9 8V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0ZM7 7H2V2H7V7Z" fill="currentColor"></path>
              </svg>
              <span class="ml-4 text-sm font-semibold">Overview</span>
            </a>
          </li>
          <li class="mb-4">
            <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
              <span class="text-gray-400">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 4C9.73478 4 9.48043 4.10536 9.29289 4.29289C9.10536 4.48043 9 4.73478 9 5V15C9 15.2652 9.10536 15.5196 9.29289 15.7071C9.48043 15.8946 9.73478 16 10 16C10.2652 16 10.5196 15.8946 10.7071 15.7071C10.8946 15.5196 11 15.2652 11 15V5C11 4.73478 10.8946 4.48043 10.7071 4.29289C10.5196 4.10536 10.2652 4 10 4ZM5 10C4.73478 10 4.48043 10.1054 4.29289 10.2929C4.10536 10.4804 4 10.7348 4 11V15C4 15.2652 4.10536 15.5196 4.29289 15.7071C4.48043 15.8946 4.73478 16 5 16C5.26522 16 5.51957 15.8946 5.70711 15.7071C5.89464 15.5196 6 15.2652 6 15V11C6 10.7348 5.89464 10.4804 5.70711 10.2929C5.51957 10.1054 5.26522 10 5 10ZM15 8C14.7348 8 14.4804 8.10536 14.2929 8.29289C14.1054 8.48043 14 8.73478 14 9V15C14 15.2652 14.1054 15.5196 14.2929 15.7071C14.4804 15.8946 14.7348 16 15 16C15.2652 16 15.5196 15.8946 15.7071 15.7071C15.8946 15.5196 16 15.2652 16 15V9C16 8.73478 15.8946 8.48043 15.7071 8.29289C15.5196 8.10536 15.2652 8 15 8ZM17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7956 20 17V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V17Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="ml-4 text-sm font-semibold">Analytics</span>
            </a>
          </li>
          <li class="mb-4">
            <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
              <span class="text-gray-400">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17 4.5H14V3.5C14 2.70435 13.6839 1.94129 13.1213 1.37868C12.5587 0.816071 11.7956 0.5 11 0.5H9C8.20435 0.5 7.44129 0.816071 6.87868 1.37868C6.31607 1.94129 6 2.70435 6 3.5V4.5H3C2.20435 4.5 1.44129 4.81607 0.87868 5.37868C0.316071 5.94129 0 6.70435 0 7.5V16.5C0 17.2956 0.316071 18.0587 0.87868 18.6213C1.44129 19.1839 2.20435 19.5 3 19.5H17C17.7956 19.5 18.5587 19.1839 19.1213 18.6213C19.6839 18.0587 20 17.2956 20 16.5V7.5C20 6.70435 19.6839 5.94129 19.1213 5.37868C18.5587 4.81607 17.7956 4.5 17 4.5ZM8 3.5C8 3.23478 8.10536 2.98043 8.29289 2.79289C8.48043 2.60536 8.73478 2.5 9 2.5H11C11.2652 2.5 11.5196 2.60536 11.7071 2.79289C11.8946 2.98043 12 3.23478 12 3.5V4.5H8V3.5ZM18 16.5C18 16.7652 17.8946 17.0196 17.7071 17.2071C17.5196 17.3946 17.2652 17.5 17 17.5H3C2.73478 17.5 2.48043 17.3946 2.29289 17.2071C2.10536 17.0196 2 16.7652 2 16.5V11C2.97544 11.3869 3.97818 11.7011 5 11.94V12.53C5 12.7952 5.10536 13.0496 5.29289 13.2371C5.48043 13.4246 5.73478 13.53 6 13.53C6.26522 13.53 6.51957 13.4246 6.70711 13.2371C6.89464 13.0496 7 12.7952 7 12.53V12.32C7.99435 12.4554 8.99649 12.5255 10 12.53C11.0035 12.5255 12.0057 12.4554 13 12.32V12.53C13 12.7952 13.1054 13.0496 13.2929 13.2371C13.4804 13.4246 13.7348 13.53 14 13.53C14.2652 13.53 14.5196 13.4246 14.7071 13.2371C14.8946 13.0496 15 12.7952 15 12.53V11.94C16.0218 11.7011 17.0246 11.3869 18 11V16.5ZM18 8.81C17.0274 9.22049 16.0244 9.55483 15 9.81V9.5C15 9.23478 14.8946 8.98043 14.7071 8.79289C14.5196 8.60536 14.2652 8.5 14 8.5C13.7348 8.5 13.4804 8.60536 13.2929 8.79289C13.1054 8.98043 13 9.23478 13 9.5V10.24C11.0113 10.54 8.98875 10.54 7 10.24V9.5C7 9.23478 6.89464 8.98043 6.70711 8.79289C6.51957 8.60536 6.26522 8.5 6 8.5C5.73478 8.5 5.48043 8.60536 5.29289 8.79289C5.10536 8.98043 5 9.23478 5 9.5V9.83C3.97562 9.57483 2.9726 9.24049 2 8.83V7.5C2 7.23478 2.10536 6.98043 2.29289 6.79289C2.48043 6.60536 2.73478 6.5 3 6.5H17C17.2652 6.5 17.5196 6.60536 17.7071 6.79289C17.8946 6.98043 18 7.23478 18 7.5V8.81Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="ml-4 text-sm font-semibold">Products</span>
            </a>
          </li>
          <li class="mb-4">
            <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
              <span class="text-gray-400">
                <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 17C12.2653 17 12.5196 16.8947 12.7071 16.7071C12.8947 16.5196 13 16.2652 13 16V14C13 13.7348 12.8947 13.4805 12.7071 13.2929C12.5196 13.1054 12.2653 13 12 13C11.7348 13 11.4805 13.1054 11.2929 13.2929C11.1054 13.4805 11 13.7348 11 14V16C11 16.2652 11.1054 16.5196 11.2929 16.7071C11.4805 16.8947 11.7348 17 12 17ZM8.00004 17C8.26525 17 8.51961 16.8947 8.70714 16.7071C8.89468 16.5196 9.00004 16.2652 9.00004 16V14C9.00004 13.7348 8.89468 13.4805 8.70714 13.2929C8.51961 13.1054 8.26525 13 8.00004 13C7.73482 13 7.48047 13.1054 7.29293 13.2929C7.10539 13.4805 7.00004 13.7348 7.00004 14V16C7.00004 16.2652 7.10539 16.5196 7.29293 16.7071C7.48047 16.8947 7.73482 17 8.00004 17ZM17 5.00003H15.62L13.89 1.55003C13.8372 1.42308 13.7587 1.3084 13.6595 1.21316C13.5603 1.11791 13.4426 1.04414 13.3136 0.996469C13.1846 0.948794 13.0472 0.928235 12.9099 0.936075C12.7726 0.943915 12.6384 0.979987 12.5157 1.04204C12.3929 1.10408 12.2843 1.19078 12.1966 1.2967C12.1089 1.40261 12.044 1.52548 12.006 1.65762C11.9679 1.78976 11.9575 1.92833 11.9754 2.06467C11.9933 2.20102 12.0391 2.3322 12.11 2.45003L13.38 5.00003H6.62004L7.89004 2.45003C7.9871 2.21693 7.9924 1.95575 7.90486 1.71891C7.81732 1.48208 7.64343 1.28712 7.4181 1.17319C7.19277 1.05926 6.93268 1.03479 6.69005 1.10469C6.44742 1.17458 6.24022 1.33368 6.11004 1.55003L4.38004 5.00003H3.00004C2.29323 5.01078 1.61291 5.27077 1.07909 5.73416C0.545259 6.19755 0.192211 6.83455 0.0822073 7.53283C-0.0277959 8.23112 0.112313 8.94581 0.477823 9.55088C0.843332 10.1559 1.41076 10.6125 2.08004 10.84L2.82004 18.3C2.89466 19.0426 3.24338 19.7307 3.79811 20.2299C4.35284 20.7292 5.07374 21.0038 5.82004 21H14.2C14.9463 21.0038 15.6672 20.7292 16.222 20.2299C16.7767 19.7307 17.1254 19.0426 17.2 18.3L17.94 10.84C18.6108 10.6118 19.1791 10.1536 19.5443 9.54651C19.9096 8.93942 20.0482 8.22266 19.9356 7.52317C19.823 6.82368 19.4665 6.18661 18.9292 5.7248C18.3919 5.26299 17.7085 5.00624 17 5.00003ZM15.19 18.1C15.1652 18.3475 15.0489 18.5769 14.864 18.7433C14.6791 18.9098 14.4388 19.0013 14.19 19H5.81004C5.56127 19.0013 5.32097 18.9098 5.13606 18.7433C4.95115 18.5769 4.83491 18.3475 4.81004 18.1L4.10004 11H15.9L15.19 18.1ZM17 9.00003H3.00004C2.73482 9.00003 2.48047 8.89467 2.29293 8.70713C2.10539 8.5196 2.00004 8.26524 2.00004 8.00003C2.00004 7.73481 2.10539 7.48046 2.29293 7.29292C2.48047 7.10538 2.73482 7.00003 3.00004 7.00003H17C17.2653 7.00003 17.5196 7.10538 17.7071 7.29292C17.8947 7.48046 18 7.73481 18 8.00003C18 8.26524 17.8947 8.5196 17.7071 8.70713C17.5196 8.89467 17.2653 9.00003 17 9.00003Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="ml-4 mr-auto text-sm font-semibold">Orders</span>
              <span class="flex items-center justify-center w-6 h-6 bg-blue-500 text-white text-xs font-semibold rounded-full">4</span>
            </a>
          </li>
          <li class="mb-4">
            <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
              <span class="text-gray-400">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.81 10.28C13.443 9.60024 13.7996 8.70877 13.81 7.78C13.81 6.77748 13.4118 5.81602 12.7029 5.10714C11.994 4.39825 11.0325 4 10.03 4C9.02748 4 8.06602 4.39825 7.35714 5.10714C6.64825 5.81602 6.25 6.77748 6.25 7.78C6.26044 8.70877 6.61702 9.60024 7.25 10.28C6.36865 10.7189 5.61022 11.3699 5.04292 12.1746C4.47561 12.9793 4.11723 13.9124 4 14.89C3.97083 15.1552 4.0482 15.4212 4.21511 15.6293C4.38202 15.8375 4.62478 15.9708 4.89 16C5.15522 16.0292 5.42116 15.9518 5.62932 15.7849C5.83749 15.618 5.97083 15.3752 6 15.11C6.11933 14.1411 6.58885 13.2494 7.32009 12.6027C8.05133 11.956 8.99382 11.599 9.97 11.599C10.9462 11.599 11.8887 11.956 12.6199 12.6027C13.3512 13.2494 13.8207 14.1411 13.94 15.11C13.9678 15.3664 14.0936 15.6022 14.2911 15.768C14.4887 15.9339 14.7426 16.017 15 16H15.11C15.3721 15.9698 15.6117 15.8373 15.7766 15.6313C15.9414 15.4252 16.0181 15.1624 15.99 14.9C15.8815 13.9276 15.5344 12.997 14.9796 12.191C14.4248 11.3851 13.6796 10.7286 12.81 10.28ZM10 9.56C9.64795 9.56 9.3038 9.4556 9.01108 9.26002C8.71836 9.06443 8.49022 8.78643 8.35549 8.46118C8.22077 8.13592 8.18552 7.77803 8.2542 7.43274C8.32288 7.08745 8.49241 6.77029 8.74135 6.52135C8.99029 6.27241 9.30745 6.10288 9.65274 6.0342C9.99803 5.96552 10.3559 6.00077 10.6812 6.13549C11.0064 6.27022 11.2844 6.49837 11.48 6.79109C11.6756 7.0838 11.78 7.42795 11.78 7.78C11.78 8.25208 11.5925 8.70484 11.2586 9.03865C10.9248 9.37247 10.4721 9.56 10 9.56ZM17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7956 20 17V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V17Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="ml-4 text-sm font-semibold">Customers</span>
            </a>
          </li>
          <li class="mb-4">
            <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
              <span class="text-gray-400">
                <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.8999 11.66C18.7396 11.4775 18.6512 11.2429 18.6512 11C18.6512 10.7571 18.7396 10.5225 18.8999 10.34L20.1799 8.9C20.3209 8.74267 20.4085 8.54471 20.4301 8.33451C20.4516 8.12431 20.4061 7.91269 20.2999 7.73L18.2999 4.27C18.1948 4.08752 18.0348 3.94288 17.8426 3.85669C17.6505 3.7705 17.4361 3.74716 17.2299 3.79L15.3499 4.17C15.1107 4.21943 14.8616 4.17959 14.6498 4.058C14.4379 3.93641 14.2779 3.74149 14.1999 3.51L13.5899 1.68C13.5228 1.48138 13.395 1.30887 13.2245 1.18684C13.0541 1.06482 12.8495 0.999461 12.6399 1H8.6399C8.42183 0.98862 8.20603 1.04893 8.02546 1.17172C7.84489 1.2945 7.70948 1.47302 7.6399 1.68L7.0799 3.51C7.0019 3.74149 6.84187 3.93641 6.63001 4.058C6.41815 4.17959 6.16911 4.21943 5.9299 4.17L3.9999 3.79C3.80445 3.76238 3.6052 3.79322 3.42724 3.87864C3.24929 3.96406 3.1006 4.10023 2.9999 4.27L0.999896 7.73C0.891056 7.91065 0.842118 8.12109 0.860079 8.33123C0.878039 8.54136 0.961979 8.74044 1.0999 8.9L2.3699 10.34C2.53022 10.5225 2.61863 10.7571 2.61863 11C2.61863 11.2429 2.53022 11.4775 2.3699 11.66L1.0999 13.1C0.961979 13.2596 0.878039 13.4586 0.860079 13.6688C0.842118 13.8789 0.891056 14.0894 0.999896 14.27L2.9999 17.73C3.10499 17.9125 3.26502 18.0571 3.45715 18.1433C3.64928 18.2295 3.86372 18.2528 4.0699 18.21L5.9499 17.83C6.18911 17.7806 6.43815 17.8204 6.65001 17.942C6.86187 18.0636 7.0219 18.2585 7.0999 18.49L7.7099 20.32C7.77948 20.527 7.91489 20.7055 8.09546 20.8283C8.27603 20.9511 8.49183 21.0114 8.7099 21H12.7099C12.9195 21.0005 13.1241 20.9352 13.2945 20.8132C13.465 20.6911 13.5928 20.5186 13.6599 20.32L14.2699 18.49C14.3479 18.2585 14.5079 18.0636 14.7198 17.942C14.9316 17.8204 15.1807 17.7806 15.4199 17.83L17.2999 18.21C17.5061 18.2528 17.7205 18.2295 17.9126 18.1433C18.1048 18.0571 18.2648 17.9125 18.3699 17.73L20.3699 14.27C20.4761 14.0873 20.5216 13.8757 20.5001 13.6655C20.4785 13.4553 20.3909 13.2573 20.2499 13.1L18.8999 11.66ZM17.4099 13L18.2099 13.9L16.9299 16.12L15.7499 15.88C15.0297 15.7328 14.2805 15.8551 13.6445 16.2238C13.0085 16.5925 12.53 17.1818 12.2999 17.88L11.9199 19H9.3599L8.9999 17.86C8.76975 17.1618 8.29128 16.5725 7.6553 16.2038C7.01932 15.8351 6.27012 15.7128 5.5499 15.86L4.3699 16.1L3.0699 13.89L3.8699 12.99C4.36185 12.44 4.63383 11.7279 4.63383 10.99C4.63383 10.2521 4.36185 9.54002 3.8699 8.99L3.0699 8.09L4.3499 5.89L5.5299 6.13C6.25012 6.27722 6.99932 6.15488 7.6353 5.7862C8.27128 5.41752 8.74975 4.82816 8.9799 4.13L9.3599 3H11.9199L12.2999 4.14C12.53 4.83816 13.0085 5.42752 13.6445 5.7962C14.2805 6.16488 15.0297 6.28722 15.7499 6.14L16.9299 5.9L18.2099 8.12L17.4099 9.02C16.9235 9.56876 16.6549 10.2767 16.6549 11.01C16.6549 11.7433 16.9235 12.4512 17.4099 13ZM10.6399 7C9.84877 7 9.07541 7.2346 8.41761 7.67412C7.75982 8.11365 7.24713 8.73836 6.94438 9.46927C6.64163 10.2002 6.56241 11.0044 6.71675 11.7804C6.8711 12.5563 7.25206 13.269 7.81147 13.8284C8.37088 14.3878 9.08361 14.7688 9.85954 14.9231C10.6355 15.0775 11.4397 14.9983 12.1706 14.6955C12.9015 14.3928 13.5262 13.8801 13.9658 13.2223C14.4053 12.5645 14.6399 11.7911 14.6399 11C14.6399 9.93914 14.2185 8.92172 13.4683 8.17157C12.7182 7.42143 11.7008 7 10.6399 7ZM10.6399 13C10.2443 13 9.85765 12.8827 9.52876 12.6629C9.19986 12.4432 8.94351 12.1308 8.79214 11.7654C8.64076 11.3999 8.60116 10.9978 8.67833 10.6098C8.7555 10.2219 8.94598 9.86549 9.22568 9.58579C9.50539 9.30608 9.86175 9.1156 10.2497 9.03843C10.6377 8.96126 11.0398 9.00087 11.4053 9.15224C11.7707 9.30362 12.0831 9.55996 12.3028 9.88886C12.5226 10.2178 12.6399 10.6044 12.6399 11C12.6399 11.5304 12.4292 12.0391 12.0541 12.4142C11.679 12.7893 11.1703 13 10.6399 13Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="ml-4 text-sm font-semibold">Settings</span>
            </a>
          </li>
          <li>
            <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
              <span class="text-gray-400">
                <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="ml-4 text-sm font-semibold">Notifications</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="mt-auto">
        <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
          <span class="text-gray-400">
            <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.71 11.71C14.6904 10.9387 15.406 9.88092 15.7572 8.68394C16.1085 7.48697 16.0779 6.21027 15.6698 5.03147C15.2617 3.85267 14.4963 2.83039 13.4801 2.10686C12.4639 1.38332 11.2474 0.994507 10 0.994507C8.75255 0.994507 7.53611 1.38332 6.51993 2.10686C5.50374 2.83039 4.73834 3.85267 4.33021 5.03147C3.92208 6.21027 3.89151 7.48697 4.24276 8.68394C4.59401 9.88092 5.3096 10.9387 6.29 11.71C4.61007 12.383 3.14428 13.4994 2.04889 14.9399C0.953495 16.3805 0.26956 18.0913 0.0699967 19.89C0.0555513 20.0213 0.0671132 20.1542 0.104022 20.2811C0.140931 20.4079 0.202464 20.5263 0.285108 20.6293C0.452016 20.8375 0.69478 20.9708 0.959997 21C1.22521 21.0292 1.49116 20.9518 1.69932 20.7849C1.90749 20.618 2.04082 20.3752 2.07 20.11C2.28958 18.1552 3.22168 16.3498 4.68822 15.0388C6.15475 13.7278 8.0529 13.003 10.02 13.003C11.9871 13.003 13.8852 13.7278 15.3518 15.0388C16.8183 16.3498 17.7504 18.1552 17.97 20.11C17.9972 20.3557 18.1144 20.5827 18.2991 20.747C18.4838 20.9114 18.7228 21.0015 18.97 21H19.08C19.3421 20.9698 19.5817 20.8373 19.7466 20.6313C19.9114 20.4252 19.9881 20.1624 19.96 19.9C19.7595 18.0962 19.0719 16.381 17.9708 14.9382C16.8698 13.4954 15.3969 12.3795 13.71 11.71ZM10 11C9.20887 11 8.43551 10.7654 7.77772 10.3259C7.11992 9.88636 6.60723 9.26164 6.30448 8.53074C6.00173 7.79983 5.92251 6.99557 6.07686 6.21964C6.2312 5.44372 6.61216 4.73099 7.17157 4.17158C7.73098 3.61217 8.44371 3.2312 9.21964 3.07686C9.99556 2.92252 10.7998 3.00173 11.5307 3.30448C12.2616 3.60724 12.8863 4.11993 13.3259 4.77772C13.7654 5.43552 14 6.20888 14 7C14 8.06087 13.5786 9.07828 12.8284 9.82843C12.0783 10.5786 11.0609 11 10 11Z" fill="currentColor"></path>
            </svg>
          </span>
          <span class="ml-4 text-sm font-semibold">Account</span>
        </a>
        <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
          <span class="text-gray-400">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.59 11L8.29 13.29C8.19627 13.383 8.12188 13.4936 8.07111 13.6154C8.02034 13.7373 7.9942 13.868 7.9942 14C7.9942 14.132 8.02034 14.2627 8.07111 14.3846C8.12188 14.5064 8.19627 14.617 8.29 14.71C8.38296 14.8037 8.49356 14.8781 8.61542 14.9289C8.73728 14.9797 8.86799 15.0058 9 15.0058C9.13201 15.0058 9.26272 14.9797 9.38458 14.9289C9.50644 14.8781 9.61704 14.8037 9.71 14.71L13.71 10.71C13.801 10.6149 13.8724 10.5028 13.92 10.38C14.02 10.1365 14.02 9.86347 13.92 9.62001C13.8724 9.49726 13.801 9.38511 13.71 9.29001L9.71 5.29001C9.61676 5.19677 9.50607 5.12281 9.38425 5.07235C9.26243 5.02189 9.13186 4.99592 9 4.99592C8.86814 4.99592 8.73757 5.02189 8.61575 5.07235C8.49393 5.12281 8.38324 5.19677 8.29 5.29001C8.19676 5.38325 8.1228 5.49394 8.07234 5.61576C8.02188 5.73758 7.99591 5.86815 7.99591 6.00001C7.99591 6.13187 8.02188 6.26244 8.07234 6.38426C8.1228 6.50608 8.19676 6.61677 8.29 6.71001L10.59 9.00001H1C0.734784 9.00001 0.48043 9.10537 0.292893 9.2929C0.105357 9.48044 0 9.73479 0 10C0 10.2652 0.105357 10.5196 0.292893 10.7071C0.48043 10.8947 0.734784 11 1 11H10.59ZM10 8.14093e-06C8.13109 -0.00833565 6.29724 0.507221 4.70647 1.4882C3.11569 2.46918 1.83165 3.87632 1 5.55001C0.880653 5.7887 0.861015 6.06503 0.945406 6.31821C1.0298 6.57138 1.21131 6.78066 1.45 6.90001C1.68869 7.01936 1.96502 7.03899 2.2182 6.9546C2.47137 6.87021 2.68065 6.6887 2.8 6.45001C3.43219 5.17333 4.39383 4.08863 5.58555 3.308C6.77727 2.52736 8.15582 2.07913 9.57876 2.0096C11.0017 1.94007 12.4174 2.25178 13.6795 2.91252C14.9417 3.57325 16.0045 4.55904 16.7581 5.768C17.5118 6.97697 17.9289 8.36526 17.9664 9.78939C18.0039 11.2135 17.6605 12.6219 16.9715 13.8688C16.2826 15.1158 15.2731 16.1562 14.0475 16.8824C12.8219 17.6087 11.4246 17.9945 10 18C8.50888 18.0065 7.04615 17.5924 5.77969 16.8053C4.51323 16.0181 3.49435 14.8899 2.84 13.55C2.72065 13.3113 2.51137 13.1298 2.2582 13.0454C2.00502 12.961 1.72869 12.9807 1.49 13.1C1.25131 13.2194 1.0698 13.4286 0.985406 13.6818C0.901015 13.935 0.920653 14.2113 1.04 14.45C1.83283 16.0455 3.03752 17.4002 4.52947 18.3741C6.02142 19.3479 7.74645 19.9054 9.52612 19.989C11.3058 20.0726 13.0755 19.6792 14.6521 18.8495C16.2288 18.0198 17.5552 16.784 18.4941 15.2698C19.433 13.7557 19.9503 12.0181 19.9925 10.237C20.0347 8.45588 19.6003 6.6958 18.7342 5.13884C17.8682 3.58188 16.6018 2.28457 15.0663 1.38111C13.5307 0.477653 11.7816 0.000844593 10 8.14093e-06Z" fill="currentColor"></path>
            </svg>
          </span>
          <span class="ml-4 text-sm font-semibold">Log Out</span>
        </a>
      </div>
    </nav>
  </div>
  <div class="relative z-40 mx-auto lg:ml-80"></div>
</div>

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Shuffle Components in Trizzle library

Framework

UI Library

Components

Tailwind Component #21

Your next website starts here

Tailwind Component #22

Dark dashboard sidebar navigation with Trizzle logo

Tailwind Component #23

Dark Companies Table with Pagination

Tailwind Component #24

Dark Account Balance Summary Cards

Tailwind Component #25

Dark Kanban Board with Four Task Columns

Tailwind Component #26

Dark Kanban Board with Four Task Columns

Tailwind Component #27

Personal Info Profile Form with Photo Upload

Tailwind Component #28

Dark App Top Navigation Bar with Logo, Links, and User Menu

Tailwind Component #29

Dark Notification Toast with Close Button

Tailwind Component #30

Money Flow Line Chart Card

Tailwind Component #31

Dark User Profile Card with Avatar and Contact Actions

Tailwind Component #32

Blue gradient hero banner with dashboard preview and Get Started button

Tailwind Component #33

Dark Success Notification Toast

Tailwind Component #34

Dark Deactivate Account Confirmation Modal

Tailwind Component #35

Dark blue info alert banner with dismiss button

Tailwind Component #36

Dark Pagination Control with Numbered Pages

Tailwind Component #37

Dark Login Form Card with Email, Password, and Gmail Sign-In

Tailwind Component #38

Tailwind Component #39

Tailwind Component #40

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

UI Components

Extensions

Support

Company