<div class="bg-gray-50">
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
<span class="block">Ready to dive in?</span>
<span class="block text-indigo-600">Start your free trial today.</span>
</h2>
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-md shadow">
<a
href="#"
class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white hover:bg-indigo-700">
lets play
</a>
</div>
<div class="ml-3 inline-flex rounded-md shadow">
<a
href="#"
class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600 hover:bg-indigo-50">
Learn more
</a>
</div>
</div>
</div>
</div><div id="dropdown" class="m-5 inline-block">
<button onclick="toggle()"
class="inline-flex justify-center text-center items-center rounded-md border border-transparent bg-indigo-600 px-5 py-2 text-base font-medium text-white hover:bg-indigo-700">
Dropdown
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 ml-2">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z" clip-rule="evenodd" />
</svg>
</button>
<div id="menu" class="hidden flex flex-col bg-white drop-shadow-md">
<a class="px-5 py-3 hover:bg-gray-100 border-b border-gray-200" href="#">Option1</a>
<a class="px-5 py-3 hover:bg-gray-100 border-b border-gray-200" href="#">Option2</a>
<a class="px-5 py-3 hover:bg-gray-100 border-b border-gray-200" href="#">Option3</a>
<a class="px-5 py-3 hover:bg-gray-100" href="#">Option4</a>
</div>
</div>
<script>
var menu = document.getElementById("menu");
function toggle() {
if (menu.classList.contains('hidden')) {
menu.classList.remove('hidden');
} else {
menu.classList.add('hidden');
}
}
window.onclick = function (event) {
var dropdown = document.getElementById('dropdown');
if (!dropdown.contains(event.target) && !menu.classList.contains('hidden')) {
menu.classList.add('hidden');
}
}
</script><div class='bg-gray-50'>
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
<span class="block">Ready to dive in?</span>
<span class="block text-indigo-600">Start your free trial today.</span>
</h2>
<div class='mt-8'>
<button
class='bg-orange-100 hover:bg-orange-200 font-medium text-base border-transparent px-6 py-4 rounded-md flex flex-row items-center gap-4 text-red-500'>
<a
href='#'
>
See more
</a>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="w-4 h-4 font-medium">
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</button>
</div>
</div>
</div>
<div class="py-8 px-8 max-w-sm mx-auto mt-12 bg-white rounded-xl shadow-lg space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
<img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="https://thispersondoesnotexist.com/image" alt="Woman's Face">
<div class="text-center space-y-2 sm:text-left">
<div class="space-y-0.5">
<p class="text-lg text-black font-semibold">
Erin Lindford
</p>
<p class="text-slate-500 font-medium">
Product Engineer
</p>
</div>
<button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
</div>
</div><div class="bg-gray-50">
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
<span class="block">Ready to dive in?</span>
<span class="block text-indigo-600">Start your free trial today.</span>
</h2>
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-md shadow">
<a
href="#"
class="inline-flex items-center justify-center rounded-sm border border-transparent bg-red-200 px-5 py-3 text-base font-medium text-red-500 hover:bg-indigo-700">
<span class="mx-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
</svg>
</span>
Delete
</a>
</div>
<div class="ml-3 inline-flex rounded-md shadow">
<a
href="#"
class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600 hover:bg-indigo-50">
Learn more
</a>
</div>
</div>
</div>
</div><div class='bg-gray-50'>
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
<span class="block">Ready to dive in?</span>
<span class="block text-indigo-600">Start your free trial today.</span>
</h2>
<div class='mt-8'>
<button
class='bg-blue-500 hover:bg-blue-800 font-medium text-base border-transparent px-6 py-4 rounded-full flex flex-row items-center gap-4 text-white shadow'>
<a
href='#'
>
Download Now
</a>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
</svg>
</button>
</div>
</div>
</div>
<div class="bg-gray-50">
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-md shadow">
<a
href="#"
class="inline-flex items-center justify-center rounded-sm border border-blue-400 bg-blue-200 px-5 py-3 text-base font-medium text-blue-500 hover:bg-blue-200">
<span class="mx-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
</svg>
</span>
Setting
</a>
</div>
</div>
</div>
</div><div class="bg-gray-50">
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
<span class="block">Ready to dive in?</span>
<span class="block text-indigo-600">Start your free trial today.</span>
</h2>
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-full border-2 border-black hover:border-gray-300">
<a
href="#"
class="inline-flex flex-col items-center justify-center rounded-full border border-transparent font-bold gap-1 w-28 h-28 hover:bg-gray-200 text-base text-xs">
<span class="mx-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
</svg>
</span>
<div>Scroll</div>
</a>
</div>
</div>
</div>
</div>
</div><head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
</head>
<body>
<div class="h-screen bg-gray-200 flex flex-col">
<div class="flex h-screen items-center justify-center">
<button class="h-24 w-24 rounded-xl bg-blue-500 focus:outline-none" onclick="play();">
<i class="fa fa-play fa-2x text-white" id="play-btn"></i>
</button>
</div>
<div class="flex h-screen items-center justify-center">
<button class="h-24 w-24 rounded-full bg-blue-500 focus:outline-none" onclick="play();">
<i class="fa fa-play fa-2x text-white" id="play-btn"></i>
</button>
</div>
<div class="flex h-screen items-center justify-center">
<button class="h-24 w-24 rounded-xl border-2 border-blue-500 focus:outline-none" onclick="play();">
<i class="fa fa-play fa-2x text-blue-500" id="play-btn"></i>
</button>
</div>
<div class="flex h-screen items-center justify-center">
<button class="h-24 w-24 rounded-full border-2 border-blue-500 focus:outline-none" onclick="play();">
<i class="fa fa-play fa-2x text-blue-500" id="play-btn"></i>
</button>
</div>
</div>
</body>
<div class="flex items-center justify-center w-screen h-screen bg-white">
<form method="GET">
<div class="relative text-black focus-within:text-gray-400">
<span class="absolute inset-y-0 right-0 flex items-center pr-2">
<div class="border-l-2 border-solid border-amber-800 h-4 pr-1"></div>
<button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</button>
</span>
<input type="search" name="q" class="py-3 text-sm w-32 text-black placeholder:text-black bg-amber-500 rounded-full pl-5 focus:outline-none focus:bg-white focus:text-gray-900" placeholder="Search..." autocomplete="off">
</div>
</form>
</div>