TailTube
Generic video streaming dashboard UI
<!--
TailTube - Generic video streaming dashboard UI
Created by John Champ
Founder of Pixelcave -> https://pixelcave.com
Building Tailkit -> https://tailkit.com
Let's connect on X -> https://x.com/pixelcave_john
on Bluesky -> https://bsky.app/profile/pixelcave-john.bsky.social
-->
<div
x-data="{ mobileSidebarOpen: false, desktopSidebarOpen: true, darkMode: false, userDropdownOpen: false }"
x-bind:class="{ 'dark': darkMode }"
>
<!-- Page Container -->
<div
id="page-container"
class="mx-auto flex min-h-screen w-full min-w-[320px] flex-col bg-gray-100 transition-all duration-300 ease-out lg:ps-64 dark:bg-gray-800 dark:text-gray-200"
x-bind:class="{ 'lg:ps-64': desktopSidebarOpen }"
>
<!-- Page Sidebar -->
<nav
id="page-sidebar"
class="fixed start-0 top-0 bottom-0 z-50 flex h-full w-full flex-col border-gray-200 bg-white transition-transform duration-300 ease-out lg:w-64 ltr:border-r rtl:border-l dark:border-gray-700/75 dark:bg-gray-900"
x-bind:class="{
'ltr:-translate-x-full rtl:translate-x-full': !mobileSidebarOpen,
'translate-x-0': mobileSidebarOpen,
'lg:ltr:-translate-x-full lg:rtl:translate-x-full': !desktopSidebarOpen,
'lg:ltr:translate-x-0 lg:rtl:translate-x-0': desktopSidebarOpen,
}"
aria-label="Main Sidebar Navigation"
>
<!-- Sidebar Header -->
<div
class="flex h-16 w-full flex-none items-center justify-between px-5 shadow-xs"
>
<!-- Brand -->
<a
href="javascript:void(0)"
class="group inline-flex items-center gap-2 font-semibold text-gray-800 hover:text-gray-600 dark:text-gray-200 dark:hover:text-gray-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-video-camera inline-block size-6 text-rose-500 transition group-hover:scale-110"
>
<path
stroke-linecap="round"
d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z"
/>
</svg>
<span>TailTube</span>
</a>
<!-- END Brand -->
<!-- Extra Actions -->
<div class="flex items-center">
<!-- Dark Mode Toggle -->
<button
type="button"
class="inline-flex items-center justify-center leading-5 text-gray-800 hover:text-gray-600 focus:outline-hidden active:text-gray-800 dark:text-gray-200 dark:hover:text-gray-300 dark:active:text-gray-200"
x-on:click="darkMode = !darkMode"
>
<svg
x-show="!darkMode"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-moon inline-block size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
/>
</svg>
<svg
x-cloak
x-show="darkMode"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-sun inline-block size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
/>
</svg>
</button>
<!-- END Dark Mode Toggle -->
<!-- Close Sidebar on Mobile -->
<button
type="button"
class="ms-3 inline-flex items-center justify-center leading-5 text-gray-800 hover:text-rose-600 focus:outline-hidden active:text-rose-800 lg:hidden dark:text-gray-200 dark:hover:text-rose-300 dark:active:text-rose-200"
x-on:click="mobileSidebarOpen = false"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-solid hi-x-mark inline-block size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
<!-- END Close Sidebar on Mobile -->
</div>
<!-- END Extra Actions -->
</div>
<!-- END Sidebar Header -->
<!-- Sidebar Navigation -->
<div class="overflow-y-auto">
<div class="w-full py-4">
<nav class="space-y-1">
<a
href="javascript:void(0)"
class="group flex items-center gap-2 border-r-4 border-rose-400 bg-rose-50 px-5 py-0.5 text-sm font-medium text-rose-900 dark:bg-rose-800 dark:text-rose-200"
>
<span class="flex flex-none items-center opacity-75">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-home inline-block size-6 text-rose-600 dark:text-rose-300"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
/>
</svg>
</span>
<span class="grow py-2">Home</span>
</a>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 px-5 py-0.5 text-sm font-medium text-gray-700 hover:bg-rose-50 hover:text-rose-900 active:bg-gray-50 dark:text-gray-200 dark:hover:bg-rose-800 dark:hover:text-rose-200"
>
<span class="flex flex-none items-center opacity-75">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-globe-americas inline-block size-6 text-gray-400 group-hover:text-rose-600 dark:group-hover:text-rose-300"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.115 5.19l.319 1.913A6 6 0 008.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 002.288-4.042 1.087 1.087 0 00-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 01-.98-.314l-.295-.295a1.125 1.125 0 010-1.591l.13-.132a1.125 1.125 0 011.3-.21l.603.302a.809.809 0 001.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 001.528-1.732l.146-.292M6.115 5.19A9 9 0 1017.18 4.64M6.115 5.19A8.965 8.965 0 0112 3c1.929 0 3.716.607 5.18 1.64"
/>
</svg>
</span>
<span class="grow py-2">Explore</span>
</a>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 px-5 py-0.5 text-sm font-medium text-gray-700 hover:bg-rose-50 hover:text-rose-900 active:bg-gray-50 dark:text-gray-200 dark:hover:bg-rose-800 dark:hover:text-rose-200"
>
<span class="flex flex-none items-center opacity-75">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-clipboard-list inline-block size-6 text-gray-400 group-hover:text-rose-600 dark:group-hover:text-rose-300"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
/>
</svg>
</span>
<span class="grow py-2">Subscriptions</span>
</a>
<div
class="px-5 pt-6 pb-2 text-xs font-medium tracking-wider text-gray-400 uppercase"
>
Personal
</div>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 px-5 py-0.5 text-sm font-medium text-gray-700 hover:bg-rose-50 hover:text-rose-900 active:bg-gray-50 dark:text-gray-200 dark:hover:bg-rose-800 dark:hover:text-rose-200"
>
<span class="flex flex-none items-center opacity-75">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-square-2x2 inline-block size-6 text-gray-400 group-hover:text-rose-600 dark:group-hover:text-rose-300"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"
/>
</svg>
</span>
<span class="grow py-2">Library</span>
</a>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 px-5 py-0.5 text-sm font-medium text-gray-700 hover:bg-rose-50 hover:text-rose-900 active:bg-gray-50 dark:text-gray-200 dark:hover:bg-rose-800 dark:hover:text-rose-200"
>
<span class="flex flex-none items-center opacity-75">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-queue-list inline-block size-6 text-gray-400 group-hover:text-rose-600 dark:group-hover:text-rose-300"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"
/>
</svg>
</span>
<span class="grow py-2">History</span>
</a>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 px-5 py-0.5 text-sm font-medium text-gray-700 hover:bg-rose-50 hover:text-rose-900 active:bg-gray-50 dark:text-gray-200 dark:hover:bg-rose-800 dark:hover:text-rose-200"
>
<span class="flex flex-none items-center opacity-75">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-play-circle inline-block size-6 text-gray-400 group-hover:text-rose-600 dark:group-hover:text-rose-300"
>
<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>
<span class="grow py-2">Your Videos</span>
<span
class="rounded-full bg-rose-400/10 px-2 py-1 text-xs leading-4 font-medium text-rose-700 transition dark:bg-rose-400/20 dark:text-rose-200 dark:group-hover:bg-rose-400/30"
>26</span
>
</a>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 px-5 py-0.5 text-sm font-medium text-gray-700 hover:bg-rose-50 hover:text-rose-900 active:bg-gray-50 dark:text-gray-200 dark:hover:bg-rose-800 dark:hover:text-rose-200"
>
<span class="flex flex-none items-center opacity-75">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-clock inline-block size-6 text-gray-400 group-hover:text-rose-600 dark:group-hover:text-rose-300"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</span>
<span class="grow py-2">Watch Later</span>
<span
class="rounded-full bg-rose-400/10 px-2 py-1 text-xs leading-4 font-medium text-rose-700 transition dark:bg-rose-400/20 dark:text-rose-200 dark:group-hover:bg-rose-400/30"
>12</span
>
</a>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 px-5 py-0.5 text-sm font-medium text-gray-700 hover:bg-rose-50 hover:text-rose-900 active:bg-gray-50 dark:text-gray-200 dark:hover:bg-rose-800 dark:hover:text-rose-200"
>
<span class="flex flex-none items-center opacity-75">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-heart inline-block size-6 text-gray-400 group-hover:text-rose-600 dark:group-hover:text-rose-300"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
/>
</svg>
</span>
<span class="grow py-2">Liked Videos</span>
<span
class="rounded-full bg-rose-400/10 px-2 py-1 text-xs leading-4 font-medium text-rose-700 transition dark:bg-rose-400/20 dark:text-rose-200 dark:group-hover:bg-rose-400/30"
>39</span
>
</a>
<div
class="px-5 pt-6 pb-2 text-xs font-medium tracking-wider text-gray-400 uppercase"
>
Subscriptions
</div>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 px-5 py-0.5 text-sm font-medium text-gray-700 hover:bg-rose-50 hover:text-rose-900 active:bg-gray-50 dark:text-gray-200 dark:hover:bg-rose-800 dark:hover:text-rose-200"
>
<span class="flex flex-none items-center opacity-75">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-at-symbol inline-block size-6 text-gray-400 group-hover:text-rose-600 dark:group-hover:text-rose-300"
>
<path
stroke-linecap="round"
d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25"
/>
</svg>
</span>
<span class="grow py-2">Nature Moments</span>
</a>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 px-5 py-0.5 text-sm font-medium text-gray-700 hover:bg-rose-50 hover:text-rose-900 active:bg-gray-50 dark:text-gray-200 dark:hover:bg-rose-800 dark:hover:text-rose-200"
>
<span class="flex flex-none items-center opacity-75">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-at-symbol inline-block size-6 text-gray-400 group-hover:text-rose-600 dark:group-hover:text-rose-300"
>
<path
stroke-linecap="round"
d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25"
/>
</svg>
</span>
<span class="grow py-2">Animals Kingdom</span>
</a>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 px-5 py-0.5 text-sm font-medium text-gray-700 hover:bg-rose-50 hover:text-rose-900 active:bg-gray-50 dark:text-gray-200 dark:hover:bg-rose-800 dark:hover:text-rose-200"
>
<span class="flex flex-none items-center opacity-75">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-at-symbol inline-block size-6 text-gray-400 group-hover:text-rose-600 dark:group-hover:text-rose-300"
>
<path
stroke-linecap="round"
d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25"
/>
</svg>
</span>
<span class="grow py-2">Inspiration Strike</span>
</a>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 px-5 py-0.5 text-sm font-medium text-gray-700 hover:bg-rose-50 hover:text-rose-900 active:bg-gray-50 dark:text-gray-200 dark:hover:bg-rose-800 dark:hover:text-rose-200"
>
<span class="flex flex-none items-center opacity-75">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-at-symbol inline-block size-6 text-gray-400 group-hover:text-rose-600 dark:group-hover:text-rose-300"
>
<path
stroke-linecap="round"
d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25"
/>
</svg>
</span>
<span class="grow py-2">Into The Wild</span>
</a>
</nav>
</div>
</div>
<!-- END Sidebar Navigation -->
</nav>
<!-- Page Sidebar -->
<!-- Page Header -->
<header
id="page-header"
class="fixed start-0 end-0 top-0 z-30 flex h-16 flex-none items-center bg-white shadow-xs transition-all duration-300 ease-out lg:ps-64 dark:bg-gray-900"
x-bind:class="{ 'lg:ps-64': desktopSidebarOpen }"
>
<div
class="mx-auto flex w-full max-w-7xl justify-between px-4 lg:px-8"
>
<!-- Left Section -->
<div class="flex items-center">
<!-- Toggle Sidebar on Mobile -->
<div class="me-2 lg:hidden">
<button
type="button"
class="inline-flex items-center justify-center gap-2 rounded-sm border border-gray-300 bg-white px-3 py-2 leading-6 font-semibold text-gray-800 shadow-xs hover:border-gray-300 hover:bg-gray-100 hover:text-gray-800 hover:shadow-sm focus:ring-3 focus:ring-gray-500/25 focus:outline-hidden active:border-white active:bg-white active:shadow-none dark:border-gray-700/75 dark:bg-gray-900 dark:text-gray-200 dark:hover:border-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:ring-gray-700 dark:active:border-gray-900 dark:active:bg-gray-900"
x-on:click="mobileSidebarOpen = true"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-solid hi-menu-alt-1 inline-block size-5"
>
<path
fill-rule="evenodd"
d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
<!-- END Toggle Sidebar on Mobile -->
<!-- Toggle Sidebar on Desktop -->
<div class="hidden lg:block">
<button
type="button"
class="inline-flex items-center justify-center gap-2 rounded-sm border border-gray-300 bg-white px-3 py-2 leading-6 font-semibold text-gray-800 shadow-xs hover:border-gray-300 hover:bg-gray-100 hover:text-gray-800 hover:shadow-sm focus:ring-3 focus:ring-gray-500/25 focus:outline-hidden active:border-white active:bg-white active:shadow-none dark:border-gray-700/75 dark:bg-gray-900 dark:text-gray-200 dark:hover:border-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:ring-gray-700 dark:active:border-gray-900 dark:active:bg-gray-900"
x-on:click="desktopSidebarOpen = !desktopSidebarOpen"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-solid hi-menu-alt-1 inline-block size-5"
>
<path
fill-rule="evenodd"
d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
<!-- END Toggle Sidebar on Desktop -->
</div>
<!-- END Left Section -->
<!-- Main Section -->
<div class="flex items-center">
<!-- Search -->
<div class="hidden sm:block">
<form onsubmit="return false;">
<div class="relative">
<input
class="block w-96 rounded-sm border border-gray-300 py-2 pe-10 text-sm leading-5 focus:border-rose-500 focus:ring-3 focus:ring-rose-500/50 dark:border-gray-700 dark:bg-gray-800 dark:placeholder:text-gray-400 dark:focus:border-rose-400 dark:focus:ring-rose-400"
type="text"
id="search"
name="search"
placeholder="Search.."
/>
<div
class="pointer-events-none absolute inset-y-0 end-0 my-px me-px flex w-10 items-center justify-center rounded-r text-gray-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-solid hi-magnifying-glass size-5"
>
<path
fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd"
/>
</svg>
</div>
</div>
</form>
</div>
<!-- END Search -->
<!-- Brand -->
<a
href="javascript:void(0)"
class="group inline-flex items-center gap-2 font-semibold text-gray-800 hover:text-gray-600 sm:hidden"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-video-camera inline-block size-6 text-rose-500 transition group-hover:scale-110"
>
<path
stroke-linecap="round"
d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z"
/>
</svg>
</a>
<!-- END Brand -->
</div>
<!-- END Main Section -->
<!-- Right Section -->
<div class="flex items-center gap-2">
<!-- User Dropdown -->
<div class="relative inline-block">
<!-- Dropdown Toggle Button -->
<button
type="button"
class="inline-flex items-center justify-center rounded-sm border border-gray-300 bg-white px-3 py-2 text-sm leading-5 font-semibold text-gray-800 shadow-xs hover:border-gray-300 hover:bg-gray-100 hover:text-gray-800 hover:shadow-sm focus:ring-3 focus:ring-gray-500/25 focus:outline-hidden active:border-white active:bg-white active:shadow-none dark:border-gray-700/75 dark:bg-gray-900 dark:text-gray-200 dark:hover:border-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:ring-gray-700 dark:active:border-gray-900 dark:active:bg-gray-900"
id="tk-dropdown-layouts-user"
aria-haspopup="true"
x-bind:aria-expanded="userDropdownOpen"
x-on:click="userDropdownOpen = true"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-solid hi-user-circle inline-block size-5 sm:hidden"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-5.5-2.5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM10 12a5.99 5.99 0 00-4.793 2.39A6.483 6.483 0 0010 16.5a6.483 6.483 0 004.793-2.11A5.99 5.99 0 0010 12z"
clip-rule="evenodd"
/>
</svg>
<span class="hidden sm:inline">John</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-solid hi-chevron-down ms-1 hidden size-5 opacity-50 sm:inline-block"
>
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd"
/>
</svg>
</button>
<!-- END Dropdown Toggle Button -->
<!-- Dropdown -->
<div
x-cloak
x-show="userDropdownOpen"
x-transition:enter="transition ease-out duration-150"
x-transition:enter-start="opacity-0 scale-75"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-75"
x-on:click.outside="userDropdownOpen = false"
role="menu"
aria-labelledby="tk-dropdown-layouts-user"
class="absolute end-0 z-1 mt-2 w-48 rounded-sm shadow-xl ltr:origin-top-right rtl:origin-top-left"
>
<div
class="divide-y divide-gray-100 rounded-sm bg-white ring-1 ring-black/5 dark:divide-gray-700 dark:bg-gray-900 dark:ring-gray-700"
>
<div class="space-y-1 p-2">
<a
role="menuitem"
href="javascript:void(0)"
class="flex items-center gap-2 rounded-sm px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-700 focus:bg-gray-100 focus:text-gray-700 focus:outline-hidden dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus:bg-gray-800 dark:focus:text-gray-100"
>
<span>Your Channel</span>
</a>
<a
role="menuitem"
href="javascript:void(0)"
class="flex items-center gap-2 rounded-sm px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-700 focus:bg-gray-100 focus:text-gray-700 focus:outline-hidden dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus:bg-gray-800 dark:focus:text-gray-100"
>
<span>Video Studio</span>
</a>
</div>
<div class="space-y-1 p-2">
<a
role="menuitem"
href="javascript:void(0)"
class="flex items-center gap-2 rounded-sm px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-700 focus:bg-gray-100 focus:text-gray-700 focus:outline-hidden dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus:bg-gray-800 dark:focus:text-gray-100"
>
<span>Settings</span>
</a>
</div>
<div class="space-y-1 p-2">
<form onsubmit="return false;">
<button
type="submit"
role="menuitem"
class="flex w-full items-center gap-2 rounded-sm px-3 py-2 text-start text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-700 focus:bg-gray-100 focus:text-gray-700 focus:outline-hidden dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus:bg-gray-800 dark:focus:text-gray-100"
>
<span>Sign out</span>
</button>
</form>
</div>
</div>
</div>
<!-- END Dropdown -->
</div>
<!-- END User Dropdown -->
</div>
<!-- END Right Section -->
</div>
</header>
<!-- END Page Header -->
<!-- Page Content -->
<main
id="page-content"
class="flex max-w-full flex-auto flex-col pt-16"
>
<!-- Tags -->
<div class="bg-gray-50 shadow-xs dark:bg-gray-900/50">
<div class="mx-auto w-full max-w-7xl px-4 py-2 lg:px-8 lg:py-5">
<nav class="-m-0.5">
<a
href="javascript:void(0)"
class="m-0.5 inline-flex rounded-sm border border-gray-200 bg-white px-2 py-1.5 text-xs leading-4 font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-rose-600 active:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/75 dark:hover:text-rose-300 dark:active:border-gray-600"
>
All
</a>
<a
href="javascript:void(0)"
class="m-0.5 inline-flex rounded-sm border border-gray-300 bg-gray-50 px-2 py-1.5 text-xs leading-4 font-medium text-rose-600 dark:border-gray-700 dark:bg-gray-800 dark:text-rose-300"
>
Nature
</a>
<a
href="javascript:void(0)"
class="m-0.5 inline-flex rounded-sm border border-gray-200 bg-white px-2 py-1.5 text-xs leading-4 font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-rose-600 active:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/75 dark:hover:text-rose-300 dark:active:border-gray-600"
>
Gaming
</a>
<a
href="javascript:void(0)"
class="m-0.5 inline-flex rounded-sm border border-gray-200 bg-white px-2 py-1.5 text-xs leading-4 font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-rose-600 active:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/75 dark:hover:text-rose-300 dark:active:border-gray-600"
>
Music
</a>
<a
href="javascript:void(0)"
class="m-0.5 inline-flex rounded-sm border border-gray-300 bg-gray-50 px-2 py-1.5 text-xs leading-4 font-medium text-rose-600 dark:border-gray-700 dark:bg-gray-800 dark:text-rose-300"
>
Animals
</a>
<a
href="javascript:void(0)"
class="m-0.5 inline-flex rounded-sm border border-gray-200 bg-white px-2 py-1.5 text-xs leading-4 font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-rose-600 active:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/75 dark:hover:text-rose-300 dark:active:border-gray-600"
>
Live
</a>
<a
href="javascript:void(0)"
class="m-0.5 inline-flex rounded-sm border border-gray-200 bg-white px-2 py-1.5 text-xs leading-4 font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-rose-600 active:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/75 dark:hover:text-rose-300 dark:active:border-gray-600"
>
Web Development
</a>
<a
href="javascript:void(0)"
class="m-0.5 inline-flex rounded-sm border border-gray-200 bg-white px-2 py-1.5 text-xs leading-4 font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-rose-600 active:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/75 dark:hover:text-rose-300 dark:active:border-gray-600"
>
Web Design
</a>
<a
href="javascript:void(0)"
class="m-0.5 inline-flex rounded-sm border border-gray-200 bg-white px-2 py-1.5 text-xs leading-4 font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-rose-600 active:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/75 dark:hover:text-rose-300 dark:active:border-gray-600"
>
Business
</a>
<a
href="javascript:void(0)"
class="m-0.5 inline-flex rounded-sm border border-gray-200 bg-white px-2 py-1.5 text-xs leading-4 font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-rose-600 active:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/75 dark:hover:text-rose-300 dark:active:border-gray-600"
>
Hiking
</a>
<a
href="javascript:void(0)"
class="m-0.5 inline-flex rounded-sm border border-gray-200 bg-white px-2 py-1.5 text-xs leading-4 font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-rose-600 active:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/75 dark:hover:text-rose-300 dark:active:border-gray-600"
>
Inspiration
</a>
<a
href="javascript:void(0)"
class="m-0.5 inline-flex rounded-sm border border-gray-200 bg-white px-2 py-1.5 text-xs leading-4 font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-rose-600 active:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/75 dark:hover:text-rose-300 dark:active:border-gray-600"
>
Motivation
</a>
<a
href="javascript:void(0)"
class="m-0.5 inline-flex rounded-sm border border-gray-200 bg-white px-2 py-1.5 text-xs leading-4 font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-rose-600 active:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/75 dark:hover:text-rose-300 dark:active:border-gray-600"
>
Productivity
</a>
</nav>
</div>
</div>
<!-- END Tags -->
<!-- Video List -->
<div class="mx-auto w-full max-w-7xl p-4 lg:p-8">
<div
class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:gap-8 xl:grid-cols-4"
>
<div>
<a href="javascript:void(0)" class="group relative block">
<div
class="absolute inset-0 z-10 flex items-center justify-center rounded-sm bg-gray-800/75 opacity-0 transition group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-play-circle inline-block size-6 text-white transition group-hover:scale-150 group-active:scale-125"
>
<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>
</div>
<img
src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2NTA1MDQ4Ng&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=560"
class="aspect-16/10 rounded-sm object-cover"
alt="Video Preview"
/>
</a>
<div class="py-3">
<h4 class="font-semibold">
<a
href="javascript:void(0)"
class="font-semibold transition hover:text-gray-700 dark:hover:text-gray-300"
>
The best roadtrip of our lives
</a>
</h4>
<h5 class="mb-2">
<a
href="javascript:void(0)"
class="text-sm font-medium text-gray-500 transition hover:text-rose-500 hover:underline hover:underline-offset-2 dark:text-gray-400 dark:hover:text-rose-300"
>Into The Wild</a
>
</h5>
<p
class="text-xs font-medium text-gray-500 dark:text-gray-400/75"
>
3,2k • 2 days ago
</p>
</div>
</div>
<div>
<a href="javascript:void(0)" class="group relative block">
<div
class="absolute inset-0 z-10 flex items-center justify-center rounded-sm bg-gray-800/75 opacity-0 transition group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-play-circle inline-block size-6 text-white transition group-hover:scale-150 group-active:scale-125"
>
<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>
</div>
<img
src="https://images.unsplash.com/photo-1547314283-befb6cc5cf29?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2NTA1MDQ4Ng&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=560"
class="aspect-16/10 rounded-sm object-cover"
alt="Video Preview"
/>
</a>
<div class="py-3">
<h4 class="font-semibold">
<a
href="javascript:void(0)"
class="font-semibold transition hover:text-gray-700 dark:hover:text-gray-300"
>
By the water
</a>
</h4>
<h5 class="mb-2">
<a
href="javascript:void(0)"
class="text-sm font-medium text-gray-500 transition hover:text-rose-500 hover:underline hover:underline-offset-2 dark:text-gray-400 dark:hover:text-rose-300"
>Nature Moments</a
>
</h5>
<p
class="text-xs font-medium text-gray-500 dark:text-gray-400/75"
>
17,2k • 2 days ago
</p>
</div>
</div>
<div>
<a href="javascript:void(0)" class="group relative block">
<div
class="absolute inset-0 z-10 flex items-center justify-center rounded-sm bg-gray-800/75 opacity-0 transition group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-play-circle inline-block size-6 text-white transition group-hover:scale-150 group-active:scale-125"
>
<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>
</div>
<img
src="https://images.unsplash.com/photo-1519874950331-12655cb7ae70?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2NTA1MDY3NQ&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=560"
class="aspect-16/10 rounded-sm object-cover"
alt="Video Preview"
/>
</a>
<div class="py-3">
<h4 class="font-semibold">
<a
href="javascript:void(0)"
class="font-semibold transition hover:text-gray-700 dark:hover:text-gray-300"
>
Tropical animals and their life
</a>
</h4>
<h5 class="mb-2">
<a
href="javascript:void(0)"
class="text-sm font-medium text-gray-500 transition hover:text-rose-500 hover:underline hover:underline-offset-2 dark:text-gray-400 dark:hover:text-rose-300"
>Into The Wild</a
>
</h5>
<p
class="text-xs font-medium text-gray-500 dark:text-gray-400/75"
>
2,7k • 3 days ago
</p>
</div>
</div>
<div>
<a href="javascript:void(0)" class="group relative block">
<div
class="absolute inset-0 z-10 flex items-center justify-center rounded-sm bg-gray-800/75 opacity-0 transition group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-play-circle inline-block size-6 text-white transition group-hover:scale-150 group-active:scale-125"
>
<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>
</div>
<img
src="https://images.unsplash.com/photo-1584216514638-929205f5dd5e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2NTA1MDY3NQ&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=560"
class="aspect-16/10 rounded-sm object-cover"
alt="Video Preview"
/>
</a>
<div class="py-3">
<h4 class="font-semibold">
<a
href="javascript:void(0)"
class="font-semibold transition hover:text-gray-700 dark:hover:text-gray-300"
>
The sharks are real
</a>
</h4>
<h5 class="mb-2">
<a
href="javascript:void(0)"
class="text-sm font-medium text-gray-500 transition hover:text-rose-500 hover:underline hover:underline-offset-2 dark:text-gray-400 dark:hover:text-rose-300"
>Nature Moments</a
>
</h5>
<p
class="text-xs font-medium text-gray-500 dark:text-gray-400/75"
>
6,8k • 3 days ago
</p>
</div>
</div>
<div>
<a href="javascript:void(0)" class="group relative block">
<div
class="absolute inset-0 z-10 flex items-center justify-center rounded-sm bg-gray-800/75 opacity-0 transition group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-play-circle inline-block size-6 text-white transition group-hover:scale-150 group-active:scale-125"
>
<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>
</div>
<img
src="https://images.unsplash.com/photo-1531804226530-70f8004aa44e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2NTA1MDQ4Nw&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=560"
class="aspect-16/10 rounded-sm object-cover"
alt="Video Preview"
/>
</a>
<div class="py-3">
<h4 class="font-semibold">
<a
href="javascript:void(0)"
class="font-semibold transition hover:text-gray-700 dark:hover:text-gray-300"
>
How to mountain hiking
</a>
</h4>
<h5 class="mb-2">
<a
href="javascript:void(0)"
class="text-sm font-medium text-gray-500 transition hover:text-rose-500 hover:underline hover:underline-offset-2 dark:text-gray-400 dark:hover:text-rose-300"
>Nature Moments</a
>
</h5>
<p
class="text-xs font-medium text-gray-500 dark:text-gray-400/75"
>
8,2k • 3 days ago
</p>
</div>
</div>
<div>
<a href="javascript:void(0)" class="group relative block">
<div
class="absolute inset-0 z-10 flex items-center justify-center rounded-sm bg-gray-800/75 opacity-0 transition group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-play-circle inline-block size-6 text-white transition group-hover:scale-150 group-active:scale-125"
>
<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>
</div>
<img
src="https://images.unsplash.com/flagged/photo-1552035791-b3cc1632e933?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2NTA1MDUzMQ&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=560"
class="aspect-16/10 rounded-sm object-cover"
alt="Video Preview"
/>
</a>
<div class="py-3">
<h4 class="font-semibold">
<a
href="javascript:void(0)"
class="font-semibold transition hover:text-gray-700 dark:hover:text-gray-300"
>
The great challenge
</a>
</h4>
<h5 class="mb-2">
<a
href="javascript:void(0)"
class="text-sm font-medium text-gray-500 transition hover:text-rose-500 hover:underline hover:underline-offset-2 dark:text-gray-400 dark:hover:text-rose-300"
>Nature Moments</a
>
</h5>
<p
class="text-xs font-medium text-gray-500 dark:text-gray-400/75"
>
7,3k • 2 days ago
</p>
</div>
</div>
<div>
<a href="javascript:void(0)" class="group relative block">
<div
class="absolute inset-0 z-10 flex items-center justify-center rounded-sm bg-gray-800/75 opacity-0 transition group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-play-circle inline-block size-6 text-white transition group-hover:scale-150 group-active:scale-125"
>
<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>
</div>
<img
src="https://images.unsplash.com/photo-1571503929253-cc2ca9c4f27c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2NTA1MDUzNw&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=560"
class="aspect-16/10 rounded-sm object-cover"
alt="Video Preview"
/>
</a>
<div class="py-3">
<h4 class="font-semibold">
<a
href="javascript:void(0)"
class="font-semibold transition hover:text-gray-700 dark:hover:text-gray-300"
>
Around the lake
</a>
</h4>
<h5 class="mb-2">
<a
href="javascript:void(0)"
class="text-sm font-medium text-gray-500 transition hover:text-rose-500 hover:underline hover:underline-offset-2 dark:text-gray-400 dark:hover:text-rose-300"
>Nature Moments</a
>
</h5>
<p
class="text-xs font-medium text-gray-500 dark:text-gray-400/75"
>
12,1k • 2 days ago
</p>
</div>
</div>
<div>
<a href="javascript:void(0)" class="group relative block">
<div
class="absolute inset-0 z-10 flex items-center justify-center rounded-sm bg-gray-800/75 opacity-0 transition group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-play-circle inline-block size-6 text-white transition group-hover:scale-150 group-active:scale-125"
>
<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>
</div>
<img
src="https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2NTA1MDU1MQ&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=560"
class="aspect-16/10 rounded-sm object-cover"
alt="Video Preview"
/>
</a>
<div class="py-3">
<h4 class="font-semibold">
<a
href="javascript:void(0)"
class="font-semibold transition hover:text-gray-700 dark:hover:text-gray-300"
>
The lonely tree
</a>
</h4>
<h5 class="mb-2">
<a
href="javascript:void(0)"
class="text-sm font-medium text-gray-500 transition hover:text-rose-500 hover:underline hover:underline-offset-2 dark:text-gray-400 dark:hover:text-rose-300"
>Nature Moments</a
>
</h5>
<p
class="text-xs font-medium text-gray-500 dark:text-gray-400/75"
>
11,3k • 2 days ago
</p>
</div>
</div>
<div>
<a href="javascript:void(0)" class="group relative block">
<div
class="absolute inset-0 z-10 flex items-center justify-center rounded-sm bg-gray-800/75 opacity-0 transition group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-play-circle inline-block size-6 text-white transition group-hover:scale-150 group-active:scale-125"
>
<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>
</div>
<img
src="https://images.unsplash.com/photo-1558469070-b0bb906830a2?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2NTA1MDU3Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=560"
class="aspect-16/10 rounded-sm object-cover"
alt="Video Preview"
/>
</a>
<div class="py-3">
<h4 class="font-semibold">
<a
href="javascript:void(0)"
class="font-semibold transition hover:text-gray-700 dark:hover:text-gray-300"
>
Chasing the peaks
</a>
</h4>
<h5 class="mb-2">
<a
href="javascript:void(0)"
class="text-sm font-medium text-gray-500 transition hover:text-rose-500 hover:underline hover:underline-offset-2 dark:text-gray-400 dark:hover:text-rose-300"
>Into The Wild</a
>
</h5>
<p
class="text-xs font-medium text-gray-500 dark:text-gray-400/75"
>
3,5k • 2 days ago
</p>
</div>
</div>
<div>
<a href="javascript:void(0)" class="group relative block">
<div
class="absolute inset-0 z-10 flex items-center justify-center rounded-sm bg-gray-800/75 opacity-0 transition group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-play-circle inline-block size-6 text-white transition group-hover:scale-150 group-active:scale-125"
>
<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>
</div>
<img
src="https://images.unsplash.com/photo-1589883661923-6476cb0ae9f2?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2NTA1MDYwNg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=560"
class="aspect-16/10 rounded-sm object-cover"
alt="Video Preview"
/>
</a>
<div class="py-3">
<h4 class="font-semibold">
<a
href="javascript:void(0)"
class="font-semibold transition hover:text-gray-700 dark:hover:text-gray-300"
>
Cats are evil
</a>
</h4>
<h5 class="mb-2">
<a
href="javascript:void(0)"
class="text-sm font-medium text-gray-500 transition hover:text-rose-500 hover:underline hover:underline-offset-2 dark:text-gray-400 dark:hover:text-rose-300"
>Animals Kingdom</a
>
</h5>
<p
class="text-xs font-medium text-gray-500 dark:text-gray-400/75"
>
2,8k • 4 days ago
</p>
</div>
</div>
<div>
<a href="javascript:void(0)" class="group relative block">
<div
class="absolute inset-0 z-10 flex items-center justify-center rounded-sm bg-gray-800/75 opacity-0 transition group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-play-circle inline-block size-6 text-white transition group-hover:scale-150 group-active:scale-125"
>
<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>
</div>
<img
src="https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2NTA1MDYwNg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=560"
class="aspect-16/10 rounded-sm object-cover"
alt="Video Preview"
/>
</a>
<div class="py-3">
<h4 class="font-semibold">
<a
href="javascript:void(0)"
class="font-semibold transition hover:text-gray-700 dark:hover:text-gray-300"
>
Best dogs ever
</a>
</h4>
<h5 class="mb-2">
<a
href="javascript:void(0)"
class="text-sm font-medium text-gray-500 transition hover:text-rose-500 hover:underline hover:underline-offset-2 dark:text-gray-400 dark:hover:text-rose-300"
>Animals Kingdom</a
>
</h5>
<p
class="text-xs font-medium text-gray-500 dark:text-gray-400/75"
>
3,9k • 4 days ago
</p>
</div>
</div>
<div>
<a href="javascript:void(0)" class="group relative block">
<div
class="absolute inset-0 z-10 flex items-center justify-center rounded-sm bg-gray-800/75 opacity-0 transition group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-play-circle inline-block size-6 text-white transition group-hover:scale-150 group-active:scale-125"
>
<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>
</div>
<img
src="https://images.unsplash.com/photo-1527073620320-77635188c627?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2NTA1MDY1MA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=560"
class="aspect-16/10 rounded-sm object-cover"
alt="Video Preview"
/>
</a>
<div class="py-3">
<h4 class="font-semibold">
<a
href="javascript:void(0)"
class="font-semibold transition hover:text-gray-700 dark:hover:text-gray-300"
>
Lions and their life
</a>
</h4>
<h5 class="mb-2">
<a
href="javascript:void(0)"
class="text-sm font-medium text-gray-500 transition hover:text-rose-500 hover:underline hover:underline-offset-2 dark:text-gray-400 dark:hover:text-rose-300"
>Animals Kingdom</a
>
</h5>
<p
class="text-xs font-medium text-gray-500 dark:text-gray-400/75"
>
4,1k • 5 days ago
</p>
</div>
</div>
<div>
<a href="javascript:void(0)" class="group relative block">
<div
class="absolute inset-0 z-10 flex items-center justify-center rounded-sm bg-gray-800/75 opacity-0 transition group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-play-circle inline-block size-6 text-white transition group-hover:scale-150 group-active:scale-125"
>
<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>
</div>
<img
src="https://images.unsplash.com/photo-1528652899333-492965af4854?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2NTA1MDY1MA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=560"
class="aspect-16/10 rounded-sm object-cover"
alt="Video Preview"
/>
</a>
<div class="py-3">
<h4 class="font-semibold">
<a
href="javascript:void(0)"
class="font-semibold transition hover:text-gray-700 dark:hover:text-gray-300"
>
The fox is here
</a>
</h4>
<h5 class="mb-2">
<a
href="javascript:void(0)"
class="text-sm font-medium text-gray-500 transition hover:text-rose-500 hover:underline hover:underline-offset-2 dark:text-gray-400 dark:hover:text-rose-300"
>Animals Kingdom</a
>
</h5>
<p
class="text-xs font-medium text-gray-500 dark:text-gray-400/75"
>
9,6k • 5 days ago
</p>
</div>
</div>
<div>
<a href="javascript:void(0)" class="group relative block">
<div
class="absolute inset-0 z-10 flex items-center justify-center rounded-sm bg-gray-800/75 opacity-0 transition group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-play-circle inline-block size-6 text-white transition group-hover:scale-150 group-active:scale-125"
>
<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>
</div>
<img
src="https://images.unsplash.com/photo-1503308823166-13ce184e3007?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2NTA1MDY1MA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=560"
class="aspect-16/10 rounded-sm object-cover"
alt="Video Preview"
/>
</a>
<div class="py-3">
<h4 class="font-semibold">
<a
href="javascript:void(0)"
class="font-semibold transition hover:text-gray-700 dark:hover:text-gray-300"
>
The deer is near
</a>
</h4>
<h5 class="mb-2">
<a
href="javascript:void(0)"
class="text-sm font-medium text-gray-500 transition hover:text-rose-500 hover:underline hover:underline-offset-2 dark:text-gray-400 dark:hover:text-rose-300"
>Animals Kingdom</a
>
</h5>
<p
class="text-xs font-medium text-gray-500 dark:text-gray-400/75"
>
26,5k • 5 days ago
</p>
</div>
</div>
<div>
<a href="javascript:void(0)" class="group relative block">
<div
class="absolute inset-0 z-10 flex items-center justify-center rounded-sm bg-gray-800/75 opacity-0 transition group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-play-circle inline-block size-6 text-white transition group-hover:scale-150 group-active:scale-125"
>
<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>
</div>
<img
src="https://images.unsplash.com/photo-1524261399568-56d8c862aaf8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2NTA1MDY1OA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=560"
class="aspect-16/10 rounded-sm object-cover"
alt="Video Preview"
/>
</a>
<div class="py-3">
<h4 class="font-semibold">
<a
href="javascript:void(0)"
class="font-semibold transition hover:text-gray-700 dark:hover:text-gray-300"
>
Into the woods
</a>
</h4>
<h5 class="mb-2">
<a
href="javascript:void(0)"
class="text-sm font-medium text-gray-500 transition hover:text-rose-500 hover:underline hover:underline-offset-2 dark:text-gray-400 dark:hover:text-rose-300"
>Into The Wild</a
>
</h5>
<p
class="text-xs font-medium text-gray-500 dark:text-gray-400/75"
>
2,3k • 5 days ago
</p>
</div>
</div>
<div>
<a href="javascript:void(0)" class="group relative block">
<div
class="absolute inset-0 z-10 flex items-center justify-center rounded-sm bg-gray-800/75 opacity-0 transition group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-play-circle inline-block size-6 text-white transition group-hover:scale-150 group-active:scale-125"
>
<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>
</div>
<img
src="https://images.unsplash.com/photo-1554281559-0d21d1f5073e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2NTA1MDY4Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=560"
class="aspect-16/10 rounded-sm object-cover"
alt="Video Preview"
/>
</a>
<div class="py-3">
<h4 class="font-semibold">
<a
href="javascript:void(0)"
class="font-semibold transition hover:text-gray-700 dark:hover:text-gray-300"
>
Most amazing animals
</a>
</h4>
<h5 class="mb-2">
<a
href="javascript:void(0)"
class="text-sm font-medium text-gray-500 transition hover:text-rose-500 hover:underline hover:underline-offset-2 dark:text-gray-400 dark:hover:text-rose-300"
>Animals Kingdom</a
>
</h5>
<p
class="text-xs font-medium text-gray-500 dark:text-gray-400/75"
>
8,4k • 6 days ago
</p>
</div>
</div>
</div>
<!-- END Video List -->
<!-- Load more -->
<div class="mt-8 text-center">
<button
type="button"
class="inline-flex items-center justify-center gap-2 rounded-sm border border-gray-300 bg-white px-3 py-2 text-sm leading-6 font-semibold text-gray-800 shadow-xs hover:border-gray-300 hover:bg-gray-100 hover:text-gray-800 hover:shadow-sm focus:ring-3 focus:ring-gray-500/25 focus:outline-hidden active:border-white active:bg-white active:shadow-none dark:border-gray-700/75 dark:bg-gray-900 dark:text-gray-200 dark:hover:border-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:ring-gray-700 dark:active:border-gray-900 dark:active:bg-gray-900"
>
<span>Load more..</span>
</button>
</div>
</div>
<!-- END Page Section -->
</main>
<!-- END Page Content -->
<!-- Page Footer -->
<footer
id="page-footer"
class="flex grow-0 items-center border-t border-slate-200 dark:border-slate-700"
>
<div
class="container mx-auto flex flex-col gap-2 px-4 py-6 text-center text-sm font-medium text-gray-600 md:flex-row md:justify-between md:gap-0 md:text-start lg:px-8 xl:max-w-7xl dark:text-gray-400"
>
<div>© <span class="font-semibold">TailTube</span></div>
<div class="inline-flex items-center justify-center">
<span>Crafted with</span
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
class="mx-1 size-4 text-red-600"
>
<path
d="M9.653 16.915l-.005-.003-.019-.01a20.759 20.759 0 01-1.162-.682 22.045 22.045 0 01-2.582-1.9C4.045 12.733 2 10.352 2 7.5a4.5 4.5 0 018-2.828A4.5 4.5 0 0118 7.5c0 2.852-2.044 5.233-3.885 6.82a22.049 22.049 0 01-3.744 2.582l-.019.01-.005.003h-.002a.739.739 0 01-.69.001l-.002-.001z"
></path>
</svg>
<span
>by
<a
class="font-medium text-rose-600 transition hover:text-rose-700 dark:text-rose-400 dark:hover:text-rose-300"
href="https://pixelcave.com"
target="_blank"
>pixelcave</a
></span
>
</div>
</div>
</footer>
<!-- END Page Footer -->
</div>
<!-- END Page Container -->
</div>

Unlock an exclusive dashboard and get early access to all the new ones!
Join our pixelcave newsletter today, and we’ll send you a custom UI Design Kit which includes an exclusive dashboard template and many other free Tailwind CSS templates, just for you! Also, you will be the first to get any upcoming dashboards.