<section class="relative xl:pb-52 bg-black overflow-hidden" x-data="{ mobileNavOpen: false }">
<div class="hidden xl:block absolute bottom-0 left-0 ml-20 2xl:ml-52 px-20">
<img class="animate-bouncingSlow max-w-sm xl:max-w-md -mb-20" src="suncealand-assets/background/red-lines.svg" alt="">
<img class="absolute top-0 left-1/2 mt-20 transform -translate-x-1/2" src="suncealand-assets/images/apps-avatar-dashboard-app.png" alt="">
</div>
<nav class="relative z-10">
<div class="flex px-4 md:px-14 py-6 items-center relative">
<a class="inline-block text-2xl font-bold mr-8 xl:mr-17" href="#">
<img src="suncealand-assets/logos/suncealand-white.svg" alt="">
</a>
<div class="hidden lg:block relative w-full max-w-xs xl:max-w-md 2xl:max-w-lg mr-8 xl:mr-20 2xl:mr-52">
<input class="w-full pl-20 py-5 pr-5 h-14 bg-gray-900 rounded-lg placeholder-gray-300 text-gray-300 outline-none" type="search" placeholder="Search">
<button class="inline-block absolute top-1/2 left-0 ml-8 transform -translate-y-1/2" type="submit">
<svg width="23" height="21" viewBox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="9" stroke="white" stroke-width="2"></circle><rect x="16" y="15.4142" width="2" height="7.1336" rx="1" transform="rotate(-45 16 15.4142)" fill="white"></rect></svg>
</button>
</div>
<div class="hidden lg:block">
<ul class="flex items-center">
<li class="relative group mr-14">
<button class="inline-block text-left text-base font-medium text-white">
<div class="flex items-center">
<span class="mr-3">Resources</span>
<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.332 0.999974L10.3887 0.0566406L6.66536 3.77997L5.9987 4.5L5.33203 3.77997L1.6087 0.0566402L0.665365 0.999974L5.9987 6.33331L11.332 0.999974Z" fill="currentColor"></path>
</svg>
</div>
</button>
<div class="hidden group-hover:block absolute z-20 bottom-0 left-0 w-52 pt-4 transform translate-y-full">
<div class="py-4 px-6 bg-white rounded-lg border-2 border-blueGray-900"><a class="block mb-2 text-xs" href="#">Link 1</a><a class="block mb-2 text-xs" href="#">Link 1</a><a class="block text-xs" href="#">Link 1</a></div>
</div>
</li>
<li><a class="inline-block text-base font-medium text-white" href="#">Community</a></li>
</ul>
</div>
<div class="hidden lg:block ml-auto">
<a class="relative group inline-flex h-12 w-24 items-center justify-center border border-white rounded-lg overflow-hidden" href="#">
<span class="relative z-10 font-semibold text-white group-hover:text-black transition duration-500">Login</span>
<div class="absolute top-0 left-0 h-full w-28 transform -translate-x-full -ml-1 group-hover:-translate-x-0 bg-white transition duration-500 ease-linear"></div>
</a>
</div>
<button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden ml-auto flex p-1 items-center text-white">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
</nav>
<div class="container px-4 mx-auto">
<div class="relative pt-28 xl:pt-52 mb-24 xl:mb-0">
<div class="max-w-lg mx-auto xl:mr-0 relative">
<div class="inline-flex items-center mb-8">
<span class="block w-2 h-2 mr-2 rounded-full bg-indigo-500"></span>
<span class="uppercase text-sm text-gray-100 font-medium tracking-tight">Explore new web</span>
</div>
<h1 class="text-6xl sm:text-8xl xl:text-9xl font-heading text-white mb-12">Little things do make a difference.</h1>
<p class="text-lg text-gray-100 mb-20">Record your audio and upload it now.</p>
<div class="flex flex-col sm:flex-row">
<a class="group relative inline-block h-16 w-full sm:w-48 mb-4 sm:mb-0 sm:mr-6 bg-white rounded" href="#">
<div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
<div class="flex h-full w-full items-center justify-center bg-blue-500 border-2 border-white rounded">
<span class="text-base font-semibold text-black uppercase">Get started</span>
</div>
</div>
</a>
<a class="group relative inline-block h-16 w-full sm:w-48 bg-white rounded" href="#">
<div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
<div class="flex h-full w-full items-center justify-center bg-yellow-500 border-2 border-white rounded">
<span class="text-base font-semibold text-black uppercase">Download</span>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="xl:hidden relative">
<img class="animate-bouncingSlow h-135 mx-auto -mb-12" src="suncealand-assets/background/red-lines.svg" alt="">
<img class="absolute top-0 left-1/2 w-full sm:max-w-md transform -translate-x-1/2" src="suncealand-assets/images/apps-avatar-dashboard-app.png" alt="">
</div>
</div>
<div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
<div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 backdrop-blur-xl backdrop-filter bg-gray-900 bg-opacity-80"></div>
<nav class="relative pt-8 pb-8 bg-white h-full overflow-y-auto">
<div class="flex flex-col px-6 h-full">
<a class="inline-block text-2xl font-bold ml-8 mb-16" href="#">
<img src="suncealand-assets/logos/suncealand-dark.svg" alt="">
</a>
<ul class="w-full mb-auto pb-16">
<li class="group mb-6">
<button class="inline-block text-left text-base font-medium text-black">
<div class="flex items-center">
<span class="mr-3">Resources</span>
<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.332 0.999974L10.3887 0.0566406L6.66536 3.77997L5.9987 4.5L5.33203 3.77997L1.6087 0.0566402L0.665365 0.999974L5.9987 6.33331L11.332 0.999974Z" fill="currentColor"></path>
</svg>
</div>
</button>
<div class="hidden group-hover:block pt-4">
<div class="pl-6"><a class="block mb-2 text-black" href="#">Link 1</a><a class="block mb-2 text-black" href="#">Link 1</a><a class="block text-black" href="#">Link 1</a></div>
</div>
</li>
<li class="mb-6"><a class="inline-block text-base font-medium text-black" href="#">Community</a></li>
<li class="mb-6"><a class="inline-block text-base font-medium text-black" href="#">Story</a></li>
<li><a class="inline-block text-base font-medium text-black" href="#">Pricing</a></li>
</ul>
<div class="w-full">
<a class="relative group inline-flex h-12 w-full mb-4 items-center justify-center font-semibold rounded-lg bg-white border border-black" href="#">
<span class="text-black">Login</span>
</a>
<a class="relative inline-flex h-12 w-full mb-4 items-center justify-center font-semibold rounded-lg bg-blue-500" href="#">
<span class="text-black">Logout</span>
</a>
<p class="pl-2 text-sm">2022 © Shuffle</p>
</div>
</div>
</nav>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
