Examples
Examples 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>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-xl mx-auto">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium text-center">Amazing Features</h2>
<p class="text-xl lg:text-2xl text-gray-600 mt-2 text-center">We are mmitted to a unique, cutting-edge approach to that</p>
</div>
<div class="md:grid md:grid-cols-2 md:gap-12 max-w-screen-xl mx-auto mt-12 lg:mt-20 space-y-12 md:space-y-0">
<div class="text-left flex space-x-6">
<div class="bg-gray-200 rounded-full w-16 h-16 flex items-center justify-center ">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-8">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
</svg>
</div>
<div class="flex-1">
<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>
<div class="text-left flex space-x-6">
<div class="bg-gray-200 rounded-full w-16 h-16 flex items-center justify-center ">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-8">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<div class="flex-1">
<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>
<div class="text-left flex space-x-6">
<div class="bg-gray-200 rounded-full w-16 h-16 flex items-center justify-center ">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-8">
<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>
</div>
<div class="flex-1">
<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 class="text-left flex space-x-6">
<div class="bg-gray-200 rounded-full w-16 h-16 flex items-center justify-center ">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-8">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold text-lg mb-2">But who knows, maybe that would do it</h3>
<p>You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance, whenever I go back to the guest.</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12">
<div class="max-w-screen-xl mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-x-8">
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded">
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found It showed transformed.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded">
<h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
<p>Doing business like this takes much more effort than doing your own business at home, on top.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded">
<h3 class="font-semibold text-lg mb-2">But who knows, would do it</h3>
<p>You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance.</p>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-xl mx-auto grid grid-cols-2 gap-8 lg:gap-24 md:items-center">
<div class="col-span-2 md:col-span-1 order-2 md:order-1">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">Join our newsletter</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 trees</p>
<form class="flex flex-row space-x-2 mt-6">
<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">Subscribe</button>
</form>
</div>
<div class="col-span-2 md:col-span-1 flex flex-row space-x-2 order-1 md:order-2">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal.svg"alt="">
</div>
</div>
</div>
<footer class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12">
<div class="max-w-screen-xl mx-auto mb-12 lg:mb-16 ">
<img class="h-8" src="http://demo-assets.uibak.com/themesdev/uptimemate-logo-dark.svg"alt="UptimeMate logo">
</div>
<div class="max-w-screen-xl mx-auto grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-x-8">
<div>
<h5 class="text-xl font-semibold text-gray-700">Product</h5>
<nav class="mt-4">
<ul class="space-y-2">
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Landingpages</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Features</a>
</li>
</ul>
</nav>
</div>
<div>
<h5 class="text-xl font-semibold text-gray-700">Industries</h5>
<nav class="mt-4">
<ul class="space-y-2">
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Employment</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Childcare</a>
</li>
</ul>
</nav>
</div>
<div>
<h5 class="text-xl font-semibold text-gray-700">About us</h5>
<nav class="mt-4">
<ul class="space-y-2">
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Company</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Download brochure</a>
</li>
</ul>
</nav>
</div>
<div>
<h5 class="text-xl font-semibold text-gray-700">Legal</h5>
<nav class="mt-4">
<ul class="space-y-2">
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Terms and conditions</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Security</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="max-w-screen-xl mx-auto flex flex-col md:flex-row justify-between items-center space-y-4 mt-16 lg:mt-20 border-t-2 border-gray-200 pt-8 ">
<div class="text-sm space-y-4 md:space-y-1 text-center md:text-left">
<p>©2021 Company. All rights reserved. | All rights reserved</p>
<p>Wisdom is easily acquired when hiding under the bed with a saucepan on your head.</p>
</div>
<div class="flex items-baseline space-x-2">
<span>Language: </span>
<nav class="text-sm">
<a href="#" class="hover:text-gray-400">EN</a>
<a href="#" class="hover:text-gray-400">DE</a>
<a href="#" class="hover:text-gray-400">NL</a>
</nav>
</div>
</div>
<div class="max-w-screen-xl mx-auto flex flex-col md:flex-row justify-between items-center space-y-4 mt-8 lg:mt-12">
<nav class="flex flex-wrap justify-center space-x-6">
<a href="#" class="font-normal text-sm hover:text-gray-400 mb-2">Privacy</a>
<a href="#" class="font-normal text-sm hover:text-gray-400 mb-2">Content Terms Notice</a>
<a href="#" class="font-normal text-sm hover:text-gray-400 mb-2">Legal</a>
<a href="#" class="font-normal text-sm hover:text-gray-400 mb-2">Features</a>
<a href="#" class="font-normal text-sm hover:text-gray-400 mb-2">Landing Pages</a>
</nav>
<nav class="flex items-center space-x-2">
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Facebook</span>
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Instagram</span>
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Twitter</span>
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
</nav>
</div>
</footer>
Examples 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>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
<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 mb-8 lg:mb-10">
<img class="h-12 p-1 self-end justify-self-center" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
<img class="h-10 p-1 self-end justify-self-center" src="http://demo-assets.uibak.com/themesdev/edge-logo.svg"alt="logo placeholder">
<img class="h-10 p-1 self-end justify-self-center" src="http://demo-assets.uibak.com/themesdev/sbalbew-logo.svg"alt="logo placeholder">
<img class="h-10 p-1 self-end justify-self-center" src="http://demo-assets.uibak.com/themesdev/drops-logo.svg"alt="logo placeholder">
<img class="h-12 p-1 self-end justify-self-center" src="http://demo-assets.uibak.com/themesdev/pathway-logo.svg"alt="logo placeholder">
<img class="h-12 p-1 self-end justify-self-center" src="http://demo-assets.uibak.com/themesdev/feedback-logo.svg"alt="logo placeholder">
</div>
<div class="max-w-screen-lg mx-auto mt-8 lg:mt-12 text-center">
<p class="text-lg lg:text-xl text-gray-600">
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary
</p>
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6 lg:mt-10">Order our product now</a>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-lg mx-auto space-y-20 md:space-y-16 ">
<div class="flex flex-col md:flex-row items-center md:space-x-10 space-y-6 md:space-y-0">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="User placeholder" class="rounded-lg w-48 md:order-1">
<div class="flex-1 md:order-2">
<h3 class="font-semibold text-lg lg:text-xl mb-2">He felt a slight itch up on his bell</h3>
<div class="text-lg lg:text-xl">
<p>Quick brown dogs jump over the lazy fox. The jay, pig, fox,
zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed.</p>
<a href="#" class="mt-5 inline-block">Read more »</a>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row items-center space-y-6 md:space-x-10 md:space-x-reverse md:space-y-0">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="User placeholder" class="rounded-lg w-48 md:order-2">
<div class="flex-1 md:order-1">
<h3 class="font-semibold text-lg lg:text-xl mb-2">He felt a slight itch up on his bell</h3>
<div class="text-lg lg:text-xl">
<p>Quick brown dogs jump over the lazy fox. The jay, pig, fox,
zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed.</p>
<a href="#" class="mt-5 inline-block">Read more »</a>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row items-center md:space-x-10 space-y-6 md:space-y-0">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="User placeholder" class="rounded-lg w-48 md:order-1">
<div class="flex-1 md:order-2">
<h3 class="font-semibold text-lg lg:text-xl mb-2">He felt a slight itch up on his bell</h3>
<div class="text-lg lg:text-xl">
<p>Quick brown dogs jump over the lazy fox. The jay, pig, fox,
zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed.</p>
<a href="#" class="mt-5 inline-block">Read more »</a>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-100 px-6 lg:px-8 py-12">
<div class="max-w-screen-xl mx-auto grid grid-cols-1 gap-6 lg:gap-x-8">
<div class="bg-gray-600 px-6 lg:px-12 pt-20 lg:pt-32 xl:pt-48 pb-8 lg:pb-12 rounded">
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found It showed transformed.</p>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-xl mx-auto text-center">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">Free demo for WindyBlocks</h2>
<form class="grid grid-cols-2 md:grid-cols-4 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">
<input type="Email" placeholder="Email address" class="bg-white border border-gray-300 px-4 py-2 flex-1 rounded-lg h-14">
<input type="password" placeholder="password" class="bg-white border border-gray-300 px-4 py-2 flex-1 rounded-lg h-14 col-span-2 md: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-2 md:col-span-1">Sign up for free</button>
</form>
<p class="text-lg text-gray-600 mt-4 lg:mt-8 max-w-3xl mx-auto">World among the stalks, and grow familiar with the countless the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath</p>
</div>
</div>
<footer class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12">
<div class="max-w-screen-xl mx-auto grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-x-8">
<div>
<img class="h-8" src="http://demo-assets.uibak.com/themesdev/uptimemate-logo-dark.svg"alt="UptimeMate logo">
<p class="mt-4">Let our designs work for you. And save valuable time during your next business adventure.</p>
</div>
<div>
<h5 class="text-xl font-semibold text-gray-700">Legal</h5>
<nav class="mt-4">
<ul class="space-y-2">
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">General Terms & Conditions</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Data Processing Agreement</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Privacy Statement</a>
</li>
</ul>
</nav>
</div>
<div>
<h5 class="text-xl font-semibold text-gray-700">Contact</h5>
<div class="space-y-4 md:space-y-6 mt-4">
<div class="flex items-start space-x-4">
<div>
<svg class="w-6 h-6 mt-1 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
</div>
<div class="flex-1">
<address class="not-italic">
Rorikstraat 159<br>
Wijk bij Duurstede<br>
The Netherlands
</address>
</div>
</div>
<div class="flex items-start space-x-4">
<div>
<svg class="w-6 h-6 mt-1 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
</div>
<div class="flex-1">
<a href="#" class="hover:text-gray-400">support@company.com</a>
</div>
</div>
</div>
</div>
<div>
<h5 class="text-xl font-semibold text-gray-700">Latest news</h5>
<div class="space-y-8 mt-4">
<a href="#" class="flex items-start space-x-4">
<img class="h-12 mt-1 rounded-lg overflow-hidden" src="http://demo-assets.uibak.com/themesdev/placeholder-gray.svg"alt="Gray image placeholder">
<div class="flex-1">
<p>Lorem ipsum dolor sit amet, consec tetur ad ipiscing elit. Nam non dictum magna.</p>
<strong class="font-semibold block mt-2 text-sm text-gray-500">2019-10-21</strong>
</div>
</a>
<a href="#" class="flex items-start space-x-4">
<img class="h-12 mt-1 rounded-lg overflow-hidden" src="http://demo-assets.uibak.com/themesdev/placeholder-gray.svg"alt="Gray image placeholder">
<div class="flex-1">
<p>Lorem ipsum dolor sit amet, consec tetur ad ipiscing elit. Nam non dictum magna.</p>
<strong class="font-semibold block mt-2 text-sm text-gray-500">2019-10-21</strong>
</div>
</a>
</div>
</div>
</div>
<div class="max-w-screen-xl mx-auto flex flex-col items-center mt-16">
<div class="flex items-center space-x-2">
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Facebook</span>
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Instagram</span>
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Twitter</span>
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
</div>
<div class="text-sm mt-4">
©2021 Company. All rights reserved.
</div>
</div>
</footer>
Examples 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>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
<div class="max-w-screen-lg mx-auto flex flex-col md:flex-row items-start space-y-6 md:space-y-0 md:space-x-6 lg:space-x-10">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="User placeholder" class="rounded-full w-32 relative -top-2">
<div>
<p class="text-lg lg:text-xl font-sem italic">"Quick brown dogs jump over the lazy fox. The jay, pig, fox,
zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed by MTV for
luck. A wizard’s job is to vex chumps quickly in fog. Watch "Jeopardy! ", Alex Trebek's fun TV quiz game.
Woven silk pyjamas exchanged for blue quartz. Brawny gods just"</p>
<div class="space-y-1 mt-4 lg:mt-6">
<span class="text-lg font-semibold text-gray-700 block">Alan Gregory</span>
<span class="text-base font-semibold text-gray-500 block">CEO - Facebook</span>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-xl mx-auto grid grid-cols-2 gap-8 lg:gap-24 md:items-center">
<div class="col-span-2 md:col-span-1 flex flex-row space-x-2">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="">
</div>
<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">So if on advanced addition absolute received replying</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">End why melancholy estimating her had indulgence bachelor domestic extended middletons. Say ferrars demands besides her address. Blind going you merit few fancy their.</p>
<p class="text-xl text-gray-600">On could my in order never it. Or excited certain sixteen it to parties colonel. Law gate lif On nature or no.</p>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-xl mx-auto grid grid-cols-2 gap-8 lg:gap-24 md:items-center">
<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">So if on advanced addition absolute received replying</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">End why melancholy estimating her had indulgence bachelor domestic extended middletons. Say ferrars demands besides her address. Blind going you merit few fancy their.</p>
<p class="text-xl text-gray-600">On could my in order never it. Or excited certain sixteen it to parties colonel. Law gate lif On nature or no.</p>
</div>
<div class="col-span-2 md:col-span-1 flex flex-row space-x-2 order-1 md:order-2">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="">
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
<div class="max-w-screen-lg mx-auto">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium text-center">What our customers say</h2>
<p class="text-xl lg:text-2xl text-gray-600 text-center mt-2">The quick, brown fox jumps over a lazy dog.</p>
<div class="grid md:grid-cols-2 gap-12 lg:gap-x-8 xl:gap-x-16 mt-6 lg:mt-8 xl:mt-12">
<div>
<div class="bg-gray-200 flex items-start space-x-4 p-8">
<svg viewBox="0 0 37 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-12">
<path d="M28.3438 23.0625C27.1562 23.0625 26.0729 22.8854 25.0938 22.5312C24.1146 22.1562 23.2812 21.6458 22.5938 21C21.9062 20.3333 21.3646 19.5312 20.9688 18.5938C20.5938 17.6562 20.4062 16.6146 20.4062 15.4688C20.4062 14.2812 20.6146 13.0417 21.0312 11.75C21.4688 10.4583 22.0938 9.15625 22.9062 7.84375C23.7188 6.53125 24.6979 5.23958 25.8438 3.96875C27.0104 2.67708 28.3333 1.4375 29.8125 0.25L33.4062 3.0625C32.7188 3.77083 32.0938 4.44792 31.5312 5.09375C30.9896 5.73958 30.4896 6.38542 30.0312 7.03125C29.5729 7.67708 29.1458 8.34375 28.75 9.03125C28.375 9.71875 28.0312 10.4479 27.7188 11.2188L36.2188 15.4688C36.2188 16.5938 36 17.625 35.5625 18.5625C35.1458 19.5 34.5833 20.3021 33.875 20.9688C33.1667 21.6354 32.3333 22.1562 31.375 22.5312C30.4167 22.8854 29.4062 23.0625 28.3438 23.0625ZM7.9375 23.0625C6.75 23.0625 5.66667 22.8854 4.6875 22.5312C3.70833 22.1562 2.875 21.6458 2.1875 21C1.5 20.3333 0.958333 19.5312 0.5625 18.5938C0.1875 17.6562 0 16.6146 0 15.4688C0 14.2812 0.208333 13.0417 0.625 11.75C1.0625 10.4583 1.6875 9.15625 2.5 7.84375C3.3125 6.53125 4.29167 5.23958 5.4375 3.96875C6.60417 2.67708 7.92708 1.4375 9.40625 0.25L13 3.0625C12.3125 3.77083 11.6875 4.44792 11.125 5.09375C10.5833 5.73958 10.0833 6.38542 9.625 7.03125C9.16667 7.67708 8.73958 8.34375 8.34375 9.03125C7.96875 9.71875 7.625 10.4479 7.3125 11.2188L15.8125 15.4688C15.8125 16.5938 15.5938 17.625 15.1562 18.5625C14.7396 19.5 14.1771 20.3021 13.4688 20.9688C12.7604 21.6354 11.9271 22.1562 10.9688 22.5312C10.0104 22.8854 9 23.0625 7.9375 23.0625Z" fill="#4A5568"/>
</svg>
<p class="text-lg italic flex-1">"One morning, when Gregor Samsa woke from tr, he found himself It showed transformed in his bed
into a horrible vermin. Bad, for quick jigs vex! Fox nymphs."</p>
</div>
<div class="flex flex-row items-center space-x-4 mt-6 lg:mt-8 ">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="User placeholder" class="rounded-full w-16">
<div class="space-y-1">
<span class="text-lg font-semibold text-gray-700 block">Alan Gregory</span>
<span class="text-base font-semibold text-gray-500 block">CEO - Facebook</span>
</div>
</div>
</div>
<div>
<div class="bg-gray-200 flex items-start space-x-4 p-8">
<svg viewBox="0 0 37 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-12">
<path d="M28.3438 23.0625C27.1562 23.0625 26.0729 22.8854 25.0938 22.5312C24.1146 22.1562 23.2812 21.6458 22.5938 21C21.9062 20.3333 21.3646 19.5312 20.9688 18.5938C20.5938 17.6562 20.4062 16.6146 20.4062 15.4688C20.4062 14.2812 20.6146 13.0417 21.0312 11.75C21.4688 10.4583 22.0938 9.15625 22.9062 7.84375C23.7188 6.53125 24.6979 5.23958 25.8438 3.96875C27.0104 2.67708 28.3333 1.4375 29.8125 0.25L33.4062 3.0625C32.7188 3.77083 32.0938 4.44792 31.5312 5.09375C30.9896 5.73958 30.4896 6.38542 30.0312 7.03125C29.5729 7.67708 29.1458 8.34375 28.75 9.03125C28.375 9.71875 28.0312 10.4479 27.7188 11.2188L36.2188 15.4688C36.2188 16.5938 36 17.625 35.5625 18.5625C35.1458 19.5 34.5833 20.3021 33.875 20.9688C33.1667 21.6354 32.3333 22.1562 31.375 22.5312C30.4167 22.8854 29.4062 23.0625 28.3438 23.0625ZM7.9375 23.0625C6.75 23.0625 5.66667 22.8854 4.6875 22.5312C3.70833 22.1562 2.875 21.6458 2.1875 21C1.5 20.3333 0.958333 19.5312 0.5625 18.5938C0.1875 17.6562 0 16.6146 0 15.4688C0 14.2812 0.208333 13.0417 0.625 11.75C1.0625 10.4583 1.6875 9.15625 2.5 7.84375C3.3125 6.53125 4.29167 5.23958 5.4375 3.96875C6.60417 2.67708 7.92708 1.4375 9.40625 0.25L13 3.0625C12.3125 3.77083 11.6875 4.44792 11.125 5.09375C10.5833 5.73958 10.0833 6.38542 9.625 7.03125C9.16667 7.67708 8.73958 8.34375 8.34375 9.03125C7.96875 9.71875 7.625 10.4479 7.3125 11.2188L15.8125 15.4688C15.8125 16.5938 15.5938 17.625 15.1562 18.5625C14.7396 19.5 14.1771 20.3021 13.4688 20.9688C12.7604 21.6354 11.9271 22.1562 10.9688 22.5312C10.0104 22.8854 9 23.0625 7.9375 23.0625Z" fill="#4A5568"/>
</svg>
<p class="text-lg italic flex-1">"Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! "Now fax quiz Jack! " my brave ghost pled. Five quacking zephyrs jolt my wax bed."</p>
</div>
<div class="flex flex-row items-center space-x-4 mt-6 lg:mt-8 ">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="User placeholder" class="rounded-full w-16">
<div class="space-y-1">
<span class="text-lg font-semibold text-gray-700 block">Tanya Gilbert</span>
<span class="text-base font-semibold text-gray-500 block">CEO - Google</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-xl mx-auto text-center">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">Always stay up to date</h2>
<form class="flex flex-row space-x-2 mt-6 lg:mt-8 max-w-lg mx-auto">
<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">Subscribe</button>
</form>
<p class="text-lg text-gray-600 mt-4 lg:mt-8 max-w-3xl mx-auto">World among the stalks, and grow familiar with the countless the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath</p>
</div>
</div>
<footer class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12">
<div class="max-w-screen-xl mx-auto mb-12 lg:mb-16 ">
<img class="h-8" src="http://demo-assets.uibak.com/themesdev/uptimemate-logo-dark.svg"alt="UptimeMate logo">
</div>
<div class="max-w-screen-xl mx-auto ">
<div class="grid grid-cols-8 md:grid-cols-9 lg:grid-cols-8 divide-gray-200 divide-y-2 md:divide-x-2 md:divide-y-0 md:-mx-8">
<div class="col-span-8 md:col-span-3 lg:col-span-2 md:px-8 py-4 md:py-0">
<h5 class="text-xl font-semibold text-gray-700">Company</h5>
<nav class="mt-4">
<ul class="space-y-2">
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Landingpages</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Features</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Download brochure</a>
</li>
</ul>
</nav>
</div>
<div class="col-span-8 md:col-span-3 lg:col-span-3 md:px-8 py-4 md:py-0">
<h5 class="text-xl font-semibold text-gray-700">Industries</h5>
<nav class="mt-4">
<ul class="grid lg:grid-cols-2">
<li class="mb-2">
<a href="#" class="font-normal text-base hover:text-gray-400">Employment</a>
</li>
<li class="mb-2">
<a href="#" class="font-normal text-base hover:text-gray-400">Company</a>
</li>
<li class="mb-2">
<a href="#" class="font-normal text-base hover:text-gray-400">Childcare</a>
</li>
<li class="mb-2">
<a href="#" class="font-normal text-base hover:text-gray-400">Download brochure</a>
</li>
</ul>
</nav>
</div>
<div class="col-span-8 md:col-span-3 lg:col-span-3 md:px-8 py-4 md:py-0">
<h5 class="text-xl font-semibold text-gray-700">Follow us</h5>
<nav class="mt-4">
<ul class="grid lg:grid-cols-2">
<li class="mb-2">
<a href="#" class="flex space-x-2 font-normal text-base hover:text-gray-400">
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
<span>
Twitter
</span>
</a>
</li>
<li class="mb-2">
<a href="#" class="flex space-x-2 font-normal text-base hover:text-gray-400">
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
<span>
Instagram
</span>
</a>
</li>
<li class="mb-2">
<a href="#" class="flex space-x-2 font-normal text-base hover:text-gray-400">
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
<span>
Facebook
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="max-w-screen-xl mx-auto flex flex-col md:flex-row justify-between items-center space-y-4 mt-8 lg:mt-12 border-t-2 border-gray-200 pt-8">
<nav class="flex flex-wrap justify-center space-x-6">
<a href="#" class="font-normal text-sm hover:text-gray-400 mb-2">Cookie settings</a>
</nav>
<p class="text-sm text-center md:text-right">©2021 Company. All rights reserved. | All rights reserved</p>
</div>
</footer>
Examples 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">
<div class="flex justify-between md:space-x-4 lg:space-x-12">
<a href="#">
<img class="h-8" src="http://demo-assets.uibak.com/themesdev/feedback-logo.svg"alt="logo placeholder">
</a>
<nav class="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-6 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>
</div>
<button class="w-9 p-2">
<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
<div class="max-w-screen-xl mx-auto">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium text-center">Simple pricing plans</h2>
<p class="text-xl lg:text-2xl text-gray-600 text-center mt-2 max-w-2xl mx-auto">We are mmitted to a unique, cutting-edge approach to that</p>
</div>
<div class="max-w-screen-lg mx-auto mt-12 grid grid-cols-3 md:divide-x-2 md:divide-gray-300 border border-gray-300">
<div class="bg-gray-200 p-6 lg:p-8 items-center gap-4 col-span-3 md:col-span-1 text-center">
<h3 class="text-xl lg:text-2xl font-semibold text-gray-700 mb-2">Freelance plan</h3>
<span class="block mb-4">For single entrepreneurs</span>
<span class="text-3xl lg:text-4xl font-bold">€19 p/m</span>
<p class="mt-5">The European languages are members of the same family. Their separate existence is a myth.</p>
<div class="-mx-6 lg:-mx-8 mt-6 pt-6 border-t border-gray-300 px-6 lg:px-8">
<ul class="space-y-2">
<li class="flex justify-between space-x-4">
<span>Storage</span>
<span>300GB</span>
</li>
<li class="flex justify-between space-x-4">
<span>Bandwidth</span>
<span>2000GB</span>
</li>
<li class="flex justify-between space-x-4">
<span>Mailboxes</span>
<span>10</span>
</li>
<li class="flex justify-between space-x-4">
<span>Support</span>
<span>Mail</span>
</li>
</ul>
<button class="block w-full bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6">Order now</button>
</div>
</div>
<div class="bg-gray-200 p-6 lg:p-8 items-center gap-4 col-span-3 md:col-span-1 text-center">
<h3 class="text-xl lg:text-2xl font-semibold text-gray-700 mb-2">Team plan</h3>
<span class="block mb-4">For more entrepreneurs</span>
<span class="text-3xl lg:text-4xl font-bold">€49 p/m</span>
<p class="mt-5">The European languages are members of the same family. Their separate existence is a myth.</p>
<div class="-mx-6 lg:-mx-8 mt-6 pt-6 border-t border-gray-300 px-6 lg:px-8">
<ul class="space-y-2">
<li class="flex justify-between space-x-4">
<span>Storage</span>
<span>300GB</span>
</li>
<li class="flex justify-between space-x-4">
<span>Bandwidth</span>
<span>2000GB</span>
</li>
<li class="flex justify-between space-x-4">
<span>Mailboxes</span>
<span>10</span>
</li>
<li class="flex justify-between space-x-4">
<span>Support</span>
<span>Mail</span>
</li>
</ul>
<button class="block w-full bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6">Order now</button>
</div>
</div>
<div class="bg-gray-200 p-6 lg:p-8 items-center gap-4 col-span-3 md:col-span-1 text-center">
<h3 class="text-xl lg:text-2xl font-semibold text-gray-700 mb-2">Pro plan</h3>
<span class="block mb-4">For many entrepreneurs</span>
<span class="text-3xl lg:text-4xl font-bold">€89 p/m</span>
<p class="mt-5">The European languages are members of the same family. Their separate existence is a myth.</p>
<div class="-mx-6 lg:-mx-8 mt-6 pt-6 border-t border-gray-300 px-6 lg:px-8">
<ul class="space-y-2">
<li class="flex justify-between space-x-4">
<span>Storage</span>
<span>300GB</span>
</li>
<li class="flex justify-between space-x-4">
<span>Bandwidth</span>
<span>2000GB</span>
</li>
<li class="flex justify-between space-x-4">
<span>Mailboxes</span>
<span>10</span>
</li>
<li class="flex justify-between space-x-4">
<span>Support</span>
<span>Mail</span>
</li>
</ul>
<button class="block w-full bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6">Order now</button>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
<div class="max-w-screen-lg mx-auto">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium text-center">What our customers say</h2>
<p class="text-xl lg:text-2xl text-gray-600 text-center mt-2">The quick, brown fox jumps over a lazy dog.</p>
<div class="flex justify-between items-center space-x-6 mt-8 xl:mt-12">
<button class="bg-gray-200 w-8 md:w-12 h-8 md:h-12 rounded-full flex items-center justify-center -top-12 relative">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 md:w-7">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
<div class="max-w-screen-md mx-auto flex-1">
<div class="flex justify-center">
<svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
</path>
</svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
</path>
</svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
</path>
</svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
</path>
</svg><svg class="w-6 h-6 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
</path>
</svg>
</div>
<p class="text-lg lg:text-xl text-gray-600 text-center mt-6">
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary
</p>
<h5 class="text-lg text-gray-700 font-medium text-center mt-6">Dora Kelly</h5>
<p class="text-base text-gray-600 text-center">Marketing Manager, Sbalbew</p>
</div>
<button class="bg-gray-200 w-8 md:w-12 h-8 md:h-12 rounded-full flex items-center justify-center -top-12 relative">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 md:w-7">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12">
<div class="max-w-screen-xl mx-auto grid md:grid-cols-2 gap-6 lg:gap-x-8">
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded">
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found It showed transformed.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded">
<h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
<p>Doing business like this takes much more effort than doing your own business at home, on top.</p>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-xl mx-auto">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">Amazing Features</h2>
<p class="text-xl lg:text-2xl text-gray-600 mt-2">We are mmitted to a unique, cutting-edge approach to that</p>
</div>
<div class="md:grid md:grid-cols-2 md:gap-12 max-w-screen-xl mx-auto 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 class="text-left">
<h3 class="font-semibold text-lg mb-2">But who knows, maybe that would do it</h3>
<p>You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance, whenever I go back to the guest.</p>
</div>
</div>
</div>
<footer class="bg-gray-50 text-gray-600">
<div class="px-6 lg:px-8 transform translate-y-12">
<div class="bg-gray-100 max-w-screen-xl mx-auto rounded-lg py-12 shadow">
<div class="grid grid-cols-6 lg:divide-x-2 divide-gray-400 text-center">
<div class="px-4 lg:px-8 py-2 col-span-6 md:col-span-3 lg:col-span-2">
<h4 class="text-xl font-semibold text-gray-700">Contact our professionals</h4>
<div class="inline-flex space-x-2 text-2xl font-semibold tracking-tighter mt-6 ">
<svg class="w-6 h-6 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg>
<div>
+31 50 - 810 10 10
</div>
</div>
<div class="mt-4">
<span class="block font-semibold">Or send us an email:</span>
<a href="#" class="block hover:underline">info@themes.dev</a>
</div>
</div>
<div class="px-4 lg:px-8 py-2 col-span-6 md:col-span-3 lg:col-span-2 md:border-l-2 border-gray-400 lg:border-l-0 mt-6 md:mt-0">
<h4 class="text-xl font-semibold text-gray-700">Looking for something specific?</h4>
<a href="#" class="inline-flex bg-gray-600 hover:bg-gray-700 font-semibold rounded-full py-3 px-4 lg:px-6 text-white space-x-2 mt-6">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
<span>
Search in our website
</span>
</a>
</div>
<div class="px-4 lg:px-8 py-2 col-span-6 lg:col-span-2 mt-6 lg:mt-0">
<h4 class="text-xl font-semibold text-gray-700">Follow us on Social Media</h4>
<div class="flex items-center justify-center space-x-4 mt-6">
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Facebook</span>
<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
</svg>
</a>
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Instagram</span>
<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
</svg>
</a>
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Twitter</span>
<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
</svg>
</a>
</div>
</div>
</div>
<p class="text-center mt-6 lg:mt-10">Didn't find what you where looking for? <a href="" class="font-semibold hover:underline">Ask your question on the chat.</a></p>
</div>
</div>
<div class="bg-white px-6 lg:px-8 pt-20 lg:pt-24 pb-12">
<div class="max-w-screen-xl mx-auto grid md:grid-cols-2 lg:grid-cols-5 gap-6 lg:gap-x-8">
<div>
<h5 class="text-xl font-semibold text-gray-700">Product</h5>
<nav class="mt-4">
<ul class="space-y-2">
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Landingpages</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Features</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Documentation</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Careers</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Blocks</a>
</li>
</ul>
</nav>
</div>
<div>
<h5 class="text-xl font-semibold text-gray-700">Industries</h5>
<nav class="mt-4">
<ul class="space-y-2">
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Employment</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Childcare</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Education</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Accountancy</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Wholesale</a>
</li>
</ul>
</nav>
</div>
<div>
<h5 class="text-xl font-semibold text-gray-700">About us</h5>
<nav class="mt-4">
<ul class="space-y-2">
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Company</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Download brochure</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Media Kit</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Accountancy</a>
</li>
</ul>
</nav>
</div>
<div>
<h5 class="text-xl font-semibold text-gray-700">Legal</h5>
<nav class="mt-4">
<ul class="space-y-2">
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Terms and conditions</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Security</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Privacy and Cookie Statement</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Processor Agreement</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Sitemap</a>
</li>
</ul>
</nav>
</div>
<div>
<h5 class="text-xl font-semibold text-gray-700">Contact</h5>
<div class="space-y-4 md:space-y-6 mt-4">
<div class="flex items-start space-x-4">
<div>
<svg class="w-6 h-6 mt-1 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
</div>
<div class="flex-1">
<address class="not-italic">
Rorikstraat 159<br>
Wijk bij Duurstede<br>
The Netherlands
</address>
</div>
</div>
<div class="flex items-start space-x-4">
<div>
<svg class="w-6 h-6 mt-1 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
</div>
<div class="flex-1">
<a href="#" class="hover:text-gray-500">support@hello.com</a>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
Examples 05
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4">
<div class="max-w-screen-xl mx-auto flex justify-center items-center relative">
<nav class="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-6 xl:space-x-12 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="order-first md:order-none">
<img class="h-7 mb-6 md:mb-0" src="http://demo-assets.uibak.com/themesdev/edge-logo.svg"alt="logo placeholder">
</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">FAQ</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-6">
<div class="max-w-screen-lg mx-auto">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium text-center">Our portfolio with our work</h2>
<p class="text-xl lg:text-2xl text-gray-600 text-center mt-2">The quick, brown fox jumps over a lazy dog.</p>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12">
<div class="max-w-screen-xl mx-auto grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-x-8">
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-2">
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-2">
<h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
<p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1">
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1">
<h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
<p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1">
<h3 class="font-semibold text-lg mb-2">But who knows, would do it</h3>
<p>You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1">
<h3 class="font-semibold text-lg mb-2">He felt a slight 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.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1">
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1">
<h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
<p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1">
<h3 class="font-semibold text-lg mb-2">But who knows, would do it</h3>
<p>You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance.</p>
</div>
<div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1">
<h3 class="font-semibold text-lg mb-2">He felt a slight 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.</p>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-xl mx-auto grid grid-cols-2 gap-8 lg:gap-24 md:items-center">
<div class="col-span-2 md:col-span-1 order-2 md:order-1">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">Join our newsletter</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 trees</p>
<form class="flex flex-row space-x-2 mt-6">
<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">Subscribe</button>
</form>
</div>
<div class="col-span-2 md:col-span-1 flex flex-row space-x-2 order-1 md:order-2">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal.svg"alt="">
</div>
</div>
</div>
<footer class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-6 md:py-12">
<div class="max-w-screen-xl mx-auto py-6 md:py-12 lg:pb-20 md:flex md:justify-between md:items-center md:flex-row md:space-x-12 space-y-6 ">
<div class="max-w-3xl flex-1">
<img class="h-8" src="http://demo-assets.uibak.com/themesdev/uptimemate-logo-dark.svg"alt="UptimeMate logo">
<p class="text-base lg:text-xl font-medium text-gray-500 mt-8 leading-relaxed">Promise your reader something valuable. Will you teach her how to learn a new skill? Will you persuade her to do something she’s never done before?</p>
<div class="flex items-center space-x-4 mt-8 lg:mt-12">
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Facebook</span>
<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
</svg>
</a>
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Instagram</span>
<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
</svg>
</a>
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Twitter</span>
<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
</svg>
</a>
</div>
<div class="text-sm mt-6 lg:mt-12 xl:mt-20">
©2021 Company. All rights reserved.
</div>
</div>
<div class="grid grid-cols-2 gap-8 lg:gap-10 lg:gap-x-8">
<div>
<h5 class="text-xl font-semibold text-gray-700">Product</h5>
<nav class="mt-4">
<ul class="space-y-2">
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Landingpages</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Features</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Documentation</a>
</li>
</ul>
</nav>
</div>
<div>
<h5 class="text-xl font-semibold text-gray-700">Industries</h5>
<nav class="mt-4">
<ul class="space-y-2">
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Employment</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Childcare</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Education</a>
</li>
</ul>
</nav>
</div>
<div>
<h5 class="text-xl font-semibold text-gray-700">About us</h5>
<nav class="mt-4">
<ul class="space-y-2">
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Company</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Download brochure</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Media Kit</a>
</li>
</ul>
</nav>
</div>
<div>
<h5 class="text-xl font-semibold text-gray-700">Legal</h5>
<nav class="mt-4">
<ul class="space-y-2">
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Terms and conditions</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Security</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Privacy and Cookie Statement</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
Examples 06
=
<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>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
<div class="max-w-screen-xl mx-auto px-6 lg:px-8 xl:px-4 grid grid-cols-1 sm:grid-cols-2 space-y-5 sm:space-y-3 xl:grid-cols-5 col-gap-6 xl:gap-12">
<img class="h-12 p-1 self-end justify-self-center opacity-75" src="http://demo-assets.uibak.com/themesdev/jobboard-logo.svg"alt="logo placeholder">
<img class="h-12 p-1 self-end justify-self-center opacity-75" 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-75" src="http://demo-assets.uibak.com/themesdev/airstream-logo.svg"alt="logo placeholder">
<img class="h-10 p-1 self-end justify-self-center opacity-75" 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-75" src="http://demo-assets.uibak.com/themesdev/fastdelivery-logo.svg"alt="logo placeholder">
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-12 xl:gap-y-20 max-w-screen-xl mx-auto space-y-12 md:space-y-0">
<div class="text-center p-6 lg:p-8 xl:p-16 bg-gray-100 rounded-lg">
<div class="w-12 mx-auto mb-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path fill="#fff" d="M12 14l9-5-9-5-9 5 9 5z" />
<path fill="#fff" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
</div>
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
</div>
<div class="text-center p-6 lg:p-8 xl:p-16 bg-gray-200 rounded-lg">
<div class="w-12 mx-auto mb-4">
<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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
</svg>
</div>
<h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
<p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
</div>
<div class="text-center p-6 lg:p-8 xl:p-16 bg-gray-100 rounded-lg col-span-2 lg:col-span-1">
<div class="w-12 mx-auto mb-4">
<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>
</div>
<h3 class="font-semibold text-lg mb-2">He felt a slight 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.</p>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-xl mx-auto">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium text-center">Amazing Features</h2>
<p class="text-xl lg:text-2xl text-gray-600 mt-2 text-center">We are mmitted to a unique, cutting-edge approach to that</p>
</div>
<div class="md:grid md:grid-cols-2 md:gap-12 max-w-screen-xl mx-auto mt-12 space-y-12 md:space-y-0">
<a href="#" class="block md:flex md:flex-row items-center md:space-x-6 bg-gray-100 p-4 lg:p-8 rounded-lg border border-gray-200">
<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-100 p-4 lg:p-8 rounded-lg border border-gray-200">
<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-100 p-4 lg:p-8 rounded-lg border border-gray-200">
<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>
<a href="#" class="block md:flex md:flex-row items-center md:space-x-6 bg-gray-100 p-4 lg:p-8 rounded-lg border border-gray-200">
<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="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</span>
<div class="md:self-center md:flex-1">
<span class="text-xl font-semibold text-gray-700 block">The best support in town</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 class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
<div class="max-w-screen-lg mx-auto flex flex-col md:flex-row items-start space-y-6 md:space-y-0 md:space-x-6 lg:space-x-10">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="User placeholder" class="rounded-full w-32 relative -top-2">
<div class="border-l-4 border-gray-300 pl-4 md:pl-8">
<p class="text-lg lg:text-xl font-sem italic">"Quick brown dogs jump over the lazy fox. The jay, pig, fox,
zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed by MTV for
luck. A wizard’s job is to vex chumps quickly in fog.</p>
<div class="flex space-x-2 space-y-1 mt-4">
<span class="text-lg font-semibold text-gray-700 block">Alan Gregory</span>
<span class="text-base font-semibold text-gray-500 block">CEO - Facebook</span>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-xl mx-auto grid grid-cols-1 md:grid-cols-2 space-y-8 md:space-y-0 gap-x-12">
<div class="px-4 md:px-8 lg:px-12 py-6 lg:py-12 bg-gray-200">
<h3 class="text-xl font-semibold text-gray-700 block">The bedding was hardly able</h3>
<p class="mt-3">Doing business like this takes much more effort than doing your own business at home, and on top of that there's</p>
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6">Read more</a>
</div>
<div class="px-4 md:px-8 lg:px-12 py-6 lg:py-12 bg-gray-200">
<h3 class="text-xl font-semibold text-gray-700 block">Took out the window at the</h3>
<p class="mt-3">Doing business like this takes much more effort than doing your own business at home, and on top of that there's</p>
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6">Read more</a>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
<div class="max-w-screen-xl mx-auto px-6 lg:px-8 xl:px-4 grid grid-cols-1 sm:grid-cols-2 space-y-5 sm:space-y-3 xl:grid-cols-5 col-gap-6 xl:gap-12">
<img class="h-12 p-1 self-end justify-self-center opacity-75" src="http://demo-assets.uibak.com/themesdev/jobboard-logo.svg"alt="logo placeholder">
<img class="h-12 p-1 self-end justify-self-center opacity-75" 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-75" src="http://demo-assets.uibak.com/themesdev/airstream-logo.svg"alt="logo placeholder">
<img class="h-10 p-1 self-end justify-self-center opacity-75" 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-75" src="http://demo-assets.uibak.com/themesdev/fastdelivery-logo.svg"alt="logo placeholder">
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12 bg-gray-200 p-8 lg:p-12 rounded-lg ">
<div class="col-span-1 md:col-span-2 order-2 md:order-1">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">This makes a great headline</h2>
<p class="text-xl text-gray-600 mt-4 max-w-3xl">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">
<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>
<div class="col-span-1 order-1 md:order-2">
<p class="text-lg italic">"One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed in his bed
into a horrible vermin. Bad, for quick jigs vex! Fox nymphs."</p>
<div class="flex flex-row items-center space-x-4 mt-6 lg:mt-8 ">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="User placeholder" class="rounded-full w-16">
<div class="space-y-1">
<span class="text-lg font-semibold text-gray-700 block">Alan Gregory</span>
<span class="text-base font-semibold text-gray-500 block">CEO - Facebook</span>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12">
<div class="max-w-screen-xl mx-auto mb-12 lg:mb-16 ">
<img class="h-8" src="http://demo-assets.uibak.com/themesdev/uptimemate-logo-dark.svg"alt="UptimeMate logo">
</div>
<div class="max-w-screen-xl mx-auto ">
<div class="grid grid-cols-8 md:grid-cols-9 lg:grid-cols-8 divide-gray-200 divide-y-2 md:divide-x-2 md:divide-y-0 md:-mx-8">
<div class="col-span-8 md:col-span-3 lg:col-span-2 md:px-8 py-4 md:py-0">
<h5 class="text-xl font-semibold text-gray-700">Company</h5>
<nav class="mt-4">
<ul class="space-y-2">
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Landingpages</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Features</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Download brochure</a>
</li>
</ul>
</nav>
</div>
<div class="col-span-8 md:col-span-3 lg:col-span-3 md:px-8 py-4 md:py-0">
<h5 class="text-xl font-semibold text-gray-700">Industries</h5>
<nav class="mt-4">
<ul class="grid lg:grid-cols-2">
<li class="mb-2">
<a href="#" class="font-normal text-base hover:text-gray-400">Employment</a>
</li>
<li class="mb-2">
<a href="#" class="font-normal text-base hover:text-gray-400">Company</a>
</li>
<li class="mb-2">
<a href="#" class="font-normal text-base hover:text-gray-400">Childcare</a>
</li>
<li class="mb-2">
<a href="#" class="font-normal text-base hover:text-gray-400">Download brochure</a>
</li>
</ul>
</nav>
</div>
<div class="col-span-8 md:col-span-3 lg:col-span-3 md:px-8 py-4 md:py-0">
<h5 class="text-xl font-semibold text-gray-700">Follow us</h5>
<nav class="mt-4">
<ul class="grid lg:grid-cols-2">
<li class="mb-2">
<a href="#" class="flex space-x-2 font-normal text-base hover:text-gray-400">
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
<span>
Twitter
</span>
</a>
</li>
<li class="mb-2">
<a href="#" class="flex space-x-2 font-normal text-base hover:text-gray-400">
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
<span>
Instagram
</span>
</a>
</li>
<li class="mb-2">
<a href="#" class="flex space-x-2 font-normal text-base hover:text-gray-400">
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
<span>
Facebook
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="max-w-screen-xl mx-auto flex flex-col md:flex-row justify-between items-center space-y-4 mt-8 lg:mt-12 border-t-2 border-gray-200 pt-8">
<nav class="flex flex-wrap justify-center space-x-6">
<a href="#" class="font-normal text-sm hover:text-gray-400 mb-2">Cookie settings</a>
</nav>
<p class="text-sm text-center md:text-right">©2021 Company. All rights reserved. | All rights reserved</p>
</div>
</footer>
Examples 07
=
<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>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
<div class="max-w-screen-xl mx-auto px-6 lg:px-8 xl:px-4 grid grid-cols-1 sm:grid-cols-2 space-y-5 sm:space-y-3 xl:grid-cols-5 col-gap-6 xl:gap-12">
<img class="h-12 p-1 self-end justify-self-center opacity-75" src="http://demo-assets.uibak.com/themesdev/jobboard-logo.svg"alt="logo placeholder">
<img class="h-12 p-1 self-end justify-self-center opacity-75" 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-75" src="http://demo-assets.uibak.com/themesdev/airstream-logo.svg"alt="logo placeholder">
<img class="h-10 p-1 self-end justify-self-center opacity-75" 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-75" src="http://demo-assets.uibak.com/themesdev/fastdelivery-logo.svg"alt="logo placeholder">
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="md:grid md:grid-cols-2 xl:grid-cols-3 md:gap-12 xl:gap-y-20 max-w-screen-xl mx-auto space-y-12 md:space-y-0">
<div class="text-left">
<div class="w-12 bg-gray-200 rounded-lg p-2 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path fill="#fff" d="M12 14l9-5-9-5-9 5 9 5z" />
<path fill="#fff" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
</div>
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
</div>
<div class="text-left">
<div class="w-12 bg-gray-200 rounded-lg p-2 mb-4">
<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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
</svg>
</div>
<h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
<p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
</div>
<div class="text-left">
<div class="w-12 bg-gray-200 rounded-lg p-2 mb-4">
<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>
</div>
<h3 class="font-semibold text-lg mb-2">He felt a slight 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.</p>
</div>
<div class="text-left">
<div class="w-12 bg-gray-200 rounded-lg p-2 mb-4">
<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="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>
</div>
<h3 class="font-semibold text-lg mb-2">But who knows, would do it</h3>
<p>You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance.</p>
</div>
<div class="text-left">
<div class="w-12 bg-gray-200 rounded-lg p-2 mb-4">
<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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<h3 class="font-semibold text-lg mb-2">His boss would certainly</h3>
<p>Well, there's still some hope; once I've got the money together to pay off my parents.</p>
</div>
<div class="text-left">
<div class="w-12 bg-gray-200 rounded-lg p-2 mb-4">
<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="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
</svg>
</div>
<h3 class="font-semibold text-lg mb-2">One morning, when Gregor Samsa</h3>
<p>And even if he did catch the train he would not avoid his boss's anger as the.</p>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-xl mx-auto text-center">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">Amazing Features</h2>
<p class="text-xl lg:text-2xl text-gray-600 mt-2">We are mmitted to a unique, cutting-edge approach to that</p>
</div>
<div class="md:grid items-center md:grid-cols-3 md:gap-12 xl:gap-y-20 max-w-screen-xl mx-auto mt-12 lg:mt-20 space-y-12 md:space-y-0">
<div class="space-y-12 lg:space-y-20 order-1">
<div class="text-left">
<h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
</div>
<div class="text-left">
<h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
<p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
</div>
</div>
<div class="order-2">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="">
</div>
<div class="space-y-12 lg:space-y-20 order-3">
<div class="text-left">
<h3 class="font-semibold text-lg mb-2">He felt a slight 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.</p>
</div>
<div class="text-left">
<h3 class="font-semibold text-lg mb-2">But who knows, would do it</h3>
<p>You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance.</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="grid grid-cols-2 gap-8 max-w-screen-xl mx-auto ">
<div class="col-span-2 lg:col-span-1">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal.svg"alt="image placeholder" class="mb-6 lg:mb-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>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back.</p>
<p class="mt-4">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 mt-5 font-semibold">Read more ></a>
</div>
<div class="col-span-2 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="flex flex-col lg:flex-row items-start space-y-6 lg:space-y-0 lg:space-x-10 bg-gray-200 p-4 rounded-lg">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="Image placeholder" class="rounded-xl w-24 lg:w-40">
<div class="self-center">
<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, and on top of that there's the curse of travelling.</p>
<a href="#" class="inline-block mt-2">Read more</a>
</div>
</div>
<div class="flex flex-col lg:flex-row items-start space-y-6 lg:space-y-0 lg:space-x-10 bg-gray-200 p-4 rounded-lg">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="Image placeholder" class="rounded-xl w-24 lg:w-40">
<div class="self-center">
<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 at the floundering legs, and only stopped when.</p>
<a href="#" class="inline-block mt-2">Read more</a>
</div>
</div>
<div class="flex flex-col lg:flex-row items-start space-y-6 lg:space-y-0 lg:space-x-10 bg-gray-200 p-4 rounded-lg">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="Image placeholder" class="rounded-xl w-24 lg:w-40">
<div class="self-center">
<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. For instance, whenever I go back to the guest.</p>
<a href="#" class="inline-block mt-2">Read more</a>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
<div class="max-w-screen-xl mx-auto px-6 lg:px-8 xl:px-4 grid grid-cols-1 sm:grid-cols-2 space-y-5 sm:space-y-3 xl:grid-cols-5 col-gap-6 xl:gap-12">
<img class="h-12 p-1 self-end justify-self-center opacity-75" src="http://demo-assets.uibak.com/themesdev/jobboard-logo.svg"alt="logo placeholder">
<img class="h-12 p-1 self-end justify-self-center opacity-75" 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-75" src="http://demo-assets.uibak.com/themesdev/airstream-logo.svg"alt="logo placeholder">
<img class="h-10 p-1 self-end justify-self-center opacity-75" 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-75" src="http://demo-assets.uibak.com/themesdev/fastdelivery-logo.svg"alt="logo placeholder">
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12 bg-gray-200 p-8 lg:p-12 rounded-lg ">
<div class="col-span-1 md:col-span-2 order-2 md:order-1">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">This makes a great headline</h2>
<p class="text-xl text-gray-600 mt-4 max-w-3xl">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">
<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>
<div class="col-span-1 order-1 md:order-2">
<p class="text-lg italic">"One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed in his bed
into a horrible vermin. Bad, for quick jigs vex! Fox nymphs."</p>
<div class="flex flex-row items-center space-x-4 mt-6 lg:mt-8 ">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="User placeholder" class="rounded-full w-16">
<div class="space-y-1">
<span class="text-lg font-semibold text-gray-700 block">Alan Gregory</span>
<span class="text-base font-semibold text-gray-500 block">CEO - Facebook</span>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12">
<div class="max-w-screen-xl mx-auto mb-12 lg:mb-16 ">
<img class="h-8" src="http://demo-assets.uibak.com/themesdev/uptimemate-logo-dark.svg"alt="UptimeMate logo">
</div>
<div class="max-w-screen-xl mx-auto ">
<div class="grid grid-cols-8 md:grid-cols-9 lg:grid-cols-8 divide-gray-200 divide-y-2 md:divide-x-2 md:divide-y-0 md:-mx-8">
<div class="col-span-8 md:col-span-3 lg:col-span-2 md:px-8 py-4 md:py-0">
<h5 class="text-xl font-semibold text-gray-700">Company</h5>
<nav class="mt-4">
<ul class="space-y-2">
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Landingpages</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Features</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Download brochure</a>
</li>
</ul>
</nav>
</div>
<div class="col-span-8 md:col-span-3 lg:col-span-3 md:px-8 py-4 md:py-0">
<h5 class="text-xl font-semibold text-gray-700">Industries</h5>
<nav class="mt-4">
<ul class="grid lg:grid-cols-2">
<li class="mb-2">
<a href="#" class="font-normal text-base hover:text-gray-400">Employment</a>
</li>
<li class="mb-2">
<a href="#" class="font-normal text-base hover:text-gray-400">Company</a>
</li>
<li class="mb-2">
<a href="#" class="font-normal text-base hover:text-gray-400">Childcare</a>
</li>
<li class="mb-2">
<a href="#" class="font-normal text-base hover:text-gray-400">Download brochure</a>
</li>
</ul>
</nav>
</div>
<div class="col-span-8 md:col-span-3 lg:col-span-3 md:px-8 py-4 md:py-0">
<h5 class="text-xl font-semibold text-gray-700">Follow us</h5>
<nav class="mt-4">
<ul class="grid lg:grid-cols-2">
<li class="mb-2">
<a href="#" class="flex space-x-2 font-normal text-base hover:text-gray-400">
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
<span>
Twitter
</span>
</a>
</li>
<li class="mb-2">
<a href="#" class="flex space-x-2 font-normal text-base hover:text-gray-400">
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
<span>
Instagram
</span>
</a>
</li>
<li class="mb-2">
<a href="#" class="flex space-x-2 font-normal text-base hover:text-gray-400">
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
<span>
Facebook
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="max-w-screen-xl mx-auto flex flex-col md:flex-row justify-between items-center space-y-4 mt-8 lg:mt-12 border-t-2 border-gray-200 pt-8">
<nav class="flex flex-wrap justify-center space-x-6">
<a href="#" class="font-normal text-sm hover:text-gray-400 mb-2">Cookie settings</a>
</nav>
<p class="text-sm text-center md:text-right">©2021 Company. All rights reserved. | All rights reserved</p>
</div>
</footer>
Examples 08
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#">
<img class="h-7" src="http://demo-assets.uibak.com/themesdev/edge-logo.svg"alt="logo placeholder">
</a>
<nav class="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-6 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>
<div class="flex space-x-3">
<a href="#" class="inline-block bg-transparent border-2 border-gray-600 font-semibold rounded-lg text-sm py-3 px-5 text-gray-600">Log in</a>
<a href="#" class="inline-block bg-gray-600 border-2 border-gray-600 font-semibold rounded-lg text-sm py-3 px-5 text-white">Call to action</a>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-xl mx-auto">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal.svg"alt="image placeholder" class="rounded-lg">
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="md:grid md:grid-cols-2 xl:grid-cols-3 md:gap-12 xl:gap-y-20 max-w-screen-xl mx-auto space-y-12 md:space-y-0">
<div class="text-left">
<div class="w-12 bg-gray-200 rounded-lg p-2 mb-4">
<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="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>
</div>
<h3 class="font-semibold text-lg mb-2">But who knows, would do it</h3>
<p>You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance.</p>
</div>
<div class="text-left">
<div class="w-12 bg-gray-200 rounded-lg p-2 mb-4">
<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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<h3 class="font-semibold text-lg mb-2">His boss would certainly</h3>
<p>Well, there's still some hope; once I've got the money together to pay off my parents.</p>
</div>
<div class="text-left">
<div class="w-12 bg-gray-200 rounded-lg p-2 mb-4">
<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="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
</svg>
</div>
<h3 class="font-semibold text-lg mb-2">One morning, when Gregor Samsa</h3>
<p>And even if he did catch the train he would not avoid his boss's anger as the.</p>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
<div class="max-w-screen-lg mx-auto">
<div class="grid md:grid-cols-2 gap-12 lg:gap-x-8">
<div class="self-center">
<p class="text-lg text-gray-600">
Far far away, behind the word mountains, far from the Consonantia, blind texts. Separated they live in Bookmarksgrove right at the coast Low of the Semantics, a named Duden flows by their place and supplies it with
</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="border-t-2 lg:border-t-0 lg:border-l-2 border-gray-200 lg:pl-8 pt-6 lg:pt-0">
<img class="h-12 p-1 opacity-75 mb-5" src="http://demo-assets.uibak.com/themesdev/fastdelivery-logo.svg"alt="logo placeholder">
<p class="text-lg italic">"Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! "Now fax quiz Jack! " my brave ghost pled. Five quacking zephyrs jolt my wax bed."</p>
<div class="flex flex-row items-center space-x-4 mt-6 lg:mt-8 ">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="User placeholder" class="rounded-full w-12">
<div class="space-y-1">
<span class="text-base font-semibold text-gray-700 block">Tanya Gilbert</span>
<span class="text-sm font-semibold text-gray-500 block">CEO - Google</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
<div class="max-w-screen-xl mx-auto grid grid-cols-2 gap-x-8 lg:gap-x-12 xl:gap-x-20">
<div class="col-span-2 md:col-span-1 mb-8 md:mb-0 ">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="Image placeholder" class="rounded-lg w-full">
</div>
<div class="col-span-2 md:col-span-1 self-center max-w-2xl text-lg text-gray-600">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">The best features</h2>
<div class="text-lg mb-12">
<p class="mt-6">Everyone realizes why a new common language would be desirable: one could refuse to pay
expensive translators. To achieve this, it would be necessary to have uniform grammar</p>
</div>
<div class="grid grid-cols-2 gap-6 xl:gap-y-12 ">
<div class="text-center">
<div class="w-16 bg-gray-200 rounded-full p-4 mb-4 mx-auto">
<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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<span class="font-semibold block text-base md:text-lg mb-2">His boss would certainly</span>
</div>
<div class="text-center">
<div class="w-16 bg-gray-200 rounded-full p-4 mb-4 mx-auto">
<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="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
</svg>
</div>
<span class="font-semibold block text-base md:text-lg mb-2">Turned to look out</span>
</div>
<div class="text-center">
<div class="w-16 bg-gray-200 rounded-full p-4 mb-4 mx-auto">
<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.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" />
</svg>
</div>
<span class="font-semibold block text-base md:text-lg mb-2">One morning, when Samsa</span>
</div>
<div class="text-center">
<div class="w-16 bg-gray-200 rounded-full p-4 mb-4 mx-auto">
<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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
</svg>
</div>
<span class="font-semibold block text-base md:text-lg mb-2">Window at the dull weather</span>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
<div class="max-w-screen-xl mx-auto px-6 lg:px-8 xl:px-4 grid grid-cols-1 sm:grid-cols-2 space-y-5 sm:space-y-3 xl:grid-cols-5 col-gap-6 xl:gap-12">
<img class="h-12 p-1 self-end justify-self-center opacity-75" src="http://demo-assets.uibak.com/themesdev/jobboard-logo.svg"alt="logo placeholder">
<img class="h-12 p-1 self-end justify-self-center opacity-75" 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-75" src="http://demo-assets.uibak.com/themesdev/airstream-logo.svg"alt="logo placeholder">
<img class="h-10 p-1 self-end justify-self-center opacity-75" 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-75" src="http://demo-assets.uibak.com/themesdev/fastdelivery-logo.svg"alt="logo placeholder">
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-xl mx-auto text-center">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">Ready to Start? <br> Create your free account.</h2>
<div class="flex flex-row items-center justify-center space-x-4 mx-auto mt-2">
<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>
</div>
<footer class="bg-gray-50 text-gray-600 py-6 lg:py-8 px-6 lg:px-8 xl:px-4">
<div class="max-w-screen-xl mx-auto flex justify-center items-center relative">
<nav class="flex flex-col justify-center items-center space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-20 font-semibold w-full ">
<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="order-first md:order-none">
<img class="h-10 mb-6 md:mb-0" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
</a>
<a href="#" class="hover:opacity-70">Blog</a>
<a href="#" class="hover:opacity-70">FAQ</a>
<a href="#" class="hover:opacity-70">Contact</a>
</nav>
</div>
<div class="flex items-center justify-center space-x-6 mt-8 lg:mt-12 pl-6">
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Facebook</span>
<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
</svg>
</a>
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Instagram</span>
<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
</svg>
</a>
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Twitter</span>
<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
</svg>
</a>
</div>
<div class="text-center mt-4">
<p class="text-sm">©2021 Company. All rights reserved. | All rights reserved</p>
</div>
</footer>
Examples 09
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-6">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#">
<img class="h-8" src="http://demo-assets.uibak.com/themesdev/drops-logo.svg"alt="logo placeholder">
</a>
<nav class="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">Contact</a>
</nav>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-xl mx-auto">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal.svg"alt="image placeholder" class="rounded-lg">
</div>
<div class="max-w-screen-md mx-auto mt-8 lg:mt-12">
<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 is a 2021 must read.</h2>
<p class="md:text-lg">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. 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 mt-5 font-semibold md:text-lg">Read more ></a>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
<div class="max-w-screen-lg mx-auto">
<div class="grid md:grid-cols-2 gap-12 lg:gap-x-8">
<div class="self-center">
<p class="text-lg text-gray-600">
Far far away, behind the word mountains, far from the Consonantia, blind texts. Separated they live in Bookmarksgrove right at the coast Low of the Semantics, a named Duden flows by their place and supplies it with
</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="border-t-2 lg:border-t-0 lg:border-l-2 border-gray-200 lg:pl-8 pt-6 lg:pt-0">
<img class="h-12 p-1 opacity-75 mb-5" src="http://demo-assets.uibak.com/themesdev/fastdelivery-logo.svg"alt="logo placeholder">
<p class="text-lg italic">"Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! "Now fax quiz Jack! " my brave ghost pled. Five quacking zephyrs jolt my wax bed."</p>
<div class="flex flex-row items-center space-x-4 mt-6 lg:mt-8 ">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="User placeholder" class="rounded-full w-12">
<div class="space-y-1">
<span class="text-base font-semibold text-gray-700 block">Tanya Gilbert</span>
<span class="text-sm font-semibold text-gray-500 block">CEO - Google</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-xl mx-auto grid grid-cols-1 md:grid-cols-3 md:divide-x-2 space-y-8 md:space-y-0">
<div class="px-4 md:px-8 lg:px-12">
<h3 class="text-xl font-semibold text-gray-700 block">The bedding was hardly able</h3>
<p class="mt-3">Doing business like this takes much more effort than doing your own business at home, and on top of that there's</p>
</div>
<div class="px-4 md:px-8 lg:px-12">
<h3 class="text-xl font-semibold text-gray-700 block">Took out the window at the</h3>
<p class="mt-3">Doing business like this takes much more effort than doing your own business at home, and on top of that there's</p>
</div>
<div class="px-4 md:px-8 lg:px-12">
<h3 class="text-xl font-semibold text-gray-700 block">Lifted his head a little he could see</h3>
<p class="mt-3">Doing business like this takes much more effort than doing your own business at home, and on top of that there's</p>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
<div class="max-w-screen-xl mx-auto grid grid-cols-2 gap-x-8 lg:gap-x-12 xl:gap-x-20">
<div class="col-span-2 md:col-span-1 mb-8 md:mb-0 ">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="Image placeholder" class="rounded-lg w-full">
</div>
<div class="col-span-2 md:col-span-1 self-center max-w-2xl text-lg text-gray-600">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">The best features</h2>
<div class="text-lg mb-12">
<p class="mt-6">Everyone realizes why a new common language would be desirable: one could refuse to pay
expensive translators. To achieve this, it would be necessary to have uniform grammar</p>
</div>
<div class="grid grid-cols-2 gap-6 xl:gap-y-12 ">
<div class="text-center">
<div class="w-16 bg-gray-200 rounded-full p-4 mb-4 mx-auto">
<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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<span class="font-semibold block text-base md:text-lg mb-2">His boss would certainly</span>
</div>
<div class="text-center">
<div class="w-16 bg-gray-200 rounded-full p-4 mb-4 mx-auto">
<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="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
</svg>
</div>
<span class="font-semibold block text-base md:text-lg mb-2">Turned to look out</span>
</div>
<div class="text-center">
<div class="w-16 bg-gray-200 rounded-full p-4 mb-4 mx-auto">
<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.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" />
</svg>
</div>
<span class="font-semibold block text-base md:text-lg mb-2">One morning, when Samsa</span>
</div>
<div class="text-center">
<div class="w-16 bg-gray-200 rounded-full p-4 mb-4 mx-auto">
<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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
</svg>
</div>
<span class="font-semibold block text-base md:text-lg mb-2">Window at the dull weather</span>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="md:grid md:grid-cols-2 xl:grid-cols-4 md:gap-12 xl:gap-y-20 max-w-screen-xl mx-auto space-y-6 md:space-y-0">
<div class="flex flex-row justify-between space-x-3 bg-gray-200 p-4 rounded-lg">
<div>
<span class="text-base">Students</span>
<span class="block font-semibold text-3xl mb-2">221</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-8">
<path fill="#fff" d="M12 14l9-5-9-5-9 5 9 5z" />
<path fill="#fff" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
</div>
<div class="flex flex-row justify-between space-x-3 bg-gray-200 p-4 rounded-lg">
<div>
<span class="text-base">Books</span>
<span class="block font-semibold text-3xl mb-2">3000</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-8">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
</div>
<div class="flex flex-row justify-between space-x-3 bg-gray-200 p-4 rounded-lg">
<div>
<span class="text-base">Hours of material</span>
<span class="block font-semibold text-3xl mb-2">12000</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-8">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="flex flex-row justify-between space-x-3 bg-gray-200 p-4 rounded-lg">
<div>
<span class="text-base">Locations</span>
<span class="block font-semibold text-3xl mb-2">12</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-8">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-xl mx-auto text-center">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">Always stay up to date</h2>
<form class="flex flex-row space-x-2 mt-6 lg:mt-8 max-w-lg mx-auto">
<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">Subscribe</button>
</form>
<p class="text-lg text-gray-600 mt-4 lg:mt-8 max-w-3xl mx-auto">World among the stalks, and grow familiar with the countless the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath</p>
</div>
</div>
<footer class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12">
<div class="max-w-screen-xl mx-auto grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-x-8">
<div>
<h5 class="text-xl font-semibold text-gray-700">Product</h5>
<nav class="mt-4">
<ul class="space-y-2">
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Landingpages</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Features</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Documentation</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Careers</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Blocks</a>
</li>
</ul>
</nav>
</div>
<div>
<h5 class="text-xl font-semibold text-gray-700">Industries</h5>
<nav class="mt-4">
<ul class="space-y-2">
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Employment</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Childcare</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Education</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Accountancy</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Wholesale</a>
</li>
</ul>
</nav>
</div>
<div>
<h5 class="text-xl font-semibold text-gray-700">About us</h5>
<nav class="mt-4">
<ul class="space-y-2">
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Company</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Download brochure</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Media Kit</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Accountancy</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Healthcare</a>
</li>
</ul>
</nav>
</div>
<div class="flex flex-col items-start space-y-10">
<img class="h-10" src="http://demo-assets.uibak.com/themesdev/pathway-logo.svg"alt="PathWay logo">
<div class="flex-1 flex flex-col justify-end">
<div class="flex items-center space-x-2">
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Facebook</span>
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Instagram</span>
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Twitter</span>
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
</div>
<div class="text-sm mt-4">
©2021 Company. All rights reserved.
</div>
</div>
</div>
</div>
</footer>
Examples 10
=
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4">
<div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
<a href="#">
<img class="h-7" src="http://demo-assets.uibak.com/themesdev/edge-logo.svg"alt="logo placeholder">
</a>
<nav class="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-6 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>
<div class="flex">
<a href="#" class="inline-block bg-transparant font-semibold rounded-lg text-sm py-3 px-5 text-gray-600">Log in</a>
<a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg text-sm py-3 px-5 text-white">Call to action</a>
</div>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-6">
<div class="max-w-screen-lg mx-auto">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium text-center">Our portfolio with our work</h2>
<p class="text-xl lg:text-2xl text-gray-600 text-center mt-2">The quick, brown fox jumps over a lazy dog.</p>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-16">
<a href="#">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="" class="mb-6">
<h3 class="text-xl font-semibold text-gray-700 block">Doing your own business</h3>
<p class="mt-3">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 class="flex flex-row items-center space-x-4 text-left mt-6">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="User placeholder" class="rounded-full w-12">
<div>
<span class="text-lg font-semibold text-gray-700 block">Henry Lee</span>
<span class="text-sm font-semibold text-gray-500 block">March 2021</span>
</div>
</div>
</a>
<a href="#">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="" class="mb-6">
<h3 class="text-xl font-semibold text-gray-700 block">Gregor then turned to the window</h3>
<p class="mt-3">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 class="flex flex-row items-center space-x-4 text-left mt-6">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="User placeholder" class="rounded-full w-12">
<div>
<span class="text-lg font-semibold text-gray-700 block">Scott James</span>
<span class="text-sm font-semibold text-gray-500 block">March 2021</span>
</div>
</div>
</a>
<a href="#">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="" class="mb-6">
<h3 class="text-xl font-semibold text-gray-700 block">A collection of textile samples</h3>
<p class="mt-3">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 class="flex flex-row items-center space-x-4 text-left mt-6">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="User placeholder" class="rounded-full w-12">
<div>
<span class="text-lg font-semibold text-gray-700 block">Elsie Hughes</span>
<span class="text-sm font-semibold text-gray-500 block">February 2021</span>
</div>
</div>
</a>
<a href="#">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="" class="mb-6">
<h3 class="text-xl font-semibold text-gray-700 block">The bedding was hardly able</h3>
<p class="mt-3">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 class="flex flex-row items-center space-x-4 text-left mt-6">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="User placeholder" class="rounded-full w-12">
<div>
<span class="text-lg font-semibold text-gray-700 block">Henry Lee</span>
<span class="text-sm font-semibold text-gray-500 block">January 2021</span>
</div>
</div>
</a>
<a href="#">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="" class="mb-6">
<h3 class="text-xl font-semibold text-gray-700 block">Took out the window at the</h3>
<p class="mt-3">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 class="flex flex-row items-center space-x-4 text-left mt-6">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="User placeholder" class="rounded-full w-12">
<div>
<span class="text-lg font-semibold text-gray-700 block">Henry Lee</span>
<span class="text-sm font-semibold text-gray-500 block">December 2021</span>
</div>
</div>
</a>
<a href="#">
<img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal-large.svg"alt="" class="mb-6">
<h3 class="text-xl font-semibold text-gray-700 block">Lifted his head a little he could see</h3>
<p class="mt-3">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 class="flex flex-row items-center space-x-4 text-left mt-6">
<img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="User placeholder" class="rounded-full w-12">
<div>
<span class="text-lg font-semibold text-gray-700 block">Zoe Murray</span>
<span class="text-sm font-semibold text-gray-500 block">December 2021</span>
</div>
</div>
</a>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
<div class="max-w-screen-xl mx-auto text-center">
<h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">Free demo for WindyBlocks</h2>
<form class="grid grid-cols-2 md:grid-cols-4 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">
<input type="Email" placeholder="Email address" class="bg-white border border-gray-300 px-4 py-2 flex-1 rounded-lg h-14">
<input type="password" placeholder="password" class="bg-white border border-gray-300 px-4 py-2 flex-1 rounded-lg h-14 col-span-2 md: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-2 md:col-span-1">Sign up for free</button>
</form>
<p class="text-lg text-gray-600 mt-4 lg:mt-8 max-w-3xl mx-auto">World among the stalks, and grow familiar with the countless the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath</p>
</div>
</div>
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
<div class="max-w-screen-xl mx-auto px-6 lg:px-8 xl:px-4 grid grid-cols-1 sm:grid-cols-2 space-y-5 sm:space-y-3 xl:grid-cols-5 col-gap-6 xl:gap-12">
<img class="h-12 p-1 self-end justify-self-center opacity-75" src="http://demo-assets.uibak.com/themesdev/jobboard-logo.svg"alt="logo placeholder">
<img class="h-12 p-1 self-end justify-self-center opacity-75" 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-75" src="http://demo-assets.uibak.com/themesdev/airstream-logo.svg"alt="logo placeholder">
<img class="h-10 p-1 self-end justify-self-center opacity-75" 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-75" src="http://demo-assets.uibak.com/themesdev/fastdelivery-logo.svg"alt="logo placeholder">
</div>
</div>
<footer class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12">
<div class="max-w-screen-xl mx-auto grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-x-8">
<div>
<img class="h-8" src="http://demo-assets.uibak.com/themesdev/uptimemate-logo-dark.svg"alt="UptimeMate logo">
<p class="mt-4">Let our designs work for you. And save valuable time during your next business adventure.</p>
</div>
<div>
<h5 class="text-xl font-semibold text-gray-700">Legal</h5>
<nav class="mt-4">
<ul class="space-y-2">
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">General Terms & Conditions</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Data Processing Agreement</a>
</li>
<li>
<a href="#" class="font-normal text-base hover:text-gray-400">Privacy Statement</a>
</li>
</ul>
</nav>
</div>
<div>
<h5 class="text-xl font-semibold text-gray-700">Contact</h5>
<div class="space-y-4 md:space-y-6 mt-4">
<div class="flex items-start space-x-4">
<div>
<svg class="w-6 h-6 mt-1 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
</div>
<div class="flex-1">
<address class="not-italic">
Rorikstraat 159<br>
Wijk bij Duurstede<br>
The Netherlands
</address>
</div>
</div>
<div class="flex items-start space-x-4">
<div>
<svg class="w-6 h-6 mt-1 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
</div>
<div class="flex-1">
<a href="#" class="hover:text-gray-400">support@company.com</a>
</div>
</div>
</div>
</div>
<div>
<h5 class="text-xl font-semibold text-gray-700">Latest news</h5>
<div class="space-y-8 mt-4">
<a href="#" class="flex items-start space-x-4">
<img class="h-12 mt-1 rounded-lg overflow-hidden" src="http://demo-assets.uibak.com/themesdev/placeholder-gray.svg"alt="Gray image placeholder">
<div class="flex-1">
<p>Lorem ipsum dolor sit amet, consec tetur ad ipiscing elit. Nam non dictum magna.</p>
<strong class="font-semibold block mt-2 text-sm text-gray-500">2019-10-21</strong>
</div>
</a>
<a href="#" class="flex items-start space-x-4">
<img class="h-12 mt-1 rounded-lg overflow-hidden" src="http://demo-assets.uibak.com/themesdev/placeholder-gray.svg"alt="Gray image placeholder">
<div class="flex-1">
<p>Lorem ipsum dolor sit amet, consec tetur ad ipiscing elit. Nam non dictum magna.</p>
<strong class="font-semibold block mt-2 text-sm text-gray-500">2019-10-21</strong>
</div>
</a>
</div>
</div>
</div>
<div class="max-w-screen-xl mx-auto flex flex-col items-center mt-16">
<div class="flex items-center space-x-2">
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Facebook</span>
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Instagram</span>
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="hover:text-gray-500">
<span class="sr-only">Twitter</span>
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
</div>
<div class="text-sm mt-4">
©2021 Company. All rights reserved.
</div>
</div>
</footer>
总共 10 条记录