<div
x-data="{ darkMode: false, userDropdownOpen: false }"
x-bind:class="{ 'dark': darkMode }"
>
<div
id="page-container"
class="mx-auto flex min-h-screen w-full min-w-[320px] flex-col bg-slate-900"
>
<header id="page-header" class="z-1 flex flex-none items-center">
<div class="container mx-auto px-4 lg:px-8 xl:max-w-7xl">
<div class="flex justify-between py-10">
<div class="flex items-center gap-2 lg:gap-6">
<a
href="javascript:void(0)"
class="group inline-flex items-center gap-2 font-semibold uppercase tracking-wider text-slate-200 hover:text-white active:text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="h-5 w-5 -rotate-12 text-indigo-400 transition group-hover:rotate-0 group-active:opacity-50"
>
<path
fill-rule="evenodd"
d="M2 10a8 8 0 1116 0 8 8 0 01-16 0zm6.39-2.908a.75.75 0 01.766.027l3.5 2.25a.75.75 0 010 1.262l-3.5 2.25A.75.75 0 018 12.25v-4.5a.75.75 0 01.39-.658z"
clip-rule="evenodd"
/>
</svg>
<span class="hidden sm:inline-block">TailFlix</span>
</a>
</div>
<div class="flex items-center gap-2 lg:gap-4">
<form onsubmit="return false;" class="w-40 sm:w-72 lg:w-96">
<div class="relative">
<div
class="absolute bottom-0 start-0 top-0 flex w-14 items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="h-5 w-5 text-slate-500"
>
<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>
<input
type="text"
class="block w-full rounded-full border-transparent bg-slate-800 py-3 pe-5 ps-12 text-sm leading-5 text-slate-200 placeholder:text-slate-400 hover:border-transparent focus:border-transparent focus:ring focus:ring-slate-500/50"
id="search"
name="search"
placeholder="Search.."
/>
</div>
</form>
<div class="relative inline-block">
<button
type="button"
class="inline-flex items-center justify-center gap-3 rounded-full bg-slate-500/10 px-3 py-2 text-sm font-medium leading-5 text-slate-200 hover:bg-slate-500/25 hover:text-white focus:outline-none focus:ring focus:ring-slate-500/50"
id="dropdown-user"
aria-haspopup="true"
x-bind:aria-expanded="userDropdownOpen"
x-on:click="userDropdownOpen = true"
>
<img
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=160&ixid=MXwxfDB8MXxhbGx8fHx8fHx8fA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=160"
alt="User Avatar"
class="inline-block h-8 w-8 rounded-full"
/>
<span class="hidden sm:inline-block">John Smith</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-solid hi-chevron-down inline-block h-5 w-5 text-slate-600"
>
<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>
<div
x-show="userDropdownOpen"
x-transition:enter="transition ease-out duration-100"
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="dropdown-user"
class="absolute end-0 z-50 mt-2 w-48 rounded shadow-xl"
>
<div
class="space-y-2 rounded-2xl bg-gray-800/90 px-3 py-4 ring-1 ring-black/5"
>
<a
role="menuitem"
href="javascript:void(0)"
class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-slate-300 hover:bg-slate-900/50 hover:text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-solid hi-user-circle inline-block h-5 w-5 text-slate-600"
>
<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>Profile</span>
</a>
<a
role="menuitem"
href="javascript:void(0)"
class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-slate-300 hover:bg-slate-900/50 hover:text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-solid hi-bell-alert inline-block h-5 w-5 text-slate-600"
>
<path
d="M4.214 3.227a.75.75 0 00-1.156-.956 8.97 8.97 0 00-1.856 3.826.75.75 0 001.466.316 7.47 7.47 0 011.546-3.186zM16.942 2.271a.75.75 0 00-1.157.956 7.47 7.47 0 011.547 3.186.75.75 0 001.466-.316 8.971 8.971 0 00-1.856-3.826z"
/>
<path
fill-rule="evenodd"
d="M10 2a6 6 0 00-6 6c0 1.887-.454 3.665-1.257 5.234a.75.75 0 00.515 1.076 32.94 32.94 0 003.256.508 3.5 3.5 0 006.972 0 32.933 32.933 0 003.256-.508.75.75 0 00.515-1.076A11.448 11.448 0 0116 8a6 6 0 00-6-6zm0 14.5a2 2 0 01-1.95-1.557 33.54 33.54 0 003.9 0A2 2 0 0110 16.5z"
clip-rule="evenodd"
/>
</svg>
<span>Notifications</span>
</a>
<a
role="menuitem"
href="javascript:void(0)"
class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-slate-300 hover:bg-slate-900/50 hover:text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-solid hi-cog-8-tooth inline-block h-5 w-5 text-slate-600"
>
<path
fill-rule="evenodd"
d="M8.34 1.804A1 1 0 019.32 1h1.36a1 1 0 01.98.804l.295 1.473c.497.144.971.342 1.416.587l1.25-.834a1 1 0 011.262.125l.962.962a1 1 0 01.125 1.262l-.834 1.25c.245.445.443.919.587 1.416l1.473.294a1 1 0 01.804.98v1.361a1 1 0 01-.804.98l-1.473.295a6.95 6.95 0 01-.587 1.416l.834 1.25a1 1 0 01-.125 1.262l-.962.962a1 1 0 01-1.262.125l-1.25-.834a6.953 6.953 0 01-1.416.587l-.294 1.473a1 1 0 01-.98.804H9.32a1 1 0 01-.98-.804l-.295-1.473a6.957 6.957 0 01-1.416-.587l-1.25.834a1 1 0 01-1.262-.125l-.962-.962a1 1 0 01-.125-1.262l.834-1.25a6.957 6.957 0 01-.587-1.416l-1.473-.294A1 1 0 011 10.68V9.32a1 1 0 01.804-.98l1.473-.295c.144-.497.342-.971.587-1.416l-.834-1.25a1 1 0 01.125-1.262l.962-.962A1 1 0 015.38 3.03l1.25.834a6.957 6.957 0 011.416-.587l.294-1.473zM13 10a3 3 0 11-6 0 3 3 0 016 0z"
clip-rule="evenodd"
/>
</svg>
<span>Account</span>
</a>
<form onsubmit="return false;">
<button
type="submit"
role="menuitem"
class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-start text-sm font-medium text-slate-300 hover:bg-slate-900/50 hover:text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-solid hi-lock-closed inline-block h-5 w-5 text-slate-600"
>
<path
fill-rule="evenodd"
d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z"
clip-rule="evenodd"
/>
</svg>
<span>Sign out</span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="container mx-auto px-4 lg:px-8 xl:max-w-7xl">
<nav
class="flex items-center gap-4 rounded border border-slate-800/50 bg-slate-800/25 p-5 lg:gap-8"
>
<a
href="javascript:void(0)"
class="flex items-center font-light text-white transition md:text-lg"
>
<span>Movies</span>
</a>
<a
href="javascript:void(0)"
class="flex items-center font-light text-slate-400 transition hover:text-white active:text-slate-400 md:text-lg"
>
<span>Series</span>
</a>
<a
href="javascript:void(0)"
class="flex items-center font-light text-slate-400 transition hover:text-white active:text-slate-400 md:text-lg"
>
<span>Documentaries</span>
</a>
</nav>
</div>
<main id="page-content" class="flex max-w-full flex-auto flex-col">
<div
class="container mx-auto space-y-10 px-4 py-8 lg:space-y-16 lg:px-8 lg:py-16 xl:max-w-7xl"
>
<section class="space-y-6">
<div class="flex items-center justify-between">
<h2 class="text-xl font-semibold text-slate-200">
Latest Movies
</h2>
<a
href="javascript:void(0)"
class="group flex items-center gap-1 text-sm text-slate-400 transition hover:text-white active:text-slate-400"
>
<span>See All</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="h-5 w-5 opacity-50 transition ease-out group-hover:opacity-100 group-active:translate-x-2"
>
<path
fill-rule="evenodd"
d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
clip-rule="evenodd"
/>
</svg>
</a>
</div>
<nav class="grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8">
<a
href="javascript:void(0)"
class="group aspect-h-10 aspect-w-16 relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75 active:ring-indigo-500/25"
>
<img
class="object-cover"
src="https://images.unsplash.com/photo-1565700430899-1c56a5cf64e3?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
<div
class="absolute inset-0 flex flex-col justify-between bg-gradient-to-b from-transparent via-black/75 to-black"
>
<div class="flex items-center justify-start gap-2 p-4">
<div
class="flex items-center gap-1 rounded-lg bg-slate-800/50 px-1.5 py-1 font-medium text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-star -mt-px inline-block h-4 w-4 text-amber-400"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
<span>8.6</span>
</div>
</div>
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div class="space-y-1">
<h3 class="text-xl font-semibold text-white">
Cyberpunk Stories
</h3>
<p class="text-sm font-semibold text-slate-500">2022</p>
</div>
<div
class="flex h-10 w-10 items-center justify-center rounded-full bg-slate-500/25 text-slate-400 transition group-hover:scale-110 group-hover:bg-indigo-500 group-hover:text-white group-active:scale-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-play h-5 w-5 translate-x-0.5"
>
<path
d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"
/>
</svg>
</div>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="group aspect-h-10 aspect-w-16 relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75"
>
<img
class="object-cover"
src="https://images.unsplash.com/photo-1608889175419-ac2a18682fe9?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2Njc2ODgwOA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
/>
<div
class="absolute inset-0 flex flex-col justify-between bg-gradient-to-b from-transparent via-black/75 to-black"
>
<div class="flex items-center justify-start gap-2 p-4">
<div
class="flex items-center gap-1 rounded-lg bg-slate-800/50 px-1.5 py-1 font-medium text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-star -mt-px inline-block h-4 w-4 text-amber-400"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
<span>6.7</span>
</div>
</div>
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div class="space-y-1">
<h3 class="text-xl font-semibold text-white">
Superheroes are real
</h3>
<p class="text-sm font-semibold text-slate-500">2022</p>
</div>
<div
class="flex h-10 w-10 items-center justify-center rounded-full bg-slate-500/25 text-slate-400 transition group-hover:scale-110 group-hover:bg-indigo-500 group-hover:text-white group-active:scale-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-play h-5 w-5 translate-x-0.5"
>
<path
d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"
/>
</svg>
</div>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="group aspect-h-10 aspect-w-16 relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75 active:ring-indigo-500/25"
>
<img
class="object-cover"
src="https://images.unsplash.com/photo-1514539079130-25950c84af65?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2Njc2ODgwOA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
/>
<div
class="absolute inset-0 flex flex-col justify-between bg-gradient-to-b from-transparent via-black/75 to-black"
>
<div class="flex items-center justify-start gap-2 p-4">
<div
class="flex items-center gap-1 rounded-lg bg-slate-800/50 px-1.5 py-1 font-medium text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-star -mt-px inline-block h-4 w-4 text-amber-400"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
<span>9.2</span>
</div>
</div>
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div class="space-y-1">
<h3 class="text-xl font-semibold text-white">
The Castle on the Hill
</h3>
<p class="text-sm font-semibold text-slate-500">2022</p>
</div>
<div
class="flex h-10 w-10 items-center justify-center rounded-full bg-slate-500/25 text-slate-400 transition-all group-hover:scale-110 group-hover:bg-indigo-500 group-hover:text-white group-active:scale-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-play h-5 w-5 translate-x-0.5"
>
<path
d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"
/>
</svg>
</div>
</div>
</div>
</a>
</nav>
</section>
<section class="space-y-6">
<div class="flex items-center justify-between">
<h2 class="text-xl font-semibold text-slate-200">
Continue Watching
</h2>
<a
href="javascript:void(0)"
class="group flex items-center gap-1 text-sm text-slate-400 transition hover:text-white active:text-slate-400"
>
<span>See All</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="h-5 w-5 opacity-50 transition ease-out group-hover:opacity-100 group-active:translate-x-2"
>
<path
fill-rule="evenodd"
d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
clip-rule="evenodd"
/>
</svg>
</a>
</div>
<nav class="grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8">
<a
href="javascript:void(0)"
class="group aspect-h-9 aspect-w-16 relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75 active:ring-indigo-500/25"
>
<img
class="object-cover"
src="https://images.unsplash.com/photo-1601513445506-2ab0d4fb4229?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2Njc3NjQ2Mg&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
/>
<div
class="absolute inset-0 flex flex-col justify-end bg-gradient-to-b from-transparent via-black/75 to-black"
>
<div class="space-y-2 px-4 pb-5">
<div class="flex items-start justify-between gap-2">
<div class="space-y-1">
<h3 class="text-xl font-semibold text-white">
Hidden but here
</h3>
<p class="text-sm font-semibold text-slate-500">
2017
</p>
</div>
<div
class="flex h-10 w-10 items-center justify-center rounded-full bg-slate-500/25 text-slate-400 transition-all group-hover:scale-110 group-hover:bg-indigo-500 group-hover:text-white group-active:scale-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-play h-5 w-5 translate-x-0.5"
>
<path
d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"
/>
</svg>
</div>
</div>
<div
class="flex items-center gap-2 text-xs font-medium text-white"
>
<div>10:23</div>
<div
class="flex h-1 w-full grow items-center overflow-hidden rounded-lg bg-white/25"
>
<div
role="progressbar"
aria-valuenow="10"
aria-valuemin="0"
aria-valuemax="100"
class="flex items-center justify-center self-stretch bg-indigo-500 transition-all duration-500 ease-out"
style="width: 10%"
></div>
</div>
<div>1:40:00</div>
</div>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="group aspect-h-3 aspect-w-4 relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75 active:ring-indigo-500/25"
>
<img
class="object-cover"
src="https://images.unsplash.com/photo-1517488629431-6427e0ee1e5f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2Njc3NjczOA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
/>
<div
class="absolute inset-0 flex flex-col justify-end bg-gradient-to-b from-transparent via-black/75 to-black"
>
<div class="space-y-2 px-4 pb-5">
<div class="flex items-start justify-between gap-2">
<div class="space-y-1">
<h3 class="text-xl font-semibold text-white">
The Happy Team
</h3>
<p class="text-sm font-semibold text-slate-500">
2006
</p>
</div>
<div
class="flex h-10 w-10 items-center justify-center rounded-full bg-slate-500/25 text-slate-400 transition-all group-hover:scale-110 group-hover:bg-indigo-500 group-hover:text-white group-active:scale-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-play h-5 w-5 translate-x-0.5"
>
<path
d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"
/>
</svg>
</div>
</div>
<div
class="flex items-center gap-2 text-xs font-medium text-white"
>
<div>30:25</div>
<div
class="flex h-1 w-full grow items-center overflow-hidden rounded-lg bg-white/25"
>
<div
role="progressbar"
aria-valuenow="32"
aria-valuemin="0"
aria-valuemax="100"
class="flex items-center justify-center self-stretch bg-indigo-500 transition-all duration-500 ease-out"
style="width: 32%"
></div>
</div>
<div>1:25:00</div>
</div>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="group aspect-h-3 aspect-w-4 relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75 active:ring-indigo-500/25"
>
<img
class="object-cover"
src="https://images.unsplash.com/photo-1486525546686-3cd5484691f4?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2Njc3Njg0Mw&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
/>
<div
class="absolute inset-0 flex flex-col justify-end bg-gradient-to-b from-transparent via-black/75 to-black"
>
<div class="space-y-2 px-4 pb-5">
<div class="flex items-start justify-between gap-2">
<div class="space-y-1">
<h3 class="text-xl font-semibold text-white">
Everest: The Real Story
</h3>
<p class="text-sm font-semibold text-slate-500">
2021
</p>
</div>
<div
class="flex h-10 w-10 items-center justify-center rounded-full bg-slate-500/25 text-slate-400 transition-all group-hover:scale-110 group-hover:bg-indigo-500 group-hover:text-white group-active:scale-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-play h-5 w-5 translate-x-0.5"
>
<path
d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"
/>
</svg>
</div>
</div>
<div
class="flex items-center gap-2 text-xs font-medium text-white"
>
<div>1:45:30</div>
<div
class="flex h-1 w-full grow items-center overflow-hidden rounded-lg bg-white/25"
>
<div
role="progressbar"
aria-valuenow="80"
aria-valuemin="0"
aria-valuemax="100"
class="flex items-center justify-center self-stretch bg-indigo-500 transition-all duration-500 ease-out"
style="width: 80%"
></div>
</div>
<div>2:08:00</div>
</div>
</div>
</div>
</a>
</nav>
</section>
<section class="space-y-6">
<div class="flex items-center justify-between">
<h2 class="text-xl font-semibold text-slate-200">Top Rated</h2>
<a
href="javascript:void(0)"
class="group flex items-center gap-1 text-sm text-slate-400 transition hover:text-white active:text-slate-400"
>
<span>See All</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="h-5 w-5 opacity-50 transition ease-out group-hover:opacity-100 group-active:translate-x-2"
>
<path
fill-rule="evenodd"
d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
clip-rule="evenodd"
/>
</svg>
</a>
</div>
<nav
class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:gap-8"
>
<a
href="javascript:void(0)"
class="group aspect-h-4 aspect-w-3 relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75"
>
<img
class="object-cover"
src="https://images.unsplash.com/photo-1544032189-e504370d63e1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2Njc3ODU3MA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=600"
/>
<div
class="absolute inset-0 flex flex-col justify-between bg-gradient-to-b from-transparent via-black/75 to-black"
>
<div class="flex items-center justify-start gap-2 p-4">
<div
class="flex items-center gap-1 rounded-lg bg-slate-800/50 px-1.5 py-1 font-medium text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-star -mt-px inline-block h-4 w-4 text-amber-400"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
<span>9.8</span>
</div>
</div>
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div class="space-y-1">
<h3 class="text-xl font-semibold text-white">
Home of the Dragon
</h3>
<p class="text-sm font-semibold text-slate-500">2022</p>
</div>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="group aspect-h-4 aspect-w-3 relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75"
>
<img
class="object-cover"
src="https://images.unsplash.com/reserve/OQx70jjBSLOMI5ackhxm_urbex-ppc-030.jpg?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2Njc3ODU3MA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=600"
/>
<div
class="absolute inset-0 flex flex-col justify-between bg-gradient-to-b from-transparent via-black/75 to-black"
>
<div class="flex items-center justify-start gap-2 p-4">
<div
class="flex items-center gap-1 rounded-lg bg-slate-800/50 px-1.5 py-1 font-medium text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-star -mt-px inline-block h-4 w-4 text-amber-400"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
<span>9.8</span>
</div>
</div>
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div class="space-y-1">
<h3 class="text-xl font-semibold text-white">
The Train Ride
</h3>
<p class="text-sm font-semibold text-slate-500">2017</p>
</div>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="group aspect-h-4 aspect-w-3 relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75"
>
<img
class="object-cover"
src="https://images.unsplash.com/photo-1643527692322-0dc1e9bc913b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2Njc3ODU3MA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=600"
/>
<div
class="absolute inset-0 flex flex-col justify-between bg-gradient-to-b from-transparent via-black/75 to-black"
>
<div class="flex items-center justify-start gap-2 p-4">
<div
class="flex items-center gap-1 rounded-lg bg-slate-800/50 px-1.5 py-1 font-medium text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-star -mt-px inline-block h-4 w-4 text-amber-400"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
<span>9.7</span>
</div>
</div>
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div class="space-y-1">
<h3 class="text-xl font-semibold text-white">
I am a Werewolf
</h3>
<p class="text-sm font-semibold text-slate-500">1998</p>
</div>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="group aspect-h-4 aspect-w-3 relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75"
>
<img
class="object-cover"
src="https://images.unsplash.com/photo-1587061949409-02df41d5e562?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2Njc3ODU3MA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=600"
/>
<div
class="absolute inset-0 flex flex-col justify-between bg-gradient-to-b from-transparent via-black/75 to-black"
>
<div class="flex items-center justify-start gap-2 p-4">
<div
class="flex items-center gap-1 rounded-lg bg-slate-800/50 px-1.5 py-1 font-medium text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-star -mt-px inline-block h-4 w-4 text-amber-400"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
<span>9.6</span>
</div>
</div>
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div class="space-y-1">
<h3 class="text-xl font-semibold text-white">
The Cabin in the Woods
</h3>
<p class="text-sm font-semibold text-slate-500">2019</p>
</div>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="group aspect-h-4 aspect-w-3 relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75"
>
<img
class="object-cover"
src="https://images.unsplash.com/photo-1542311222-5632cf0e6c51?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2Njg1NjMyNQ&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=600"
/>
<div
class="absolute inset-0 flex flex-col justify-between bg-gradient-to-b from-transparent via-black/75 to-black"
>
<div class="flex items-center justify-start gap-2 p-4">
<div
class="flex items-center gap-1 rounded-lg bg-slate-800/50 px-1.5 py-1 font-medium text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-star -mt-px inline-block h-4 w-4 text-amber-400"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
<span>9.5</span>
</div>
</div>
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div class="space-y-1">
<h3 class="text-xl font-semibold text-white">
The Wrong Approach
</h3>
<p class="text-sm font-semibold text-slate-500">2019</p>
</div>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="group aspect-h-4 aspect-w-3 relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75"
>
<img
class="object-cover"
src="https://images.unsplash.com/photo-1517672651691-24622a91b550?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2Njc3ODU3MA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=600"
/>
<div
class="absolute inset-0 flex flex-col justify-between bg-gradient-to-b from-transparent via-black/75 to-black"
>
<div class="flex items-center justify-start gap-2 p-4">
<div
class="flex items-center gap-1 rounded-lg bg-slate-800/50 px-1.5 py-1 font-medium text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-star -mt-px inline-block h-4 w-4 text-amber-400"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
<span>9.2</span>
</div>
</div>
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div class="space-y-1">
<h3 class="text-xl font-semibold text-white">
The Boys
</h3>
<p class="text-sm font-semibold text-slate-500">2003</p>
</div>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="group aspect-h-4 aspect-w-3 relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75"
>
<img
class="object-cover"
src="https://images.unsplash.com/photo-1666681086233-0ea2686179a8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2Njc3ODU3MA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=600"
/>
<div
class="absolute inset-0 flex flex-col justify-between bg-gradient-to-b from-transparent via-black/75 to-black"
>
<div class="flex items-center justify-start gap-2 p-4">
<div
class="flex items-center gap-1 rounded-lg bg-slate-800/50 px-1.5 py-1 font-medium text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-star -mt-px inline-block h-4 w-4 text-amber-400"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
<span>9.1</span>
</div>
</div>
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div class="space-y-1">
<h3 class="text-xl font-semibold text-white">
Lions and Witches
</h3>
<p class="text-sm font-semibold text-slate-500">2013</p>
</div>
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="group aspect-h-4 aspect-w-3 relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75"
>
<img
class="object-cover"
src="https://images.unsplash.com/photo-1555979864-7a8f9b4fddf8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2Njc3ODU3MA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=600"
/>
<div
class="absolute inset-0 flex flex-col justify-between bg-gradient-to-b from-transparent via-black/75 to-black"
>
<div class="flex items-center justify-start gap-2 p-4">
<div
class="flex items-center gap-1 rounded-lg bg-slate-800/50 px-1.5 py-1 font-medium text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-star -mt-px inline-block h-4 w-4 text-amber-400"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
<span>9.0</span>
</div>
</div>
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div class="space-y-1">
<h3 class="text-xl font-semibold text-white">
Planes in the Sky
</h3>
<p class="text-sm font-semibold text-slate-500">2018</p>
</div>
</div>
</div>
</a>
</nav>
</section>
</div>
</main>
<footer
id="page-footer"
class="flex grow-0 items-center border-t border-slate-800"
>
<div
class="container mx-auto flex flex-col gap-2 px-4 py-10 text-center text-sm font-medium text-gray-500 md:flex-row md:justify-between md:gap-0 md:text-start lg:px-8 xl:max-w-7xl"
>
<div>© <span class="font-semibold">TailFlix</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 h-4 w-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-indigo-400 transition hover:text-indigo-500"
href="https://pixelcave.com"
target="_blank"
>pixelcave</a
></span
>
</div>
</div>
</footer>
</div>
</div>