Examples 04
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>