Skip to content

Instantly share code, notes, and snippets.

@FindZach

FindZach/html

Created June 20, 2023 22:48
Show Gist options
  • Save FindZach/fe2529f19c5b8fa2823168181bb2db21 to your computer and use it in GitHub Desktop.
Save FindZach/fe2529f19c5b8fa2823168181bb2db21 to your computer and use it in GitHub Desktop.
Download ZIP
navbar.component.html
Raw
html
<!-- Section: Design Block -->
<section class="" [ngClass]="colorScheme?.background" class="">
<nav
class="flex-no-wrap relative flex w-full items-center justify-between py-2 shadow-md shadow-black/5 dark:shadow-black/10 lg:flex-wrap lg:justify-start lg:py-2.5"
data-te-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-3">
<button
[ngClass]="colorScheme?.text"
class="block border-0 bg-transparent px-2 hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 lg:hidden"
type="button" data-te-collapse-init data-te-target="#navbarSupportedContentX"
aria-controls="navbarSupportedContentX" aria-expanded="false" aria-label="Toggle navigation">
<span class="[&>svg]:w-7">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-7 w-7">
<path fill-rule="evenodd"
d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
clip-rule="evenodd" />
</svg>
</span>
</button>
<div class="!visible hidden flex-grow basis-[100%] items-center lg:!flex lg:basis-auto"
id="navbarSupportedContentX" data-te-collapse-item>
<ul class="mr-auto flex flex-row" data-te-navbar-nav-ref>
<li data-te-nav-item-ref>
<a
[ngClass]="colorScheme?.text"
class="block py-2 pr-2 transition duration-150 ease-in-out lg:px-2"
href="#!"
[routerLink]="['/admin/tutorial']"
>Tutorial Admin</a
>
</li>
<li data-te-nav-item-ref>
<a
[ngClass]="colorScheme?.text"
class="block py-2 pr-2 transition duration-150 ease-in-out lg:px-2"
(click)="getThemeService().toggleTheme()"
>Toggle Theme</a
>
</li>
<li data-te-nav-item-ref>
<a
class="block py-2 pr-2 transition duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 dark:text-gray-200 dark:hover:text-white dark:focus:text-white lg:px-2"
href="#!"
[ngClass]="colorScheme?.text"
data-te-ripple-init
data-te-ripple-color="dark"
[routerLink]="['/tutorial']"
>Tutorial List</a
>
</li>
<li class="static" data-te-nav-item-ref data-te-dropdown-ref>
<a class="flex items-center whitespace-nowrap py-2 px-2 transition duration-300 ease-in-out"
href="#" data-te-ripple-init data-te-ripple-color="light" type="button" id="dropdownMenuButtonX"
[ngClass]="colorScheme?.text"
data-te-dropdown-toggle-ref aria-expanded="false" data-te-nav-link-ref>Menu
<span class="ml-2 w-2">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z">
</path>
</svg>
</span>
</a>
<div
[ngClass]="colorScheme?.background"
class="absolute left-0 top-full right-0 z-[1000] mt-0 hidden w-full border-none bg-white bg-clip-padding shadow-lg shadow-black/5 dark:bg-neutral-700 [&[data-te-dropdown-show]]:block"
aria-labelledby="dropdownMenuButtonX" data-te-dropdown-menu-ref>
<div class="mx-4 py-5 md:px-6 lg:px-8">
<div class="grid gap-6 lg:grid-cols-3">
<ul>
<li class="p-3 transition duration-300 ease-in-out hover:bg-neutral-50 dark:hover:bg-neutral-600">
<a href="#!">
<div class="flex items-start">
<div class="shrink-0">
<div class="pr-3">
<span
class="[&>svg]:mr-2 [&>svg]:h-6 [&>svg]:w-6 [&>svg]:text-primary dark:[&>svg]:text-primary-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z" />
</svg>
</span>
</div>
</div>
<div class="grow">
<p class="mb-1 font-bold" [ngClass]="colorScheme?.text">
Projects
</p>
<p class="" [ngClass]="colorScheme?.text">
Ut vulputate est non quam dignissim elementum.
</p>
</div>
</div>
</a>
</li>
<li class="p-3 transition duration-300 ease-in-out hover:bg-neutral-50 dark:hover:bg-neutral-600">
<a href="#!">
<div class="flex items-start">
<div class="shrink-0">
<div class="pr-3">
<span
class="[&>svg]:mr-2 [&>svg]:h-6 [&>svg]:w-6 [&>svg]:text-primary dark:[&>svg]:text-primary-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
<path stroke-linecap="round" stroke-linejoin="round"
d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
</svg>
</span>
</div>
</div>
<div class="grow">
<p class="mb-1 font-bold" [ngClass]="colorScheme?.text">
Analytics
</p>
<p class="mb-0" [ngClass]="colorScheme?.accent">
Nulla sit amet condimentum quam vulputate est.
</p>
</div>
</div>
</a>
</li>
<li class="p-3 transition duration-300 ease-in-out hover:bg-neutral-50 dark:hover:bg-neutral-600">
<a href="#!">
<div class="flex items-start">
<div class="shrink-0">
<div class="pr-3">
<span
class="[&>svg]:mr-2 [&>svg]:h-6 [&>svg]:w-6 [&>svg]:text-primary dark:[&>svg]:text-primary-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
</svg>
</span>
</div>
</div>
<div class="grow">
<p class="mb-1 font-bold text-neutral-800 dark:text-white">
Support
</p>
<p class="mb-0 text-neutral-500 dark:text-neutral-200">
Morbi arcu ante, pellentesque id leo eget.
</p>
</div>
</div>
</a>
</li>
<li class="p-3 transition duration-300 ease-in-out hover:bg-neutral-50 dark:hover:bg-neutral-600">
<a href="#!">
<div class="flex items-start">
<div class="shrink-0">
<div class="pr-3">
<span
class="[&>svg]:mr-2 [&>svg]:h-6 [&>svg]:w-6 [&>svg]:text-primary dark:[&>svg]:text-primary-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 01-.657.643 48.39 48.39 0 01-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 01-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 00-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 01-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 00.657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 01-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 005.427-.63 48.05 48.05 0 00.582-4.717.532.532 0 00-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 00.658-.663 48.422 48.422 0 00-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 01-.61-.58v0z" />
</svg>
</span>
</div>
</div>
<div class="grow">
<p class="mb-1 font-bold text-neutral-800 dark:text-white">
Plugins
</p>
<p class="mb-0 text-neutral-500 dark:text-neutral-200">
Proin malesuada est non volutpat euismod arcu
ante
</p>
</div>
</div>
</a>
</li>
<li class="p-3 transition duration-300 ease-in-out hover:bg-neutral-50 dark:hover:bg-neutral-600">
<a href="#!">
<div class="flex items-start">
<div class="shrink-0">
<div class="pr-3">
<span
class="[&>svg]:mr-2 [&>svg]:h-6 [&>svg]:w-6 [&>svg]:text-primary dark:[&>svg]:text-primary-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z" />
</svg>
</span>
</div>
</div>
<div class="grow">
<p class="mb-1 font-bold text-neutral-800 dark:text-white">
Tools
</p>
<p class="mb-0 text-neutral-500 dark:text-neutral-200">
Curabitur tristique, mi a mollis sagittis,
metus felis mattis arcu.
</p>
</div>
</div>
</a>
</li>
</ul>
<ul>
<li class="p-3 transition duration-300 ease-in-out hover:bg-neutral-50 dark:hover:bg-neutral-600">
<a href="#!">
<div class="flex items-start">
<div class="shrink-0">
<div class="pr-3">
<span
class="[&>svg]:mr-2 [&>svg]:h-6 [&>svg]:w-6 [&>svg]:text-primary dark:[&>svg]:text-primary-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
</svg>
</span>
</div>
</div>
<div class="grow">
<p class="mb-1 font-bold text-neutral-800 dark:text-white">
Customers
</p>
<p class="mb-0 text-neutral-500 dark:text-neutral-200">
In ac turpis justo. Vivamus auctor quam
</p>
</div>
</div>
</a>
</li>
<li class="p-3 transition duration-300 ease-in-out hover:bg-neutral-50 dark:hover:bg-neutral-600">
<a href="#!">
<div class="flex items-start">
<div class="shrink-0">
<div class="pr-3">
<span
class="[&>svg]:mr-2 [&>svg]:h-6 [&>svg]:w-6 [&>svg]:text-primary dark:[&>svg]:text-primary-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3" />
</svg>
</span>
</div>
</div>
<div class="grow">
<p class="mb-1 font-bold text-neutral-800 dark:text-white">
Layers
</p>
<p class="mb-0 text-neutral-500 dark:text-neutral-200">
Etiam eget faucibus leo. Maecenas bibendum
</p>
</div>
</div>
</a>
</li>
<li class="p-3 transition duration-300 ease-in-out hover:bg-neutral-50 dark:hover:bg-neutral-600">
<a href="#!">
<div class="flex items-start">
<div class="shrink-0">
<div class="pr-3">
<span
class="[&>svg]:mr-2 [&>svg]:h-6 [&>svg]:w-6 [&>svg]:text-primary dark:[&>svg]:text-primary-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.5 18.75h-9m9 0a3 3 0 013 3h-15a3 3 0 013-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 01-.982-3.172M9.497 14.25a7.454 7.454 0 00.981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 007.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 002.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 012.916.52 6.003 6.003 0 01-5.395 4.972m0 0a6.726 6.726 0 01-2.749 1.35m0 0a6.772 6.772 0 01-3.044 0" />
</svg>
</span>
</div>
</div>
<div class="grow">
<p class="mb-1 font-bold text-neutral-800 dark:text-white">
Awards
</p>
<p class="mb-0 text-neutral-500 dark:text-neutral-200">
Aliquam eu dui aliquam, faucibus metus quis
</p>
</div>
</div>
</a>
</li>
<li class="p-3 transition duration-300 ease-in-out hover:bg-neutral-50 dark:hover:bg-neutral-600">
<a href="#!">
<div class="flex items-start">
<div class="shrink-0">
<div class="pr-3">
<span
class="[&>svg]:mr-2 [&>svg]:h-6 [&>svg]:w-6 [&>svg]:text-primary dark:[&>svg]:text-primary-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
</svg>
</span>
</div>
</div>
<div class="grow">
<p class="mb-1 font-bold text-neutral-800 dark:text-white">
Mentions
</p>
<p class="mb-0 text-neutral-500 dark:text-neutral-200">
Aliquam erat volutpat. Aliquam iaculis magna
</p>
</div>
</div>
</a>
</li>
<li class="p-3 transition duration-300 ease-in-out hover:bg-neutral-50 dark:hover:bg-neutral-600">
<a href="#!">
<div class="flex items-start">
<div class="shrink-0">
<div class="pr-3">
<span
class="[&>svg]:mr-2 [&>svg]:h-6 [&>svg]:w-6 [&>svg]:text-primary dark:[&>svg]:text-primary-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.91 11.672a.375.375 0 010 .656l-5.603 3.113a.375.375 0 01-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112z" />
</svg>
</span>
</div>
</div>
<div class="grow">
<p class="mb-1 font-bold text-neutral-800 dark:text-white">
Videos
</p>
<p class="mb-0 text-neutral-500 dark:text-neutral-200">
Duis sagittis, turpis in ullamcorper venenatis
</p>
</div>
</div>
</a>
</li>
</ul>
<ul>
<li class="p-3 transition duration-300 ease-in-out hover:bg-neutral-50 dark:hover:bg-neutral-600">
<a href="#!">
<div class="flex items-start">
<div class="shrink-0">
<div class="pr-3">
<span
class="[&>svg]:mr-2 [&>svg]:h-6 [&>svg]:w-6 [&>svg]:text-primary dark:[&>svg]:text-primary-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
</svg>
</span>
</div>
</div>
<div class="grow">
<p class="mb-1 font-bold text-neutral-800 dark:text-white">
Technology
</p>
<p class="mb-0 text-neutral-500 dark:text-neutral-200">
Vestibulum in purus et erat ullamcorper
pulvinar
</p>
</div>
</div>
</a>
</li>
<li class="p-3 transition duration-300 ease-in-out hover:bg-neutral-50 dark:hover:bg-neutral-600">
<a href="#!">
<div class="flex items-start">
<div class="shrink-0">
<div class="pr-3">
<span
class="[&>svg]:mr-2 [&>svg]:h-6 [&>svg]:w-6 [&>svg]:text-primary dark:[&>svg]:text-primary-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46" />
</svg>
</span>
</div>
</div>
<div class="grow">
<p class="mb-1 font-bold text-neutral-800 dark:text-white">
Advertising
</p>
<p class="mb-0 text-neutral-500 dark:text-neutral-200">
Proin eleifend viverra posuere. Ut commodo
</p>
</div>
</div>
</a>
</li>
<li class="p-3 transition duration-300 ease-in-out hover:bg-neutral-50 dark:hover:bg-neutral-600">
<a href="#!">
<div class="flex items-start">
<div class="shrink-0">
<div class="pr-3">
<span
class="[&>svg]:mr-2 [&>svg]:h-6 [&>svg]:w-6 [&>svg]:text-primary dark:[&>svg]:text-primary-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
</svg>
</span>
</div>
</div>
<div class="grow">
<p class="mb-1 font-bold text-neutral-800 dark:text-white">
Network
</p>
<p class="mb-0 text-neutral-500 dark:text-neutral-200">
Nunc ligula felis, sagittis eget nisi vitae,
sodales
</p>
</div>
</div>
</a>
</li>
<li class="p-3 transition duration-300 ease-in-out hover:bg-neutral-50 dark:hover:bg-neutral-600">
<a href="#!">
<div class="flex items-start">
<div class="shrink-0">
<div class="pr-3">
<span
class="[&>svg]:mr-2 [&>svg]:h-6 [&>svg]:w-6 [&>svg]:text-primary dark:[&>svg]:text-primary-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
</svg>
</span>
</div>
</div>
<div class="grow">
<p class="mb-1 font-bold text-neutral-800 dark:text-white">
Contact
</p>
<p class="mb-0 text-neutral-500 dark:text-neutral-200">
Cras tempor convallis magna id rhoncus.
Suspendisse potenti
</p>
</div>
</div>
</a>
</li>
<li class="p-3 transition duration-300 ease-in-out hover:bg-neutral-50 dark:hover:bg-neutral-600">
<a href="#!">
<div class="flex items-start">
<div class="shrink-0">
<div class="pr-3">
<span
class="[&>svg]:mr-2 [&>svg]:h-6 [&>svg]:w-6 [&>svg]:text-primary dark:[&>svg]:text-primary-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M4.098 19.902a3.75 3.75 0 005.304 0l6.401-6.402M6.75 21A3.75 3.75 0 013 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 003.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008z" />
</svg>
</span>
</div>
</div>
<div class="grow">
<p class="mb-1 font-bold text-neutral-800 dark:text-white">
Categories
</p>
<p class="mb-0 text-neutral-500 dark:text-neutral-200">
Aliquam erat volutpat. Aliquam iaculis magna
quis
</p>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</section>
<!-- Section: Design Block -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment