Hero's
Hero's 01
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4 lg:py-5">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#" class="block flex-shrink-0">
<img class="h-9" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<div class="flex justify-between space-x-4 md:space-x-10 flex-shrink-1 md:flex-grow-0">
<nav class="hidden md:flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-8 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<button class="w-9 bg-gray-600 p-2 rounded-md text-gray-200 block md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div class="max-w-screen-xl mx-auto text-center mt-8 lg:mt-20 xl:mt-32 mb-8 lg:mb-20 xl:mb-32">
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-gray-700 font-medium">Buy our awesome product now</h2>
<p class="text-xl text-gray-600 mt-4 max-w-3xl mx-auto">World among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath</p>
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6">Order now</a>
</div>
<div class="max-w-screen-xl mx-auto px-6 lg:px-8 xl:px-4 grid grid-cols-2 sm:grid-cols-3 space-y-5 sm:space-y-3 xl:grid-cols-6 col-gap-6 mt-8 lg:mt-10 mb-12 lg:mb-20">
<img class="h-12 p-1 self-end justify-self-center opacity-90" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
<img class="h-10 p-1 self-end justify-self-center opacity-90" src="http://demo-assets.uibak.com/themesdev/edge-logo.svg"alt="logo placeholder">
<img class="h-10 p-1 self-end justify-self-center opacity-90" src="http://demo-assets.uibak.com/themesdev/sbalbew-logo.svg"alt="logo placeholder">
<img class="h-10 p-1 self-end justify-self-center opacity-90" src="http://demo-assets.uibak.com/themesdev/drops-logo.svg"alt="logo placeholder">
<img class="h-12 p-1 self-end justify-self-center opacity-90" src="http://demo-assets.uibak.com/themesdev/pathway-logo.svg"alt="logo placeholder">
<img class="h-12 p-1 self-end justify-self-center opacity-90" src="http://demo-assets.uibak.com/themesdev/feedback-logo.svg"alt="logo placeholder">
</div>
</div>
Hero's 02
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4 lg:py-5">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#" class="block flex-shrink-0">
<img class="h-9" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<div class="flex justify-between space-x-4 md:space-x-10 flex-shrink-1 md:flex-grow-0">
<nav class="hidden md:flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-8 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<button class="w-9 bg-gray-600 p-2 rounded-md text-gray-200 block md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div class="max-w-screen-xl mx-auto grid grid-cols-2 gap-6 mb-8 lg:mb-20 mt-12 lg:mt-20">
<div class="col-span-2 md:col-span-1">
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-gray-700 font-medium">Amazing Features for your next project or website</h2>
</div>
<div class="flex md:justify-end col-span-2 md:col-span-1">
<div class="max-w-md md:pt-4">
<p class="text-lg text-gray-600">You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance.</p>
<a href="#" class="font-semibold mt-3 inline-block">Learn more</a>
</div>
</div>
</div>
<div class="max-w-screen-xl mx-auto mb-12">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal.svg"alt="image placeholder" class="rounded-lg">
</div>
</div>
Hero's 03
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4 lg:py-5">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#" class="block flex-shrink-0">
<img class="h-9" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<div class="flex justify-between space-x-4 md:space-x-10 flex-shrink-1 md:flex-grow-0">
<nav class="hidden md:flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-8 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<button class="w-9 bg-gray-600 p-2 rounded-md text-gray-200 block md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div class="max-w-screen-xl mx-auto grid grid-cols-2 gap-8 lg:gap-24 md:items-center py-12 lg:py-20">
<div class="col-span-2 md:col-span-1 order-2 md:order-1">
<h2 class="text-2xl sm:text-3xl lg:text-4xl text-gray-700 font-medium mb-6">Boxify helps you get better with minimal effor.</h2>
<p class="text-xl text-gray-600 mb-6">When, while the lovely valley teems with vapour around me, and the meridian sun strikes the waiting be females upper surface of the impenetrable foliage of my trees</p>
<div class="flex flex-row space-x-2">
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6">Create an Account</a>
<a href="#" class="inline-block bg-gray-500 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6">View pricing</a>
</div>
</div>
<div class="col-span-2 md:col-span-1 flex flex-row space-x-2 order-1 md:order-2 items-center justify-center">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="" class="max-w-md">
</div>
</div>
</div>
Hero's 04
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4 lg:py-5">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#" class="block flex-shrink-0">
<img class="h-9" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<div class="flex justify-between space-x-4 md:space-x-10 flex-shrink-1 md:flex-grow-0">
<nav class="hidden md:flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-8 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<button class="w-9 bg-gray-600 p-2 rounded-md text-gray-200 block md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div class="max-w-screen-xl mx-auto text-center mt-8 lg:mt-20 xl:mt-32 mb-8 lg:mb-20 xl:mb-32">
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-gray-700 font-medium">The best online audio chat</h2>
<p class="text-xl text-gray-600 mt-4 max-w-3xl mx-auto">World among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath</p>
<form class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-6 lg:mt-8 mx-auto">
<input type="text" placeholder="Name" class="bg-white border border-gray-300 px-4 py-2 flex-1 rounded-lg h-14 col-span-1">
<input type="Email" placeholder="Email address" class="bg-white border border-gray-300 px-4 py-2 flex-1 rounded-lg h-14 col-span-1">
<button class="inline-block bg-gray-600 font-semibold rounded-lg h-14 py-4 px-5 lg:px-8 text-white justify-self-center md:justify-self-auto col-span-3 md:col-span-1">Sign up for free</button>
</form>
</div>
</div>
Hero's 05
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4 lg:py-5">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#" class="block flex-shrink-0">
<img class="h-9" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<div class="flex justify-between space-x-4 md:space-x-10 flex-shrink-1 md:flex-grow-0">
<nav class="hidden md:flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-8 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<button class="w-9 bg-gray-600 p-2 rounded-md text-gray-200 block md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div class="max-w-screen-xl mx-auto text-center mt-8 lg:mt-20 xl:mt-32 mb-8 lg:mb-20 xl:mb-32">
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-gray-700 font-medium">High quality themes and websites</h2>
<p class="text-xl text-gray-600 mt-4 max-w-3xl mx-auto">World among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath</p>
<div class="flex flex-row space-x-2 justify-center mt-6">
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6">Order now</a>
<a href="#" class="inline-block bg-gray-500 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6">View pricing</a>
</div>
<div class="md:grid md:grid-cols-3 md:gap-12 lg:gap-16 mt-12 lg:mt-20 space-y-12 md:space-y-0">
<div class="text-left">
<h3 class="font-semibold text-lg mb-2">A collection of textile samples</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed in his bed into a horrible vermin.</p>
</div>
<div class="text-left">
<h3 class="font-semibold text-lg mb-2">How about if I sleep a little bit</h3>
<p>Doing business like this takes much more effort than doing your own business at home, and on top of that there's the curse of travelling.</p>
</div>
<div class="text-left">
<h3 class="font-semibold text-lg mb-2">He felt a slight itch up on his bell</h3>
<p>He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the floundering legs, and only stopped when.</p>
</div>
</div>
</div>
</div>
Hero's 06
=
<div class="bg-gray-100 text-gray-600 min-h-screen flex flex-col flex-wrap">
<div class="w-full mx-auto flex justify-between items-center relative py-4 lg:py-5 px-6 lg:px-8">
<a href="#" class="block flex-shrink-0">
<img class="h-9" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<div class="flex justify-between space-x-4 md:space-x-10 flex-shrink-1 md:flex-grow-0">
<nav class="hidden md:flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-8 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<button class="w-9 bg-gray-600 p-2 rounded-md text-gray-200 block md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div class="md:flex md:flex-1 md:flex-wrap w-full">
<div class="w-full md:w-1/2">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="" class="object-cover min-h-full w-full">
</div>
<div class="w-full md:w-1/2 py-6 lg:py-12 p-8 flex items-center justify-center">
<div class="">
<span class="block uppercase font-semibold mb-2">Premium Tailwind CSS</span>
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">The best product on the market</h2>
<p class="text-xl text-gray-600 mt-4 max-w-3xl">When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my </p>
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6">Order now</a>
</div>
</div>
</div>
</div>
Hero's 07
=
<div class="bg-gray-100 text-gray-600 ">
<div class="px-6 lg:px-8 py-4 lg:py-5">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#" class="block flex-shrink-0">
<img class="h-9" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<div class="flex justify-between space-x-4 md:space-x-10 flex-shrink-1 md:flex-grow-0">
<nav
class="hidden md:flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-8 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<button class="w-9 bg-gray-600 p-2 rounded-md text-gray-200 block md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
<div class="max-w-screen-xl mx-auto text-center mt-8 sm:mt-12 md:mt-20 xl:mt-48 mb-8 sm:mb-12 md:mb-20 xl:mb-48">
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-gray-700 font-medium">What are you looking for?</h2>
<p class="text-xl text-gray-600 mt-4 max-w-3xl mx-auto">World among the stalks, and grow familiar with the countless indescribable forms </p>
<div class="flex justify-center items-center mt-6 lg:mt-12 flex-wrap">
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6 mx-4">Clothes for men</a>
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6 mx-4">Clothes for woman</a>
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6 mx-4">Clothes for children</a>
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6 mx-4">Sale outlet</a>
</div>
</div>
<div class="bg-gray-200">
<div class="flex flex-col md:flex-row justify-between max-w-screen-xl mx-auto px-6 lg:px-8 py-4">
<div class="flex space-x-2 items-center">
<span class="w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
</svg>
</span>
<span>
Made divided appear let sixth
</span>
</div>
<div class="flex space-x-2 items-center">
<span class="w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
</svg>
</span>
<span>
Fruitful gathered that upon
</span>
</div>
<div class="flex space-x-2 items-center">
<span class="w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
</svg>
</span>
<span>
Was multiply saw appear
</span>
</div>
</div>
</div>
</div>
Hero's 08
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4 lg:py-5 ">
<div class="max-w-screen-xl mx-auto ">
<div class="flex justify-between items-center relative">
<a href="#" class="block flex-shrink-0">
<img class="h-9" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<div class="flex justify-between space-x-4 md:space-x-10 flex-shrink-1 md:flex-grow-0">
<nav
class="hidden md:flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-8 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<button class="w-9 bg-gray-600 p-2 rounded-md text-gray-200 block md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div class="flex flex-col md:flex-row py-4 lg:py-8 space-x-6">
<div class="flex space-x-2 items-center">
<span class="w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</span>
<span>
Order before 22:00, delivered tomorrow
</span>
</div>
<div class="hidden lg:flex space-x-2 items-center">
<span class="w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</span>
<span>
Always free returns
</span>
</div>
<div class="hidden lg:flex space-x-2 items-center">
<span class="w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</span>
<span>
Supports after pay
</span>
</div>
</div>
<div class="grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-2">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal.svg"alt="image placeholder" class="min-h-full object-cover">
</div>
<div class="col-span-3 lg:col-span-1 lg:space-y-2 md:flex lg:flex-col divide-y-2 md:divide-y-0 md:divide-x-2 lg:divide-x-0 divide-gray-300">
<div class="bg-gray-200 p-4 lg:rounded-lg flex-1">
<span class="text-xl font-semibold text-gray-700 block">Doing your own business</span>
<p class="mt-3">Doing business like this takes much more effort than doing your own business at home.</p>
<a href="#" class="inline-block mt-2">Read more</a>
</div>
<div class="bg-gray-200 p-4 lg:rounded-lg flex-1">
<span class="text-xl font-semibold text-gray-700 block">Shut his eyes so</span>
<p class="mt-3">He must have tried it a hundred times, shut his eyes so that he wouldn't have to look.</p>
<a href="#" class="inline-block mt-2">Read more</a>
</div>
<div class="bg-gray-200 p-4 lg:rounded-lg flex-1">
<span class="text-xl font-semibold text-gray-700 block">Other travelling salesmen</span>
<p class="mt-3">You've got to get enough sleep. Other travelling salesmen live a life of luxury.</p>
<a href="#" class="inline-block mt-2">Read more</a>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row justify-center py-4 lg:py-8 space-y-3 md:space-y-0 md:space-x-6">
<div class="flex space-x-2 items-center">
<span class="w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</span>
<span>
Happy customers 8.5
</span>
</div>
<div class="flex space-x-2 items-center">
<span class="w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>
</span>
<span>
24/7 customer service
</span>
</div>
<div class="flex space-x-2 items-center">
<span class="w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</span>
<span>
Talk to real experts
</span>
</div>
</div>
</div>
</div>
Hero's 09
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4 lg:py-5">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#" class="block flex-shrink-0">
<img class="h-9" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<div class="flex justify-between space-x-4 md:space-x-10 flex-shrink-1 md:flex-grow-0">
<nav class="hidden md:flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-8 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<button class="w-9 bg-gray-600 p-2 rounded-md text-gray-200 block md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div class="max-w-screen-xl mx-auto grid grid-cols-2 gap-8 lg:gap-24 md:items-center py-12 lg:py-20">
<div class="col-span-2 md:col-span-1">
<h2 class="text-2xl sm:text-3xl lg:text-4xl text-gray-700 font-medium mb-6">Boxify helps you get better with minimal effor.</h2>
<p class="text-xl text-gray-600 mb-6">When, while the lovely valley teems with vapour around me, and the meridian sun strikes the waiting be females upper surface of the impenetrable foliage of my trees</p>
<p class="text-xl text-gray-600 mb-6">Be females upper surface of the impenetrable my trees.</p>
<div class="grid grid-cols-2 sm:grid-cols-3 space-y-5 sm:space-y-3 col-gap-6 md:mt-8">
<img class="h-12 p-1 self-end justify-self-center opacity-90" src="http://demo-assets.uibak.com/themesdev/pathway-logo.svg"alt="logo placeholder">
<img class="h-10 p-1 self-end justify-self-center opacity-90" src="http://demo-assets.uibak.com/themesdev/edge-logo.svg"alt="logo placeholder">
<img class="hidden md:inline-flex h-10 p-1 self-end justify-self-center opacity-90" src="http://demo-assets.uibak.com/themesdev/sbalbew-logo.svg"alt="logo placeholder">
</div>
</div>
<div class="col-span-2 md:col-span-1 flex flex-row space-x-2 items-center justify-center">
<div class="bg-gray-200 p-4 lg:p-12 lg:rounded-lg flex-1">
<span class="text-xl xl:text-3xl font-semibold text-gray-700 block">Join our program today</span>
<p class="mt-3">Doing business like this takes much more effort than doing your own business at home.</p>
<form class="grid grid-cols-2 gap-4 mt-6 lg:mt-8">
<input type="text" placeholder="Name" class="bg-white border border-gray-300 px-4 py-2 rounded-lg h-14 col-span-1 w-full">
<input type="Email" placeholder="Email address" class="bg-white border border-gray-300 px-4 py-2 rounded-lg h-14 col-span-1 w-full">
<button class="inline-block bg-gray-600 font-semibold rounded-lg h-14 py-4 px-5 lg:px-8 text-white col-span-2">Sign up for free</button>
</form>
<div class="flex flex-col md:flex-row py-4 lg:pt-8 space-x-6">
<div class="flex space-x-2 items-center">
<span class="w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</span>
<span>
No credit card required
</span>
</div>
<div class="hidden lg:flex space-x-2 items-center">
<span class="w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</span>
<span>
Cancel anytime
</span>
</div>
</div>
</div>
</div>
</div>
</div>
Hero's 10
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4 lg:py-5">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#" class="block flex-shrink-0">
<img class="h-9" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<div class="flex justify-between space-x-4 md:space-x-10 flex-shrink-1 md:flex-grow-0">
<nav class="hidden md:flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-8 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<button class="w-9 bg-gray-600 p-2 rounded-md text-gray-200 block md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div class="max-w-screen-xl mx-auto text-center mt-8 lg:mt-20 xl:mt-32 mb-8 lg:mb-20 xl:mb-32">
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-gray-700 font-medium">The best online hosting for your podcast</h2>
<p class="text-xl text-gray-600 mt-4 max-w-3xl mx-auto">World among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-x-8 mt-12">
<div class="bg-gray-200 px-6 pt-20 pb-12 rounded">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-12 mx-auto mb-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
</svg>
<h3 class="font-semibold text-lg mb-2">Managed Database</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself.</p>
<a href="#" class="font-semibold inline-block mt-4">Learn More</a>
</div>
<div class="bg-gray-200 px-6 pt-20 pb-12 rounded">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-12 mx-auto mb-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<h3 class="font-semibold text-lg mb-2">Video hosting</h3>
<p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
<a href="#" class="font-semibold inline-block mt-4">Learn More</a>
</div>
<div class="bg-gray-200 px-6 pt-20 pb-12 rounded">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-12 mx-auto mb-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
<h3 class="font-semibold text-lg mb-2">24/7 support</h3>
<p>You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance.</p>
<a href="#" class="font-semibold inline-block mt-4">Learn More</a>
</div>
<div class="bg-gray-200 px-6 pt-20 pb-12 rounded">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-12 mx-auto mb-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4" />
</svg>
<h3 class="font-semibold text-lg mb-2">Best security</h3>
<p>One morning, when Gregor Samsa woke from himself It showed transformed.</p>
<a href="#" class="font-semibold inline-block mt-4">Learn More</a>
</div>
</div>
</div>
</div>
Hero's 11
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4 lg:py-5">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#" class="block flex-shrink-0">
<img class="h-9" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<div class="flex justify-between space-x-4 md:space-x-10 flex-shrink-1 md:flex-grow-0">
<nav class="hidden md:flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-8 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<button class="w-9 bg-gray-600 p-2 rounded-md text-gray-200 block md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div class="max-w-screen-xl mx-auto text-center mt-8 lg:mt-20 xl:mt-32 mb-8 lg:mb-20 xl:mb-32">
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-gray-700 font-medium">The bedding was hardly able to cover</h2>
<p class="text-xl text-gray-600 mt-4 max-w-3xl mx-auto">World among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath</p>
<a href="#" class="flex items-center space-x-4 justify-center mt-6 lg:mt-12">
<span class="inline-block bg-gray-600 font-semibold rounded-full w-12 h-12 p-2 text-white">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
</svg>
</span>
<span class="font-semibold">View Video</span>
</a>
</div>
</div>
Hero's 12
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4 lg:py-5">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#" class="block flex-shrink-0">
<img class="h-9" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<div class="flex justify-between space-x-4 md:space-x-10 flex-shrink-1 md:flex-grow-0">
<nav class="hidden md:flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-8 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<button class="w-9 bg-gray-600 p-2 rounded-md text-gray-200 block md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div class="max-w-screen-xl mx-auto grid grid-cols-2 gap-8 lg:gap-24 md:items-center py-12 lg:py-20">
<div class="col-span-2 md:col-span-1 order-2 md:order-1">
<h2 class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl text-gray-700 font-medium mb-6">Boxify helps you get better with minimal effor.</h2>
<p class="text-xl text-gray-600 mb-6">When, while the lovely valley teems with vapour around me, and the meridian sun strikes the waiting be females upper surface of the impenetrable foliage of my trees</p>
<form class="flex flex-row space-x-2 mt-6 lg:mt-8 max-w-lg">
<input type="text" placeholder="enter email address" class="bg-white border border-gray-300 px-4 py-2 flex-1 rounded-lg">
<button class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white">Start now</button>
</form>
<div class="flex flex-col md:flex-row py-4 lg:py-8 space-x-6">
<div class="hidden lg:flex space-x-2 items-center">
<span class="w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</span>
<span>
No Credit Card
</span>
</div>
<div class="hidden lg:flex space-x-2 items-center">
<span class="w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</span>
<span>
Cancel anytime
</span>
</div>
</div>
</div>
<div class="col-span-2 md:col-span-1 flex flex-row space-x-2 order-1 md:order-2 items-center justify-center">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="" class="max-w-md w-full">
</div>
</div>
</div>
Hero's 13
=
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-6 pb-20">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#" class="block flex-shrink-0">
<img class="h-9" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<div class="flex justify-between space-x-4 md:space-x-10 flex-shrink-1 md:flex-grow-0">
<nav class="hidden md:flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-8 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<button class="w-9 bg-gray-600 p-2 rounded-md text-gray-200 block md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div class="grid grid-cols-2 gap-8 max-w-screen-xl mx-auto mt-12 ">
<div class="col-span-2 md:col-span-1 md:pt-8">
<h2 class="text-2xl sm:text-3xl md:text-4xl xl:text-5xl text-gray-700 font-medium mb-4 lg:mb-6">This is a great article title about, this 2021 must read</h2>
<p class="text-lg">One morning, when Gregor Samsa woke from troubled dreams, he found himseld in his bed into a horrible vermin. He lay on his armour-like back.</p>
<p class="mt-4 text-lg">The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</p>
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6">Order now</a>
</div>
<div class="col-span-2 md:col-span-1 space-y-2 md:flex md:flex-col">
<a href="#" class="block md:flex md:flex-row items-center md:space-x-6 bg-gray-200 p-4 lg:p-8 rounded-lg">
<span class="w-10 h-10 text-gray-600 hidden md:block">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</span>
<div class="md:self-center md:flex-1">
<span class="text-xl font-semibold text-gray-700 block">Doing your own business</span>
<p class="mt-2 text-lg">Doing business like this takes much more effort</p>
</div>
<span class="w-6 hidden md:inline-block">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</span>
</a>
<a href="#" class="block md:flex md:flex-row items-center md:space-x-6 bg-gray-200 p-4 lg:p-8 rounded-lg">
<span class="w-10 h-10 text-gray-600 hidden md:block">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
</svg>
</span>
<div class="md:self-center md:flex-1">
<span class="text-xl font-semibold text-gray-700 block">Shut his eyes so</span>
<p class="mt-2 text-lg">He must have tried it a hundred times, shut his e</p>
</div>
<span class="w-6 hidden md:inline-block">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</span>
</a>
<a href="#" class="block md:flex md:flex-row items-center md:space-x-6 bg-gray-200 p-4 lg:p-8 rounded-lg">
<span class="w-10 h-10 text-gray-600 hidden md:block">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</span>
<div class="md:self-center md:flex-1">
<span class="text-xl font-semibold text-gray-700 block">Other travelling salesmen</span>
<p class="mt-2 text-lg">You've got to get enough sleep. Other travelling salesmen</p>
</div>
<span class="w-6 hidden md:inline-block">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</span>
</a>
</div>
</div>
</div>
Hero's 14
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4 lg:py-5">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#" class="block flex-shrink-0">
<img class="h-9" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<div class="flex justify-between space-x-4 md:space-x-10 flex-shrink-1 md:flex-grow-0">
<nav class="hidden md:flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-8 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<button class="w-9 bg-gray-600 p-2 rounded-md text-gray-200 block md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div class="max-w-screen-xl mx-auto grid grid-cols-2 gap-8 lg:gap-24 md:items-center py-12 lg:py-20">
<div class="col-span-2 md:col-span-1 order-2 ">
<h2 class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl text-gray-700 font-medium mb-6">Boxify helps you get better with minimal effor.</h2>
<p class="text-xl text-gray-600 mb-6">When, while the lovely valley teems with vapour around me, and the meridian sun strikes the waiting be females upper surface of the impenetrable foliage of my trees</p>
<form class="flex flex-row space-x-2 mt-6 lg:mt-8 max-w-lg">
<input type="text" placeholder="enter email address" class="bg-white border border-gray-300 px-4 py-2 flex-1 rounded-lg">
<button class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white">Start now</button>
</form>
<div class="flex flex-col md:flex-row py-4 lg:py-8 space-x-6">
<div class="hidden lg:flex space-x-2 items-center">
<span class="w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</span>
<span>
No Credit Card
</span>
</div>
<div class="hidden lg:flex space-x-2 items-center">
<span class="w-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</span>
<span>
Cancel anytime
</span>
</div>
</div>
</div>
<div class="col-span-2 md:col-span-1 flex flex-row space-x-2 order-1 items-center justify-center">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="" class="max-w-md">
</div>
</div>
</div>
Hero's 15
=
<div class="bg-gray-100 text-gray-600">
<div class="px-6 lg:px-8 py-4 lg:py-5">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#" class="block flex-shrink-0">
<img class="h-9" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<div class="flex justify-between space-x-4 md:space-x-10 flex-shrink-1 md:flex-grow-0 ">
<nav class="hidden md:flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-8 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto md:relative bg-gray-200 md:bg-transparent">
<a href="#" class="hover:opacity-70">Home</a>
<a href="#" class="hover:opacity-70">Services</a>
<a href="#" class="hover:opacity-70">Pricing</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
<button class="w-9 bg-gray-600 p-2 rounded-md text-gray-200 block md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
<div class="bg-gray-200 px-6 lg:px-8">
<div class="max-w-screen-xl mx-auto grid grid-cols-2 ">
<div class="col-span-2 md:col-span-1 py-12 lg:py-20 relative z-20">
<h2 class="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl text-gray-700 font-medium mb-6">Boxify helps you get better with minimal effor.</h2>
<p class="text-xl text-gray-600">When, while the lovely valley teems with vapour around me, and the meridian sun strikes the waiting be females upper surface of the impenetrable foliage of my trees</p>
</div>
<div class="col-span-2 md:col-span-1 relative">
<svg class="text-gray-200 hidden md:block absolute left-0 inset-y-0 h-full w-48 transform -translate-x-1/2" fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="50,0 100,0 50,100 0,100"></polygon>
</svg>
<img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal.svg"alt="" class="min-h-full object-cover">
</div>
</div>
</div>
</div>
总共 15 条记录