TailFlix
Movies and TV Shows streaming UI
<!--
TailFlix - Movies and TV Shows streaming 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="{ 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-slate-900"
>
<!-- Page Header -->
<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">
<!-- Left Section -->
<div class="flex items-center gap-2 lg:gap-6">
<!-- Logo -->
<a
href="javascript:void(0)"
class="group inline-flex items-center gap-2 font-semibold tracking-wider text-slate-200 uppercase hover:text-white active:text-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="size-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>
<!-- END Logo -->
</div>
<!-- END Left Section -->
<!-- Right Section -->
<div class="flex items-center gap-2 lg:gap-4">
<!-- Search -->
<form onsubmit="return false;" class="w-40 sm:w-72 lg:w-96">
<div class="relative">
<div
class="absolute start-0 top-0 bottom-0 flex w-14 items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="size-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 ps-12 pe-5 text-sm leading-5 text-slate-200 placeholder:text-slate-400 hover:border-transparent focus:border-transparent focus:ring-3 focus:ring-slate-500/50"
id="search"
name="search"
placeholder="Search.."
/>
</div>
</form>
<!-- END Search -->
<!-- User Dropdown -->
<div class="relative inline-block">
<!-- Dropdown Toggle Button -->
<button
type="button"
class="inline-flex items-center justify-center gap-3 rounded-full bg-slate-500/10 px-3 py-2 text-sm leading-5 font-medium text-slate-200 hover:bg-slate-500/25 hover:text-white focus:ring-3 focus:ring-slate-500/50 focus:outline-hidden"
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 size-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 size-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>
<!-- END Dropdown Toggle Button -->
<!-- Dropdown -->
<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-sm 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 size-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 size-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 size-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 size-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>
<!-- END Dropdown -->
</div>
<!-- END User Dropdown -->
</div>
<!-- END Right Section -->
</div>
</div>
</header>
<!-- END Page Header -->
<!-- Main Navigation -->
<div class="container mx-auto px-4 lg:px-8 xl:max-w-7xl">
<nav
class="flex items-center gap-4 rounded-sm 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>
<!-- END Main Navigation -->
<!-- Page Content -->
<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"
>
<!-- Latest Movies -->
<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="size-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">
<!-- Movie -->
<a
href="javascript:void(0)"
class="group relative w-full 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="aspect-16/10 w-full 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-linear-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 size-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 size-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 size-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>
<!-- END Movie -->
<!-- Movie -->
<a
href="javascript:void(0)"
class="group relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75"
>
<img
class="aspect-16/10 w-full 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-linear-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 size-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 size-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 size-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>
<!-- END Movie -->
<!-- Movie -->
<a
href="javascript:void(0)"
class="group 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="aspect-16/10 w-full 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-linear-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 size-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 size-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 size-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>
<!-- END Movie -->
</nav>
</section>
<!-- END Latest Movies -->
<!-- Continue Watching -->
<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="size-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">
<!-- Movie -->
<a
href="javascript:void(0)"
class="group 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="aspect-4/3 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-linear-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 size-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 size-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>
<!-- END Movie -->
<!-- Movie -->
<a
href="javascript:void(0)"
class="group 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="aspect-4/3object-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-linear-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 size-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 size-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>
<!-- END Movie -->
<!-- Movie -->
<a
href="javascript:void(0)"
class="group 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="aspect-4/3 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-linear-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 size-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 size-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>
<!-- END Movie -->
</nav>
</section>
<!-- END Continue Watching -->
<!-- Top Rated -->
<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="size-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"
>
<!-- Movie -->
<a
href="javascript:void(0)"
class="group relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75"
>
<img
class="aspect-3/4 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-linear-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 size-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>
<!-- END Movie -->
<!-- Movie -->
<a
href="javascript:void(0)"
class="group relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75"
>
<img
class="aspect-3/4 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-linear-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 size-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>
<!-- END Movie -->
<!-- Movie -->
<a
href="javascript:void(0)"
class="group relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75"
>
<img
class="aspect-3/4 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-linear-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 size-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>
<!-- END Movie -->
<!-- Movie -->
<a
href="javascript:void(0)"
class="group relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75"
>
<img
class="aspect-3/4 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-linear-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 size-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>
<!-- END Movie -->
<!-- Movie -->
<a
href="javascript:void(0)"
class="group relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75"
>
<img
class="aspect-3/4 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-linear-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 size-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>
<!-- END Movie -->
<!-- Movie -->
<a
href="javascript:void(0)"
class="group relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75"
>
<img
class="aspect-3/4 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-linear-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 size-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>
<!-- END Movie -->
<!-- Movie -->
<a
href="javascript:void(0)"
class="group relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75"
>
<img
class="aspect-3/4 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-linear-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 size-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>
<!-- END Movie -->
<!-- Movie -->
<a
href="javascript:void(0)"
class="group relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75"
>
<img
class="aspect-3/4 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-linear-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 size-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>
<!-- END Movie -->
</nav>
</section>
<!-- END Top Rated -->
</div>
</main>
<!-- END Page Content -->
<!-- Footer -->
<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 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-indigo-400 transition hover:text-indigo-500"
href="https://pixelcave.com"
target="_blank"
>pixelcave</a
></span
>
</div>
</div>
</footer>
<!-- END 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.