TailGame
A gaming dashboard for your video games application
<!--
TailGame - A gaming dashboard for your video games application
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="{ userDropdownOpen: false }">
<!-- Page Container -->
<div id="page-container"
class="mx-auto flex min-h-screen w-full min-w-80 flex-col bg-zinc-900 pb-24 sm:ps-24 sm:pb-0">
<!-- Page Sidebar -->
<nav id="page-sidebar"
class="fixed start-0 end-0 top-auto bottom-0 z-50 flex items-center border-t border-zinc-800/75 bg-[#141417] sm:end-auto sm:top-0 sm:w-24 sm:flex-col sm:border-e sm:border-t-0 sm:pt-4"
aria-label="Main Sidebar Navigation" x-cloak>
<!-- Brand -->
<a href="javascript:void(0)"
class="group hidden size-10 items-center justify-center rounded-full text-teal-500 hover:bg-zinc-800/50 hover:text-teal-300 sm:flex sm:size-14">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
class="lucide lucide-equal-approximately inline-block size-6 group-hover:scale-110 group-active:scale-100">
<path d="M5 15a6.5 6.5 0 0 1 7 0 6.5 6.5 0 0 0 7 0"></path>
<path d="M5 9a6.5 6.5 0 0 1 7 0 6.5 6.5 0 0 0 7 0"></path>
</svg>
</a>
<!-- END Brand -->
<!-- Navigation -->
<div class="flex grow flex-row items-center justify-center gap-3 p-4 sm:flex-col">
<a href="javascript:void(0)"
class="group relative flex size-10 items-center justify-center rounded-full bg-teal-500 text-white sm:size-14">
<span
class="pointer-events-none absolute -end-2 hidden scale-90 -rotate-12 rounded-md bg-zinc-700/90 px-2 py-1 text-xs text-nowrap text-white opacity-0 backdrop-blur-sm transition duration-150 ease-out group-hover:translate-x-full group-hover:scale-100 group-hover:rotate-0 group-hover:opacity-100 sm:block rtl:group-hover:-translate-x-full">Home</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
class="lucide lucide-house inline-block size-6 group-hover:scale-110 group-active:scale-100">
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
<path
d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z">
</path>
</svg>
</a>
<a href="javascript:void(0)"
class="group relative flex size-10 items-center justify-center rounded-full text-zinc-400 hover:bg-zinc-800/75 hover:text-white sm:size-14">
<span
class="pointer-events-none absolute -end-2 hidden scale-90 -rotate-12 rounded-md bg-zinc-700/90 px-2 py-1 text-xs text-nowrap text-white opacity-0 backdrop-blur-sm transition duration-150 ease-out group-hover:translate-x-full group-hover:scale-100 group-hover:rotate-0 group-hover:opacity-100 sm:block rtl:group-hover:-translate-x-full">Library</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
class="lucide lucide-layout-grid inline-block size-6 group-hover:scale-110 group-active:scale-100">
<rect width="7" height="7" x="3" y="3" rx="1"></rect>
<rect width="7" height="7" x="14" y="3" rx="1"></rect>
<rect width="7" height="7" x="14" y="14" rx="1"></rect>
<rect width="7" height="7" x="3" y="14" rx="1"></rect>
</svg>
</a>
<a href="javascript:void(0)"
class="group relative flex size-10 items-center justify-center rounded-full text-zinc-400 hover:bg-zinc-800/75 hover:text-white sm:size-14">
<span
class="pointer-events-none absolute -end-2 hidden scale-90 -rotate-12 rounded-md bg-zinc-700/90 px-2 py-1 text-xs text-nowrap text-white opacity-0 backdrop-blur-sm transition duration-150 ease-out group-hover:translate-x-full group-hover:scale-100 group-hover:rotate-0 group-hover:opacity-100 sm:block rtl:group-hover:-translate-x-full">Store</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
class="lucide lucide-users inline-block size-6 group-hover:scale-110 group-active:scale-100">
<path d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"></path>
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
<path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"></path>
<path d="M2 7h20"></path>
<path
d="M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7">
</path>
</svg>
</a>
<a href="javascript:void(0)"
class="group relative flex size-10 items-center justify-center rounded-full text-zinc-400 hover:bg-zinc-800/75 hover:text-white sm:size-14">
<span
class="pointer-events-none absolute -end-2 hidden scale-90 -rotate-12 rounded-md bg-zinc-700/90 px-2 py-1 text-xs text-nowrap text-white opacity-0 backdrop-blur-sm transition duration-150 ease-out group-hover:translate-x-full group-hover:scale-100 group-hover:rotate-0 group-hover:opacity-100 sm:block rtl:group-hover:-translate-x-full">Community</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
class="lucide lucide-users inline-block size-6 group-hover:scale-110 group-active:scale-100">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</a>
<a href="javascript:void(0)"
class="group relative flex size-10 items-center justify-center rounded-full text-zinc-400 hover:bg-zinc-800/75 hover:text-white sm:size-14">
<span
class="pointer-events-none absolute -end-2 hidden scale-90 -rotate-12 rounded-md bg-zinc-700/90 px-2 py-1 text-xs text-nowrap text-white opacity-0 backdrop-blur-sm transition duration-150 ease-out group-hover:translate-x-full group-hover:scale-100 group-hover:rotate-0 group-hover:opacity-100 sm:block rtl:group-hover:-translate-x-full">Settings</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
class="lucide lucide-cog inline-block size-6 group-hover:scale-110 group-active:scale-100">
<path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"></path>
<path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
<path d="M12 2v2"></path>
<path d="M12 22v-2"></path>
<path d="m17 20.66-1-1.73"></path>
<path d="M11 10.27 7 3.34"></path>
<path d="m20.66 17-1.73-1"></path>
<path d="m3.34 7 1.73 1"></path>
<path d="M14 12h8"></path>
<path d="M2 12h2"></path>
<path d="m20.66 7-1.73 1"></path>
<path d="m3.34 17 1.73-1"></path>
<path d="m17 3.34-1 1.73"></path>
<path d="m11 13.73-4 6.93"></path>
</svg>
</a>
</div>
<!-- END Navigation -->
</nav>
<!-- END Page Sidebar -->
<!-- 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">
<!-- Search -->
<form onsubmit="return false;" class="w-48 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-zinc-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"></path>
</svg>
</div>
<input type="text"
class="block w-full rounded-full border-transparent bg-zinc-800 py-3 ps-12 pe-5 text-sm leading-5 text-zinc-200 placeholder:text-zinc-400 hover:border-transparent focus:border-transparent focus:ring-3 focus:ring-zinc-500/50"
id="search" name="search" placeholder="Search all games.." />
</div>
</form>
<!-- END Search -->
</div>
<!-- END Left Section -->
<!-- Right Section -->
<div class="flex items-center gap-2 lg:gap-4">
<!-- User Dropdown -->
<div class="relative inline-block">
<!-- Dropdown Toggle Button -->
<button type="button"
class="inline-flex items-center justify-center gap-1 rounded-full bg-zinc-500/10 px-3 py-2 text-sm leading-5 font-medium text-zinc-200 hover:bg-zinc-500/25 hover:text-white focus:ring-3 focus:ring-zinc-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-1506794778202-cad84cf45f1d?q=80&w=160&h=160&auto=format&fit=crop"
alt="User Avatar" class="inline-block size-8 rounded-full ring-2 ring-zinc-600" />
<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-zinc-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"></path>
</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 origin-top-right rounded-sm shadow-xl">
<div
class="flex flex-col gap-2 rounded-2xl bg-zinc-800/90 px-3 py-4 ring-1 ring-black/5 backdrop-blur-sm">
<a role="menuitem" href="javascript:void(0)"
class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-900/50 hover:text-zinc-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-zinc-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"></path>
</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-zinc-300 hover:bg-zinc-900/50 hover:text-zinc-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-zinc-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>
<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"></path>
</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-zinc-300 hover:bg-zinc-900/50 hover:text-zinc-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-zinc-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"></path>
</svg>
<span>Settings</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-zinc-300 hover:bg-zinc-900/50 hover:text-zinc-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-zinc-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"></path>
</svg>
<span>Log 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 flex-wrap items-center gap-4 rounded-xl border border-zinc-800/50 bg-zinc-800/25 p-5 lg:gap-8">
<a href="javascript:void(0)"
class="flex items-center text-white underline decoration-teal-400 decoration-2 underline-offset-8 md:text-lg">
Home
</a>
<a href="javascript:void(0)"
class="flex items-center text-zinc-400 decoration-teal-800 decoration-2 underline-offset-8 hover:text-white hover:underline active:decoration-teal-400 md:text-lg">
Store
</a>
<a href="javascript:void(0)"
class="flex items-center text-zinc-400 decoration-teal-800 decoration-2 underline-offset-8 hover:text-white hover:underline active:decoration-teal-400 md:text-lg">
Library
</a>
<a href="javascript:void(0)"
class="flex items-center text-zinc-400 decoration-teal-800 decoration-2 underline-offset-8 hover:text-white hover:underline active:decoration-teal-400 md:text-lg">
Community
</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">
<!-- Upcoming Games -->
<section class="flex flex-col gap-6">
<div class="flex items-center justify-between">
<h2 class="text-xl font-semibold text-zinc-200">
Upcoming Games
</h2>
<a href="javascript:void(0)"
class="group flex items-center gap-1 text-sm text-zinc-400 transition hover:text-white active:text-zinc-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"></path>
</svg>
</a>
</div>
<nav class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
<!-- Game -->
<a href="javascript:void(0)"
class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
<img src="https://images.igdb.com/igdb/image/upload/t_720p/ar3m54.webp"
class="aspect-16/10 w-full object-cover sm:aspect-3/4" />
<div
class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div>
<h3 class="font-semibold text-white">
Grand Theft Auto VI
</h3>
<p class="mt-1 text-xs font-semibold text-zinc-500">
2026
</p>
</div>
<div
class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="hi-micro hi-arrow-right inline-block size-4">
<path fill-rule="evenodd"
d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
</a>
<!-- END Game -->
<!-- Game -->
<a href="javascript:void(0)"
class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
<img src="https://images.igdb.com/igdb/image/upload/t_720p/mqigp2o68gdskjmarrog.webp"
class="aspect-16/10 w-full object-cover sm:aspect-3/4" />
<div
class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div>
<h3 class="font-semibold text-white">
The Elder Scrolls VI
</h3>
<p class="mt-1 text-xs font-semibold text-zinc-500">
2026
</p>
</div>
<div
class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="hi-micro hi-arrow-right inline-block size-4">
<path fill-rule="evenodd"
d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
</a>
<!-- END Game -->
<!-- Game -->
<a href="javascript:void(0)"
class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
<img class="aspect-16/10 w-full object-cover sm:aspect-3/4"
src="https://images.igdb.com/igdb/image/upload/t_720p/ar5sq.webp" />
<div
class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div>
<h3 class="font-semibold text-white">
Hollow Knight: Silksong
</h3>
<p class="mt-1 text-xs font-semibold text-zinc-500">
2025
</p>
</div>
<div
class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="hi-micro hi-arrow-right inline-block size-4">
<path fill-rule="evenodd"
d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
</a>
<!-- END Game -->
<!-- Game -->
<a href="javascript:void(0)"
class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
<img src="https://images.igdb.com/igdb/image/upload/t_720p/ar3otk.webp"
class="aspect-16/10 w-full object-cover sm:aspect-3/4" />
<div
class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div>
<h3 class="font-semibold text-white">
Resident Evil Requiem
</h3>
<p class="mt-1 text-xs font-semibold text-zinc-500">
2025
</p>
</div>
<div
class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="hi-micro hi-arrow-right inline-block size-4">
<path fill-rule="evenodd"
d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
</a>
<!-- END Game -->
</nav>
</section>
<!-- END Upcoming Games -->
<!-- Special Discounts -->
<section class="flex flex-col gap-6">
<div class="flex items-center justify-between">
<h2 class="text-xl font-semibold text-zinc-200">
Special Discounts
</h2>
<a href="javascript:void(0)"
class="group flex items-center gap-1 text-sm text-zinc-400 transition hover:text-white active:text-zinc-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"></path>
</svg>
</a>
</div>
<nav class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<!-- Game -->
<a href="javascript:void(0)"
class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25 lg:row-span-2">
<div class="absolute start-4 top-5 z-10 rounded bg-rose-600 px-2 py-1 text-xs font-bold text-white">
-60%
</div>
<img src="https://images.igdb.com/igdb/image/upload/t_720p/sciabe.webp"
class="aspect-16/10 w-full object-cover sm:aspect-3/4" />
<div
class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div>
<h3 class="font-semibold text-white">The Witcher 3</h3>
<div class="mt-1 flex items-center gap-2">
<span class="text-xs font-semibold text-zinc-400 line-through">
$59.99
</span>
<span class="text-xs font-semibold text-teal-400">
$23.99
</span>
</div>
</div>
<div
class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="hi-micro hi-arrow-right inline-block size-4">
<path fill-rule="evenodd"
d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
</a>
<!-- END Game -->
<!-- Game -->
<a href="javascript:void(0)"
class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25 lg:row-span-2">
<div class="absolute start-4 top-5 z-10 rounded bg-rose-600 px-2 py-1 text-xs font-bold text-white">
-75%
</div>
<img src="https://images.igdb.com/igdb/image/upload/t_720p/lelfskpwy4slftl3qdeb.webp"
class="aspect-16/10 w-full object-cover sm:aspect-3/4" />
<div
class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div>
<h3 class="font-semibold text-white">Cyberpunk 2077</h3>
<div class="mt-1 flex items-center gap-2">
<span class="text-xs font-semibold text-zinc-400 line-through">
$59.99
</span>
<span class="text-xs font-semibold text-teal-400">
$14.99
</span>
</div>
</div>
<div
class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="hi-micro hi-arrow-right inline-block size-4">
<path fill-rule="evenodd"
d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
</a>
<!-- END Game -->
<!-- Game -->
<a href="javascript:void(0)"
class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
<div class="absolute start-4 top-5 z-10 rounded bg-rose-600 px-2 py-1 text-xs font-bold text-white">
-50%
</div>
<img src="https://images.igdb.com/igdb/image/upload/t_720p/ar3qmt.webp"
class="aspect-16/10 w-full object-cover" />
<div
class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div>
<h3 class="font-semibold text-white">
Red Dead Redemption 2
</h3>
<div class="mt-1 flex items-center gap-2">
<span class="text-xs font-semibold text-zinc-400 line-through">
$49.99
</span>
<span class="text-xs font-semibold text-teal-400">
$24.99
</span>
</div>
</div>
<div
class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="hi-micro hi-arrow-right inline-block size-4">
<path fill-rule="evenodd"
d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
</a>
<!-- END Game -->
<!-- Game -->
<a href="javascript:void(0)"
class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
<div class="absolute start-4 top-5 z-10 rounded bg-rose-600 px-2 py-1 text-xs font-bold text-white">
-40%
</div>
<img src="https://images.igdb.com/igdb/image/upload/t_720p/ar3sea.webp"
class="aspect-16/10 w-full object-cover" />
<div
class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div>
<h3 class="font-semibold text-white">
God of War Ragnarök
</h3>
<div class="mt-1 flex items-center gap-2">
<span class="text-xs font-semibold text-zinc-400 line-through">
$69.99
</span>
<span class="text-xs font-semibold text-teal-400">
$41.99
</span>
</div>
</div>
<div
class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="hi-micro hi-arrow-right inline-block size-4">
<path fill-rule="evenodd"
d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
</a>
<!-- END Game -->
</nav>
</section>
<!-- END Special Discounts -->
<!-- Best Sellers -->
<section class="flex flex-col gap-6">
<div class="flex items-center justify-between">
<h2 class="text-xl font-semibold text-zinc-200">Best Sellers</h2>
<a href="javascript:void(0)"
class="group flex items-center gap-1 text-sm text-zinc-400 transition hover:text-white active:text-zinc-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"></path>
</svg>
</a>
</div>
<nav class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
<!-- Game -->
<a href="javascript:void(0)"
class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
<div class="absolute start-4 top-5 z-10 rounded bg-teal-600 px-2 py-1 text-xs font-bold text-white">
#1
</div>
<img src="https://images.igdb.com/igdb/image/upload/t_720p/ar3slc.webp"
class="aspect-16/9 w-full object-cover" />
<div
class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div>
<h3 class="font-semibold text-white">PEAK</h3>
<div class="mt-1 flex items-center gap-2">
<span class="text-xs font-semibold text-zinc-400">
$9.49
</span>
</div>
</div>
<div
class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="hi-micro hi-arrow-right inline-block size-4">
<path fill-rule="evenodd"
d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
</a>
<!-- END Game -->
<!-- Game -->
<a href="javascript:void(0)"
class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
<div class="absolute start-4 top-5 z-10 rounded bg-teal-600 px-2 py-1 text-xs font-bold text-white">
#2
</div>
<img src="https://images.igdb.com/igdb/image/upload/t_720p/scu5kw.webp"
class="aspect-16/9 w-full object-cover" />
<div
class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div>
<h3 class="font-semibold text-white">Elden Ring</h3>
<div class="mt-1 flex items-center gap-2">
<span class="text-xs font-semibold text-zinc-400">
$59.99
</span>
</div>
</div>
<div
class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="hi-micro hi-arrow-right inline-block size-4">
<path fill-rule="evenodd"
d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
</a>
<!-- END Game -->
<!-- Game -->
<a href="javascript:void(0)"
class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
<div class="absolute start-4 top-5 z-10 rounded bg-teal-600 px-2 py-1 text-xs font-bold text-white">
#3
</div>
<img src="https://images.igdb.com/igdb/image/upload/t_720p/ar3n2s.webp"
class="aspect-16/9 w-full object-cover" />
<div
class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div>
<h3 class="font-semibold text-white">Baldur's Gate 3</h3>
<div class="mt-1 flex items-center gap-2">
<span class="text-xs font-semibold text-zinc-400">
$59.99
</span>
</div>
</div>
<div
class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="hi-micro hi-arrow-right inline-block size-4">
<path fill-rule="evenodd"
d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
</a>
<!-- END Game -->
<!-- Game -->
<a href="javascript:void(0)"
class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
<div class="absolute start-4 top-5 z-10 rounded bg-teal-600 px-2 py-1 text-xs font-bold text-white">
#4
</div>
<img src="https://images.igdb.com/igdb/image/upload/t_720p/ar29qd.webp"
class="aspect-16/9 w-full object-cover" />
<div
class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div>
<h3 class="font-semibold text-white">Trine 5</h3>
<div class="mt-1 flex items-center gap-2">
<span class="text-xs font-semibold text-zinc-400">
$19.99
</span>
</div>
</div>
<div
class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="hi-micro hi-arrow-right inline-block size-4">
<path fill-rule="evenodd"
d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
</a>
<!-- END Game -->
<!-- Game -->
<a href="javascript:void(0)"
class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
<div class="absolute start-4 top-5 z-10 rounded bg-teal-600 px-2 py-1 text-xs font-bold text-white">
#5
</div>
<img src="https://images.igdb.com/igdb/image/upload/t_720p/scmsev.webp"
class="aspect-16/9 w-full object-cover" />
<div
class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div>
<h3 class="font-semibold text-white">Balatro</h3>
<div class="mt-1 flex items-center gap-2">
<span class="text-xs font-semibold text-zinc-400">
$19.99
</span>
</div>
</div>
<div
class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="hi-micro hi-arrow-right inline-block size-4">
<path fill-rule="evenodd"
d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
</a>
<!-- END Game -->
<!-- Game -->
<a href="javascript:void(0)"
class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
<div class="absolute start-4 top-5 z-10 rounded bg-teal-600 px-2 py-1 text-xs font-bold text-white">
#6
</div>
<img src="https://images.igdb.com/igdb/image/upload/t_720p/scxza3.webp"
class="aspect-16/9 w-full object-cover" />
<div
class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div>
<h3 class="font-semibold text-white">
Mafia: The Old Country
</h3>
<div class="mt-1 flex items-center gap-2">
<span class="text-xs font-semibold text-zinc-400">
$49.99
</span>
</div>
</div>
<div
class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="hi-micro hi-arrow-right inline-block size-4">
<path fill-rule="evenodd"
d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
</a>
<!-- END Game -->
<!-- Game -->
<a href="javascript:void(0)"
class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
<div class="absolute start-4 top-5 z-10 rounded bg-teal-600 px-2 py-1 text-xs font-bold text-white">
#7
</div>
<img src="https://images.igdb.com/igdb/image/upload/t_720p/scka7e.webp"
class="aspect-16/9 w-full object-cover" />
<div
class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div>
<h3 class="font-semibold text-white">Hades 2</h3>
<div class="mt-1 flex items-center gap-2">
<span class="text-xs font-semibold text-zinc-400">
$24.99
</span>
</div>
</div>
<div
class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="hi-micro hi-arrow-right inline-block size-4">
<path fill-rule="evenodd"
d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
</a>
<!-- END Game -->
<!-- Game -->
<a href="javascript:void(0)"
class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
<div class="absolute start-4 top-5 z-10 rounded bg-teal-600 px-2 py-1 text-xs font-bold text-white">
#8
</div>
<img src="https://images.igdb.com/igdb/image/upload/t_720p/scfeho.webp"
class="aspect-16/9 w-full object-cover" />
<div
class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
<div class="flex items-end justify-between gap-2 px-4 py-5">
<div>
<h3 class="font-semibold text-white">
Marvel's Spider-Man 2
</h3>
<div class="mt-1 flex items-center gap-2">
<span class="text-xs font-semibold text-zinc-400">
$59.99
</span>
</div>
</div>
<div
class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
class="hi-micro hi-arrow-right inline-block size-4">
<path fill-rule="evenodd"
d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
</a>
<!-- END Game -->
</nav>
</section>
<!-- END Best Sellers -->
</div>
</main>
<!-- END Page Content -->
<!-- Footer -->
<footer id="page-footer" class="flex grow-0 items-center border-t border-zinc-800">
<div
class="container mx-auto flex flex-col gap-2 px-4 py-10 text-center text-sm font-medium text-zinc-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">TailGame</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-teal-400 transition hover:text-teal-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.