You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
203 lines
7.9 KiB
203 lines
7.9 KiB
<div class="text-gray-950 bg-gray-200">
|
|
<bar class="bg-gray-400 justify-evenly items-center">
|
|
<img src="/icons/twitch.svg" />
|
|
<span>Browse</span>
|
|
<img src="/icons/menu.svg" />
|
|
<bar class="p-0! bg-gray-300 rounded-lg border-1 border-gray-700">
|
|
<input placeholder="Search" />
|
|
<img src="/icons/search.svg" />
|
|
</bar>
|
|
<img src="/icons/crown.svg" />
|
|
<button type="button">Log In</button>
|
|
<button type="button">Sign Up</button>
|
|
<img src="/icons/person-standing.svg" />
|
|
</bar>
|
|
|
|
<div class="p-1">
|
|
<bar>
|
|
<img src="/icons/chevron-left.svg" />
|
|
|
|
<shape class="video">
|
|
Main Video
|
|
</shape>
|
|
|
|
<img src="/icons/chevron-right.svg" />
|
|
</bar>
|
|
|
|
<block>
|
|
<a class="text-xl">Live on Twitch</a>
|
|
<grid class="grid-cols-2 p-0! gap-2">
|
|
<block class="p-0!">
|
|
<shape class="video">Sample Video</shape>
|
|
<div class="flex align-top gap-3">
|
|
<shape class="bg-green-400! top-3 left-3 rounded-full aspect-square! max-w-15 max-h-15">Avatar</shape>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="font-bold">Title</span>
|
|
<span>Name</span>
|
|
<span>Game Title</span>
|
|
<span>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</block>
|
|
|
|
<block class="p-0!">
|
|
<shape class="video">Sample Video</shape>
|
|
<div class="flex align-top gap-3">
|
|
<shape class="bg-green-400! top-3 left-3 rounded-full aspect-square! max-w-15 max-h-15">Avatar</shape>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="font-bold">Title</span>
|
|
<span>Name</span>
|
|
<span>Game Title</span>
|
|
<span>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</block>
|
|
</bar>
|
|
</block>
|
|
|
|
<div class="flex justify-center items-center">
|
|
<a href="#">Show more v</a>
|
|
</div>
|
|
|
|
<block>
|
|
<span><a href="#">Categories</a> we think you'll like</span>
|
|
|
|
<grid class="grid-cols-4 p-0! gap-2">
|
|
<block class="p-0!">
|
|
<shape class="aspect-[9/12]!">Category</shape>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="font-bold">Title</span>
|
|
<span>Name</span>
|
|
<span>Game Title</span>
|
|
<span>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
</span>
|
|
</div>
|
|
</block>
|
|
<block class="p-0!">
|
|
<shape class="aspect-[9/12]!">Category</shape>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="font-bold">Title</span>
|
|
<span>Name</span>
|
|
<span>Game Title</span>
|
|
<span>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
</span>
|
|
</div>
|
|
</block>
|
|
<block class="p-0!">
|
|
<shape class="aspect-[9/12]!">Category</shape>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="font-bold">Title</span>
|
|
<span>Name</span>
|
|
<span>Game Title</span>
|
|
<span>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
</span>
|
|
</div>
|
|
</block>
|
|
<block class="p-0!">
|
|
<shape class="aspect-[9/12]!">Category</shape>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="font-bold">Title</span>
|
|
<span>Name</span>
|
|
<span>Game Title</span>
|
|
<span>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
</span>
|
|
</div>
|
|
</block>
|
|
</grid>
|
|
</block>
|
|
|
|
<grid class="grid-cols-3">
|
|
<stack class="p-0!">
|
|
<button type="button" class="rounded-xxl text-left text-xxl">Games</button>
|
|
<img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/gamepad.svg" />
|
|
</stack>
|
|
<stack class="p-0!">
|
|
<button type="button" class="rounded-xxl text-left text-xxl">IRL</button>
|
|
<img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/mic.svg" />
|
|
</stack>
|
|
<stack class="p-0!">
|
|
<button type="button" class="rounded-xxl text-left text-xxl">Music</button>
|
|
<img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/headphones.svg" />
|
|
</stack>
|
|
<stack class="p-0!">
|
|
<button type="button" class="rounded-xxl text-left text-xxl">Creative</button>
|
|
<img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/paintbrush.svg" />
|
|
</stack>
|
|
<stack class="p-0!">
|
|
<button type="button" class="rounded-xxl text-left text-xxl">Esports</button>
|
|
<img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/trophy.svg" />
|
|
</stack>
|
|
</grid>
|
|
|
|
<block>
|
|
<a class="text-xl">Live on Twitch</a>
|
|
<grid class="grid-cols-2 p-0! gap-2">
|
|
<block class="p-0!">
|
|
<shape class="video">Sample Video</shape>
|
|
<div class="flex align-top gap-3">
|
|
<shape class="bg-green-400! top-3 left-3 rounded-full aspect-square! max-w-15 max-h-15">Avatar</shape>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="font-bold">Title</span>
|
|
<span>Name</span>
|
|
<span>Game Title</span>
|
|
<span>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</block>
|
|
|
|
<block class="p-0!">
|
|
<shape class="video">Sample Video</shape>
|
|
<div class="flex align-top gap-3">
|
|
<shape class="bg-green-400! top-3 left-3 rounded-full aspect-square! max-w-15 max-h-15">Avatar</shape>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="font-bold">Title</span>
|
|
<span>Name</span>
|
|
<span>Game Title</span>
|
|
<span>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</block>
|
|
</bar>
|
|
</block>
|
|
|
|
<block class="justify-center items-center">
|
|
<h4>an amazon company</h4>
|
|
</block>
|
|
</div>
|
|
</div>
|
|
|