added 41 footer and 4 header with one of theme being uncomplete

This commit is contained in:
merajjahir
2022-02-16 19:45:44 +06:00
parent c36adc3a82
commit 3d1bb92b3a
11 changed files with 2466 additions and 495 deletions

View File

@@ -0,0 +1,192 @@
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../../dist/tailshape.css">
<title>Footer 37</title>
</head>
<body>
<!-- footer 39 start -->
<section class="section_divider">
<div>Footer 39</div>
</section>
<footer class="bg-gray-900 text-gray-200">
<div class="container px-4 mx-auto">
<div class="-mx-4 flex flex-wrap justify-between">
<div class="px-4 w-full md:w-1/3 my-4">
<h2 class="text-xl mb-6">Contact</h2>
<ul class="mb-6">
<li class="flex items-center mb-2">
<div class="text-yellow-500 mr-4">
<svg class="fill-current w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"></path>
</svg>
</div>
<div>
<a href="http://maps.google.com" target="_blank" rel="noopener noreferrer" class="hover:text-yellow-500">
Tailwindow Street, California, USA
</a>
</div>
</li>
<li class="flex items-center mb-2">
<div class="text-yellow-500 mr-4">
<svg class="fill-current w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"></path>
</svg>
</div>
<div>
<a href="mailto:info@tailwindow.com" class="hover:text-yellow-500">info@tailwindow.com</a>
</div>
</li>
<li class="flex items-center mb-2">
<div class="text-yellow-500 mr-4">
<svg class="fill-current w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path>
</svg>
</div>
<div>
<a href="tel:+18245946369" class="hover:text-yellow-500">+1 8245 946 369</a>
</div>
</li>
</ul>
<a href="#" class="inline-flex w-8 h-8 rounded-sm bg-gray-600 hover:bg-gray-700 items-center justify-center">
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
</a>
<a href="#" class="inline-flex w-8 h-8 rounded-sm bg-gray-600 hover:bg-gray-700 items-center justify-center">
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
<a href="#" class="inline-flex w-8 h-8 rounded-sm bg-gray-600 hover:bg-gray-700 items-center justify-center">
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
</svg>
</a>
<a href="#" class="inline-flex w-8 h-8 rounded-sm bg-gray-600 hover:bg-gray-700 items-center justify-center">
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
</svg>
</a>
<a href="#" class="inline-flex w-8 h-8 rounded-sm bg-gray-600 hover:bg-gray-700 items-center justify-center">
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
</svg>
</a>
</div>
<div class="px-4 w-full md:w-1/3 my-4">
<h2 class="text-xl mb-6">Latest Posts</h2>
<ul>
<li>
<a href="#" class="flex mb-2 hover:text-yellow-500">
<img class="rounded-sm" src="https://picsum.photos/id/121/40" alt="article 1">
<div class="ml-3 overflow-hidden">
<h3 class="font-semibold truncate">
How to use TailwindCSS with Vuejs and Laravel Mix
</h3>
<span class="text-xs text-gray-500 block">July 17, 2020</span>
</div>
</a>
</li>
<li>
<a href="#" class="flex mb-2 hover:text-yellow-500">
<img class="rounded-sm" src="https://picsum.photos/id/122/40" alt="article 2">
<div class="ml-3 overflow-hidden">
<h3 class="font-semibold truncate">
5 Tips to Make Responsive Website
</h3>
<span class="text-xs text-gray-500 block">June 06, 2020</span>
</div>
</a>
</li>
<li>
<a href="#" class="flex mb-2 hover:text-yellow-500">
<img class="rounded-sm" src="https://picsum.photos/id/123/40" alt="article 3">
<div class="ml-3 overflow-hidden">
<h3 class="font-semibold truncate">
What Is Flex And When to Use It?
</h3>
<span class="text-xs text-gray-500 block">May 28, 2020</span>
</div>
</a>
</li>
<li>
<a href="#" class="flex mb-2 hover:text-yellow-500">
<img class="rounded-sm" src="https://picsum.photos/id/124/40" alt="article 4">
<div class="ml-3 overflow-hidden">
<h3 class="font-semibold truncate">
How TailwindCSS Can Help Your Productivity?
</h3>
<span class="text-xs text-gray-500 block">March 15, 2020</span>
</div>
</a>
</li>
<li>
<a href="#" class="flex mb-2 hover:text-yellow-500">
<img class="rounded-sm" src="https://picsum.photos/id/125/40" alt="article 4">
<div class="ml-3 overflow-hidden">
<h3 class="font-semibold truncate">
Getting Started With HTML and CSS
</h3>
<span class="text-xs text-gray-500 block">February 14, 2020</span>
</div>
</a>
</li>
</ul>
</div>
<div class="px-4 w-full md:w-1/3 my-4">
<h2 class="text-xl mb-6">Send Us Message</h2>
<form>
<div class="mb-2">
<label for="email" class="text-xs text-gray-200">Email</label>
<input id="email" type="email" class="block w-full border border-gray-400 rounded-sm py-1 px-4 text-gray-700 text-md focus:outline-none focus:border-gray-500" placeholder="john@example.com">
</div>
<div class="mb-2">
<label for="message" class="text-xs text-gray-200">Message</label>
<textarea id="message" cols="30" rows="3" class="block w-full border border-gray-400 rounded-sm py-1 px-4 text-gray-700 text-md focus:outline-none focus:border-gray-500" placeholder="I have something in mind"></textarea>
</div>
<button class="rounded-sm py-2 px-4 text-gray-100 bg-gray-600 hover:bg-gray-700 focus:outline-none">Send</button>
</form>
</div>
</div>
</div>
<div class="container px-4 mx-auto">
<div class="-mx-4 py-4 flex flex-wrap justify-between items-center">
<div class="px-4 w-full text-center sm:w-auto">
<a href="/" class="inline-flex">
<svg class="w-40" version="1.1" viewBox="0 0 3368 512" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<g transform="translate(0 -75)">
<g transform="translate(0 75)">
<rect width="512" height="512" rx="128" fill="#3D5AFE"></rect>
<rect x="149" y="176" width="220" height="220" fill="#fff"></rect>
<circle cx="259" cy="156" r="40" fill="#fff"></circle>
<circle cx="369" cy="286" r="40" fill="#2962FF"></circle>
</g>
<text fill="white" font-family="Nunito-Bold, Nunito" font-size="512" font-weight="bold">
<tspan x="654" y="518">Tailwindow</tspan>
</text>
</g>
</g>
</svg>
</a>
</div>
<div class="px-4 w-full text-center sm:w-auto sm:text-left">
Copyright © 2020
<script>new Date().getFullYear() > 2020 && document.write("- " + new Date().getFullYear())</script>- 2022
Tailwindow. All Rights Reserved.
</div>
</div>
</div>
</footer>
<!-- footer 39 end -->
</body>
</html>

View File

@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../../dist/tailshape.css">
<title>Footer 37</title>
</head>
<body>
<!-- footer 40 start -->
<section class="section_divider">
<div>Footer 40</div>
</section>
<footer class="bg-white dark:bg-gray-800 w-full py-8">
<div class="max-w-screen-xl mx-auto px-4">
<ul class="max-w-screen-md mx-auto text-lg font-light flex flex-wrap justify-between">
<li class="my-2">
<a class="text-gray-400 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white transition-colors duration-200" href="#">
FAQ
</a>
</li>
<li class="my-2">
<a class="text-gray-400 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white transition-colors duration-200" href="#">
Configuration
</a>
</li>
<li class="my-2">
<a class="text-gray-400 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white transition-colors duration-200" href="#">
Github
</a>
</li>
<li class="my-2">
<a class="text-gray-400 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white transition-colors duration-200" href="#">
LinkedIn
</a>
</li>
</ul>
<div class="pt-8 flex max-w-xs mx-auto items-center justify-between">
<a href="#" class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z">
</path>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z">
</path>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792">
<path d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z">
</path>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M477 625v991h-330v-991h330zm21-306q1 73-50.5 122t-135.5 49h-2q-82 0-132-49t-50-122q0-74 51.5-122.5t134.5-48.5 133 48.5 51 122.5zm1166 729v568h-329v-530q0-105-40.5-164.5t-126.5-59.5q-63 0-105.5 34.5t-63.5 85.5q-11 30-11 81v553h-329q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5 114.5-15.5q171 0 275 113.5t104 332.5z">
</path>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1551 1476q15-6 26-3t11 17.5-15 33.5q-13 16-44 43.5t-95.5 68-141 74-188 58-229.5 24.5q-119 0-238-31t-209-76.5-172.5-104-132.5-105-84-87.5q-8-9-10-16.5t1-12 8-7 11.5-2 11.5 4.5q192 117 300 166 389 176 799 90 190-40 391-135zm207-115q11 16 2.5 69.5t-28.5 102.5q-34 83-85 124-17 14-26 9t0-24q21-45 44.5-121.5t6.5-98.5q-5-7-15.5-11.5t-27-6-29.5-2.5-35 0-31.5 2-31 3-22.5 2q-6 1-13 1.5t-11 1-8.5 1-7 .5h-10l-3-.5-2-1.5-1.5-3q-6-16 47-40t103-30q46-7 108-1t76 24zm-394-443q0 31 13.5 64t32 58 37.5 46 33 32l13 11-227 224q-40-37-79-75.5t-58-58.5l-19-20q-11-11-25-33-38 59-97.5 102.5t-127.5 63.5-140 23-137.5-21-117.5-65.5-83-113-31-162.5q0-84 28-154t72-116.5 106.5-83 122.5-57 130-34.5 119.5-18.5 99.5-6.5v-127q0-65-21-97-34-53-121-53-6 0-16.5 1t-40.5 12-56 29.5-56 59.5-48 96l-294-27q0-60 22-119t67-113 108-95 151.5-65.5 190.5-24.5q100 0 181 25t129.5 61.5 81 83 45 86 12.5 73.5v589zm-672 21q0 86 70 133 66 44 139 22 84-25 114-123 14-45 14-101v-162q-59 2-111 12t-106.5 33.5-87 71-32.5 114.5z">
</path>
</svg>
</a>
</div>
<div class="text-center pt-10 sm:pt-12 font-light flex items-center justify-center">
<form class="flex flex-col md:flex-row w-3/4 md:w-full max-w-sm md:space-x-3 space-y-3 md:space-y-0 justify-center">
<div class=" relative ">
<input type="text" id="&quot;form-subscribe-Subscribe" class=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="Email"/>
</div>
<button class="flex-shrink-0 px-4 py-2 text-base font-semibold text-white bg-purple-600 rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-200" type="submit">
Subscribe
</button>
</form>
</div>
<div class="text-center text-gray-500 dark:text-gray-200 pt-10 sm:pt-12 font-light flex items-center justify-center">
copyright by exaple
</div>
</div>
</footer>
<!-- footer 40 end -->
</body>
</html>

View File

@@ -0,0 +1,161 @@
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../../dist/tailshape.css">
<title>Footer 37</title>
</head>
<body>
<!-- footer 41 start -->
<section class="section_divider">
<div>Footer 41</div>
</section>
<footer class="bg-white dark:bg-gray-800 pt-4 pb-8 xl:pt-8">
<div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8 text-gray-400 dark:text-gray-300">
<ul class="text-lg font-light pb-8 flex flex-wrap justify-center">
<li class="w-1/2 md:w-1/3 lg:w-1/3">
<div class="text-center">
<h2 class="text-gray-500 dark:text-gray-200 text-md uppercase mb-4">
Components
</h2>
<ul>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
Elements
</a>
</li>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
Forms
</a>
</li>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
Commerces
</a>
</li>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
Navigation
</a>
</li>
</ul>
</div>
</li>
<li class="w-1/2 md:w-1/3 lg:w-1/3">
<div class="text-center">
<h2 class="text-gray-500 dark:text-gray-200 text-md uppercase mb-4">
Contacts
</h2>
<ul>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
Github
</a>
</li>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
Facebook
</a>
</li>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
Twitter
</a>
</li>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
LinkedIn
</a>
</li>
</ul>
</div>
</li>
<li class="w-1/2 md:w-1/3 lg:w-1/3">
<div class="text-center">
<h2 class="text-gray-500 dark:text-gray-200 text-md uppercase mb-4">
Customization
</h2>
<ul>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
Settings
</a>
</li>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
Themes
</a>
</li>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
Plugins
</a>
</li>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
LinkedIn
</a>
</li>
</ul>
</div>
</li>
</ul>
<div class="pt-8 flex border-t border-gray-200 max-w-xs mx-auto items-center justify-between">
<a href="#">
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z">
</path>
</svg>
</a>
<a href="#">
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z">
</path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792">
<path d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z">
</path>
</svg>
</a>
<a href="#">
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M477 625v991h-330v-991h330zm21-306q1 73-50.5 122t-135.5 49h-2q-82 0-132-49t-50-122q0-74 51.5-122.5t134.5-48.5 133 48.5 51 122.5zm1166 729v568h-329v-530q0-105-40.5-164.5t-126.5-59.5q-63 0-105.5 34.5t-63.5 85.5q-11 30-11 81v553h-329q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5 114.5-15.5q171 0 275 113.5t104 332.5z">
</path>
</svg>
</a>
<a href="#">
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1551 1476q15-6 26-3t11 17.5-15 33.5q-13 16-44 43.5t-95.5 68-141 74-188 58-229.5 24.5q-119 0-238-31t-209-76.5-172.5-104-132.5-105-84-87.5q-8-9-10-16.5t1-12 8-7 11.5-2 11.5 4.5q192 117 300 166 389 176 799 90 190-40 391-135zm207-115q11 16 2.5 69.5t-28.5 102.5q-34 83-85 124-17 14-26 9t0-24q21-45 44.5-121.5t6.5-98.5q-5-7-15.5-11.5t-27-6-29.5-2.5-35 0-31.5 2-31 3-22.5 2q-6 1-13 1.5t-11 1-8.5 1-7 .5h-10l-3-.5-2-1.5-1.5-3q-6-16 47-40t103-30q46-7 108-1t76 24zm-394-443q0 31 13.5 64t32 58 37.5 46 33 32l13 11-227 224q-40-37-79-75.5t-58-58.5l-19-20q-11-11-25-33-38 59-97.5 102.5t-127.5 63.5-140 23-137.5-21-117.5-65.5-83-113-31-162.5q0-84 28-154t72-116.5 106.5-83 122.5-57 130-34.5 119.5-18.5 99.5-6.5v-127q0-65-21-97-34-53-121-53-6 0-16.5 1t-40.5 12-56 29.5-56 59.5-48 96l-294-27q0-60 22-119t67-113 108-95 151.5-65.5 190.5-24.5q100 0 181 25t129.5 61.5 81 83 45 86 12.5 73.5v589zm-672 21q0 86 70 133 66 44 139 22 84-25 114-123 14-45 14-101v-162q-59 2-111 12t-106.5 33.5-87 71-32.5 114.5z">
</path>
</svg>
</a>
</div>
<div class="text-center pt-10 sm:pt-12 font-light flex items-center justify-center">
<form class="flex flex-col md:flex-row w-3/4 md:w-full max-w-sm md:space-x-3 space-y-3 md:space-y-0 justify-center">
<div class=" relative ">
<input type="text" id="&quot;form-subscribe-Subscribe" class=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="Email"/>
</div>
<button class="flex-shrink-0 px-4 py-2 text-base font-semibold text-white bg-purple-600 rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-200" type="submit">
Subscribe
</button>
</form>
</div>
<div class="text-center pt-10 sm:pt-12 font-light flex items-center justify-center">
copyright by example
</div>
</div>
</footer>
<!-- footer 41 end -->
</body>
</html>

View File

@@ -3706,9 +3706,411 @@
</section>
<!-- footer 38 end -->
<!-- footer 39 start -->
<section class="section_divider">
<div>Footer 39</div>
</section>
<footer class="bg-gray-900 text-gray-200">
<div class="container px-4 mx-auto">
<div class="-mx-4 flex flex-wrap justify-between">
<div class="px-4 w-full md:w-1/3 my-4">
<h2 class="text-xl mb-6">Contact</h2>
<ul class="mb-6">
<li class="flex items-center mb-2">
<div class="text-yellow-500 mr-4">
<svg class="fill-current w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"></path>
</svg>
</div>
<div>
<a href="http://maps.google.com" target="_blank" rel="noopener noreferrer" class="hover:text-yellow-500">
Tailwindow Street, California, USA
</a>
</div>
</li>
<li class="flex items-center mb-2">
<div class="text-yellow-500 mr-4">
<svg class="fill-current w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"></path>
</svg>
</div>
<div>
<a href="mailto:info@tailwindow.com" class="hover:text-yellow-500">info@tailwindow.com</a>
</div>
</li>
<li class="flex items-center mb-2">
<div class="text-yellow-500 mr-4">
<svg class="fill-current w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path>
</svg>
</div>
<div>
<a href="tel:+18245946369" class="hover:text-yellow-500">+1 8245 946 369</a>
</div>
</li>
</ul>
<a href="#" class="inline-flex w-8 h-8 rounded-sm bg-gray-600 hover:bg-gray-700 items-center justify-center">
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
</a>
<a href="#" class="inline-flex w-8 h-8 rounded-sm bg-gray-600 hover:bg-gray-700 items-center justify-center">
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
<a href="#" class="inline-flex w-8 h-8 rounded-sm bg-gray-600 hover:bg-gray-700 items-center justify-center">
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
</svg>
</a>
<a href="#" class="inline-flex w-8 h-8 rounded-sm bg-gray-600 hover:bg-gray-700 items-center justify-center">
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
</svg>
</a>
<a href="#" class="inline-flex w-8 h-8 rounded-sm bg-gray-600 hover:bg-gray-700 items-center justify-center">
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
</svg>
</a>
</div>
<div class="px-4 w-full md:w-1/3 my-4">
<h2 class="text-xl mb-6">Latest Posts</h2>
<ul>
<li>
<a href="#" class="flex mb-2 hover:text-yellow-500">
<img class="rounded-sm" src="https://picsum.photos/id/121/40" alt="article 1">
<div class="ml-3 overflow-hidden">
<h3 class="font-semibold truncate">
How to use TailwindCSS with Vuejs and Laravel Mix
</h3>
<span class="text-xs text-gray-500 block">July 17, 2020</span>
</div>
</a>
</li>
<li>
<a href="#" class="flex mb-2 hover:text-yellow-500">
<img class="rounded-sm" src="https://picsum.photos/id/122/40" alt="article 2">
<div class="ml-3 overflow-hidden">
<h3 class="font-semibold truncate">
5 Tips to Make Responsive Website
</h3>
<span class="text-xs text-gray-500 block">June 06, 2020</span>
</div>
</a>
</li>
<li>
<a href="#" class="flex mb-2 hover:text-yellow-500">
<img class="rounded-sm" src="https://picsum.photos/id/123/40" alt="article 3">
<div class="ml-3 overflow-hidden">
<h3 class="font-semibold truncate">
What Is Flex And When to Use It?
</h3>
<span class="text-xs text-gray-500 block">May 28, 2020</span>
</div>
</a>
</li>
<li>
<a href="#" class="flex mb-2 hover:text-yellow-500">
<img class="rounded-sm" src="https://picsum.photos/id/124/40" alt="article 4">
<div class="ml-3 overflow-hidden">
<h3 class="font-semibold truncate">
How TailwindCSS Can Help Your Productivity?
</h3>
<span class="text-xs text-gray-500 block">March 15, 2020</span>
</div>
</a>
</li>
<li>
<a href="#" class="flex mb-2 hover:text-yellow-500">
<img class="rounded-sm" src="https://picsum.photos/id/125/40" alt="article 4">
<div class="ml-3 overflow-hidden">
<h3 class="font-semibold truncate">
Getting Started With HTML and CSS
</h3>
<span class="text-xs text-gray-500 block">February 14, 2020</span>
</div>
</a>
</li>
</ul>
</div>
<div class="px-4 w-full md:w-1/3 my-4">
<h2 class="text-xl mb-6">Send Us Message</h2>
<form>
<div class="mb-2">
<label for="email" class="text-xs text-gray-200">Email</label>
<input id="email" type="email" class="block w-full border border-gray-400 rounded-sm py-1 px-4 text-gray-700 text-md focus:outline-none focus:border-gray-500" placeholder="john@example.com">
</div>
<div class="mb-2">
<label for="message" class="text-xs text-gray-200">Message</label>
<textarea id="message" cols="30" rows="3" class="block w-full border border-gray-400 rounded-sm py-1 px-4 text-gray-700 text-md focus:outline-none focus:border-gray-500" placeholder="I have something in mind"></textarea>
</div>
<button class="rounded-sm py-2 px-4 text-gray-100 bg-gray-600 hover:bg-gray-700 focus:outline-none">Send</button>
</form>
</div>
</div>
</div>
<div class="container px-4 mx-auto">
<div class="-mx-4 py-4 flex flex-wrap justify-between items-center">
<div class="px-4 w-full text-center sm:w-auto">
<a href="/" class="inline-flex">
<svg class="w-40" version="1.1" viewBox="0 0 3368 512" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<g transform="translate(0 -75)">
<g transform="translate(0 75)">
<rect width="512" height="512" rx="128" fill="#3D5AFE"></rect>
<rect x="149" y="176" width="220" height="220" fill="#fff"></rect>
<circle cx="259" cy="156" r="40" fill="#fff"></circle>
<circle cx="369" cy="286" r="40" fill="#2962FF"></circle>
</g>
<text fill="white" font-family="Nunito-Bold, Nunito" font-size="512" font-weight="bold">
<tspan x="654" y="518">Tailwindow</tspan>
</text>
</g>
</g>
</svg>
</a>
</div>
<div class="px-4 w-full text-center sm:w-auto sm:text-left">
Copyright © 2020
<script>new Date().getFullYear() > 2020 && document.write("- " + new Date().getFullYear())</script>- 2022
Tailwindow. All Rights Reserved.
</div>
</div>
</div>
</footer>
<!-- footer 39 end -->
<!-- footer 40 start -->
<section class="section_divider">
<div>Footer 40</div>
</section>
<footer class="bg-white dark:bg-gray-800 w-full py-8">
<div class="max-w-screen-xl mx-auto px-4">
<ul class="max-w-screen-md mx-auto text-lg font-light flex flex-wrap justify-between">
<li class="my-2">
<a class="text-gray-400 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white transition-colors duration-200" href="#">
FAQ
</a>
</li>
<li class="my-2">
<a class="text-gray-400 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white transition-colors duration-200" href="#">
Configuration
</a>
</li>
<li class="my-2">
<a class="text-gray-400 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white transition-colors duration-200" href="#">
Github
</a>
</li>
<li class="my-2">
<a class="text-gray-400 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white transition-colors duration-200" href="#">
LinkedIn
</a>
</li>
</ul>
<div class="pt-8 flex max-w-xs mx-auto items-center justify-between">
<a href="#" class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z">
</path>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z">
</path>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792">
<path d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z">
</path>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M477 625v991h-330v-991h330zm21-306q1 73-50.5 122t-135.5 49h-2q-82 0-132-49t-50-122q0-74 51.5-122.5t134.5-48.5 133 48.5 51 122.5zm1166 729v568h-329v-530q0-105-40.5-164.5t-126.5-59.5q-63 0-105.5 34.5t-63.5 85.5q-11 30-11 81v553h-329q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5 114.5-15.5q171 0 275 113.5t104 332.5z">
</path>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1551 1476q15-6 26-3t11 17.5-15 33.5q-13 16-44 43.5t-95.5 68-141 74-188 58-229.5 24.5q-119 0-238-31t-209-76.5-172.5-104-132.5-105-84-87.5q-8-9-10-16.5t1-12 8-7 11.5-2 11.5 4.5q192 117 300 166 389 176 799 90 190-40 391-135zm207-115q11 16 2.5 69.5t-28.5 102.5q-34 83-85 124-17 14-26 9t0-24q21-45 44.5-121.5t6.5-98.5q-5-7-15.5-11.5t-27-6-29.5-2.5-35 0-31.5 2-31 3-22.5 2q-6 1-13 1.5t-11 1-8.5 1-7 .5h-10l-3-.5-2-1.5-1.5-3q-6-16 47-40t103-30q46-7 108-1t76 24zm-394-443q0 31 13.5 64t32 58 37.5 46 33 32l13 11-227 224q-40-37-79-75.5t-58-58.5l-19-20q-11-11-25-33-38 59-97.5 102.5t-127.5 63.5-140 23-137.5-21-117.5-65.5-83-113-31-162.5q0-84 28-154t72-116.5 106.5-83 122.5-57 130-34.5 119.5-18.5 99.5-6.5v-127q0-65-21-97-34-53-121-53-6 0-16.5 1t-40.5 12-56 29.5-56 59.5-48 96l-294-27q0-60 22-119t67-113 108-95 151.5-65.5 190.5-24.5q100 0 181 25t129.5 61.5 81 83 45 86 12.5 73.5v589zm-672 21q0 86 70 133 66 44 139 22 84-25 114-123 14-45 14-101v-162q-59 2-111 12t-106.5 33.5-87 71-32.5 114.5z">
</path>
</svg>
</a>
</div>
<div class="text-center pt-10 sm:pt-12 font-light flex items-center justify-center">
<form class="flex flex-col md:flex-row w-3/4 md:w-full max-w-sm md:space-x-3 space-y-3 md:space-y-0 justify-center">
<div class=" relative ">
<input type="text" id="&quot;form-subscribe-Subscribe" class=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="Email"/>
</div>
<button class="flex-shrink-0 px-4 py-2 text-base font-semibold text-white bg-purple-600 rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-200" type="submit">
Subscribe
</button>
</form>
</div>
<div class="text-center text-gray-500 dark:text-gray-200 pt-10 sm:pt-12 font-light flex items-center justify-center">
copyright by exaple
</div>
</div>
</footer>
<!-- footer 40 end -->
<!-- footer 41 start -->
<section class="section_divider">
<div>Footer 41</div>
</section>
<footer class="bg-white dark:bg-gray-800 pt-4 pb-8 xl:pt-8">
<div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8 text-gray-400 dark:text-gray-300">
<ul class="text-lg font-light pb-8 flex flex-wrap justify-center">
<li class="w-1/2 md:w-1/3 lg:w-1/3">
<div class="text-center">
<h2 class="text-gray-500 dark:text-gray-200 text-md uppercase mb-4">
Components
</h2>
<ul>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
Elements
</a>
</li>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
Forms
</a>
</li>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
Commerces
</a>
</li>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
Navigation
</a>
</li>
</ul>
</div>
</li>
<li class="w-1/2 md:w-1/3 lg:w-1/3">
<div class="text-center">
<h2 class="text-gray-500 dark:text-gray-200 text-md uppercase mb-4">
Contacts
</h2>
<ul>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
Github
</a>
</li>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
Facebook
</a>
</li>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
Twitter
</a>
</li>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
LinkedIn
</a>
</li>
</ul>
</div>
</li>
<li class="w-1/2 md:w-1/3 lg:w-1/3">
<div class="text-center">
<h2 class="text-gray-500 dark:text-gray-200 text-md uppercase mb-4">
Customization
</h2>
<ul>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
Settings
</a>
</li>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
Themes
</a>
</li>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
Plugins
</a>
</li>
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
<a href="#">
LinkedIn
</a>
</li>
</ul>
</div>
</li>
</ul>
<div class="pt-8 flex border-t border-gray-200 max-w-xs mx-auto items-center justify-between">
<a href="#">
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z">
</path>
</svg>
</a>
<a href="#">
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z">
</path>
</svg>
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792">
<path d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z">
</path>
</svg>
</a>
<a href="#">
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M477 625v991h-330v-991h330zm21-306q1 73-50.5 122t-135.5 49h-2q-82 0-132-49t-50-122q0-74 51.5-122.5t134.5-48.5 133 48.5 51 122.5zm1166 729v568h-329v-530q0-105-40.5-164.5t-126.5-59.5q-63 0-105.5 34.5t-63.5 85.5q-11 30-11 81v553h-329q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5 114.5-15.5q171 0 275 113.5t104 332.5z">
</path>
</svg>
</a>
<a href="#">
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1551 1476q15-6 26-3t11 17.5-15 33.5q-13 16-44 43.5t-95.5 68-141 74-188 58-229.5 24.5q-119 0-238-31t-209-76.5-172.5-104-132.5-105-84-87.5q-8-9-10-16.5t1-12 8-7 11.5-2 11.5 4.5q192 117 300 166 389 176 799 90 190-40 391-135zm207-115q11 16 2.5 69.5t-28.5 102.5q-34 83-85 124-17 14-26 9t0-24q21-45 44.5-121.5t6.5-98.5q-5-7-15.5-11.5t-27-6-29.5-2.5-35 0-31.5 2-31 3-22.5 2q-6 1-13 1.5t-11 1-8.5 1-7 .5h-10l-3-.5-2-1.5-1.5-3q-6-16 47-40t103-30q46-7 108-1t76 24zm-394-443q0 31 13.5 64t32 58 37.5 46 33 32l13 11-227 224q-40-37-79-75.5t-58-58.5l-19-20q-11-11-25-33-38 59-97.5 102.5t-127.5 63.5-140 23-137.5-21-117.5-65.5-83-113-31-162.5q0-84 28-154t72-116.5 106.5-83 122.5-57 130-34.5 119.5-18.5 99.5-6.5v-127q0-65-21-97-34-53-121-53-6 0-16.5 1t-40.5 12-56 29.5-56 59.5-48 96l-294-27q0-60 22-119t67-113 108-95 151.5-65.5 190.5-24.5q100 0 181 25t129.5 61.5 81 83 45 86 12.5 73.5v589zm-672 21q0 86 70 133 66 44 139 22 84-25 114-123 14-45 14-101v-162q-59 2-111 12t-106.5 33.5-87 71-32.5 114.5z">
</path>
</svg>
</a>
</div>
<div class="text-center pt-10 sm:pt-12 font-light flex items-center justify-center">
<form class="flex flex-col md:flex-row w-3/4 md:w-full max-w-sm md:space-x-3 space-y-3 md:space-y-0 justify-center">
<div class=" relative ">
<input type="text" id="&quot;form-subscribe-Subscribe" class=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="Email"/>
</div>
<button class="flex-shrink-0 px-4 py-2 text-base font-semibold text-white bg-purple-600 rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-200" type="submit">
Subscribe
</button>
</form>
</div>
<div class="text-center pt-10 sm:pt-12 font-light flex items-center justify-center">
copyright by example
</div>
</div>
</footer>
<!-- footer 41 end -->
<!-- start of script section -->
<script type="text/javascript">