<!-- This example requires Tailwind CSS v2.0+ -->
<div class="relative bg-white overflow-hidden h-screen border-t-4 border-indigo-600">
<div class="max-w-7xl mx-auto h-full ">
<div class="h-full relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
<svg class="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-white transform translate-x-1/2"
fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
<polygon points="50,0 100,0 50,100 0,100" />
</svg>
<div>
<div class="px-4 h-screen flex flex-col justify-center max-w-3xl mx-auto relative z-20">
<p
class="hidden mb-4 bg-indigo-200 lg:inline-block text-xs mt-16 bg-primary py-1 px-3 rounded-full mr-auto font-semibold text-indigo-800 lg:text-sm">
<span
class="bg-indigo-600 uppercase relative -left-2 font-semibold rounded-full px-4 inline-block tracking-wide text-white">Introducing</span>
Easy development tool for tailwindcss
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline-block ml-1 relative top-0" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</p>
<h1 class="text-5xl font-bold">Everything you need to grow your business</h1>
<p class="text-gray-500 my-4 text-lg">Drycomponents does everything you need to start and grow your business.
Attract clients through engaging
video content and simplify your business operations</p>
<a href="javascript:void(0);"
class="inline-flex mt-4 w-72 items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
Get started today.
</a>
<ul class="mt-8 flex flex-col md:flex-row justify-between text-indigo-600 w-full max-w-sm ">
<li class="mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20"
fill="currentColor">
<path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z" />
<path fill-rule="evenodd"
d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"
clip-rule="evenodd" />
</svg>
No credit card required
</li>
<li class="mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z"
clip-rule="evenodd" />
</svg>
Free 1 month trial
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="fixed top-0 left-0 w-full z-20 bg-white lg:bg-transparent">
<div class="container mx-auto">
<div class="py-4 px-4 flex flex-row justify-between flex-wrap">
<a href="javascript:void(0)"
class="block px-2 py-4 lg:w-3/12 font-bold text-indigo-600 text-xl uppercase tracking-wider">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
</svg>
DESIGNLABS
</a>
<div class="block lg:hidden text-right py-4 mt-1">
<button id="menu" onclick="showMenu()" type="button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
<div class="hidden lg:flex flex-col lg:flex-row justify-between items-center w-full lg:w-8/12 overflow-y-auto"
id="submenu">
<ul class=" lg:flex flex-col md:flex-row justify-end">
<li>
<a class="p-4 block" href="javascript:void(0)">Products</a>
</li>
<li>
<a class="p-4 block" href="javascript:void(0)">Solutions</a>
</li>
<li>
<a class="p-4 block" href="javascript:void(0)">Developers</a>
</li>
<li>
<a class="p-4 block" href="javascript:void(0)">Resources</a>
</li>
<li>
<a class="p-4 block" href="javascript:void(0)">Pricing</a>
</li>
</ul>
<ul class="lg:flex flex-col md:flex-row justify-end">
<li>
<a href="javascript:void(0);"
class="inline-flex items-center justify-center px-6 py-2 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
Get Started
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full"
src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80"
alt="">
</div>
</div>
<script>
function showMenu() {
document.getElementById("submenu").classList.toggle("hidden");
}
</script>
const Hero = () => {
return (
<div className="relative bg-white overflow-hidden h-screen border-t-4 border-indigo-600">
<div className="max-w-7xl mx-auto h-full ">
<div className="h-full relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
<svg
className="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-white transform translate-x-1/2"
fill="currentColor"
viewBox="0 0 100 100"
preserveAspectRatio="none"
aria-hidden="true"
>
<polygon points="50,0 100,0 50,100 0,100" />
</svg>
<div>
<div className="px-4 h-screen flex flex-col justify-center max-w-3xl mx-auto relative z-20">
<p className="hidden mb-4 bg-indigo-200 lg:inline-block text-xs mt-16 bg-primary py-1 px-3 rounded-full mr-auto font-semibold text-indigo-800 lg:text-sm">
<span className="bg-indigo-600 uppercase relative -left-2 font-semibold rounded-full px-4 inline-block tracking-wide text-white">
Introducing
</span>
Easy development tool for tailwindcss
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4 inline-block ml-1 relative top-0"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9 5l7 7-7 7"
/>
</svg>
</p>
<h1 className="text-5xl font-bold">
Everything you need to grow your business
</h1>
<p className="text-gray-500 my-4 text-lg">
Drycomponents does everything you need to start
and grow your business. Attract clients through
engaging video content and simplify your
business operations
</p>
<a
href="javascript:void(0);"
className="inline-flex mt-4 w-72 items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
>
Get started today.
</a>
<ul className="mt-8 flex flex-col md:flex-row justify-between text-indigo-600 w-full max-w-sm ">
<li className="mb-4">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 inline-block mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z" />
<path
fillRule="evenodd"
d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"
clipRule="evenodd"
/>
</svg>
No credit card required
</li>
<li className="mb-4">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 inline-block mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z"
clipRule="evenodd"
/>
</svg>
Free 1 month trial
</li>
</ul>
</div>
</div>
</div>
</div>
<div className="fixed top-0 left-0 w-full z-20 bg-white lg:bg-transparent">
<div className="container mx-auto">
<div className="py-4 px-4 flex flex-row justify-between flex-wrap">
<a
href="javascript:void(0)"
className="block px-2 py-4 lg:w-3/12 font-bold text-indigo-600 text-xl uppercase tracking-wider"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 inline-block mr-2"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
/>
</svg>
DESIGNLABS
</a>
<div className="block lg:hidden text-right py-4 mt-1">
<button
id="menu"
onclick="showMenu()"
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 6h16M4 12h16m-7 6h7"
/>
</svg>
</button>
</div>
<div
className="hidden lg:flex flex-col lg:flex-row justify-between items-center w-full lg:w-8/12 overflow-y-auto"
id="submenu"
>
<ul className=" lg:flex flex-col md:flex-row justify-end">
<li>
<a
className="p-4 block"
href="javascript:void(0)"
>
Products
</a>
</li>
<li>
<a
className="p-4 block"
href="javascript:void(0)"
>
Solutions
</a>
</li>
<li>
<a
className="p-4 block"
href="javascript:void(0)"
>
Developers
</a>
</li>
<li>
<a
className="p-4 block"
href="javascript:void(0)"
>
Resources
</a>
</li>
<li>
<a
className="p-4 block"
href="javascript:void(0)"
>
Pricing
</a>
</li>
</ul>
<ul className="lg:flex flex-col md:flex-row justify-end">
<li>
<a
href="javascript:void(0);"
className="inline-flex items-center justify-center px-6 py-2 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
>
Get Started
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div className="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<img
className="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full"
src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80"
alt=""
/>
</div>
</div>
);
};
export default Hero;