subscribe form in Footer

You can use following subscribe form in your tailwind footer section beside contact information such as email address, phone numbers etc and You can also shows community counts.

This tailwind example is contributed by Pagedone, on 02-May-2024. Component is made with Tailwind v3.4. It is responsive.

Footer

Author Pagedone

Tailwind v3.4 3.7k 13

Fork Fullscreen

<section class="pt-16 pb-7 ">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 min-[1130px]:grid-cols-12 gap-8 lg:gap-0 pb-14 border-b-2 border-gray-200">
        <div class="min-[1130px]:col-span-5 col-span-1 w-full min-[1130px]:max-w-full mx-auto">
          <div class="flex flex-col max-sm:items-center gap-8 w-full ">
            <a href="https://pagedone.io/" class="py-1.5 ">
              <svg xmlns="http://www.w3.org/2000/svg" width="166" height="33" viewBox="0 0 166 33" fill="none">
                <path
                  d="M47.7101 24.7231V7H55.0833C55.2568 7 55.4799 7.00821 55.7525 7.02462C56.0251 7.03282 56.2771 7.05744 56.5084 7.09846C57.541 7.25436 58.392 7.59487 59.0611 8.12C59.7386 8.64513 60.2384 9.30974 60.5606 10.1138C60.891 10.9097 61.0562 11.7959 61.0562 12.7723C61.0562 13.7405 60.891 14.6267 60.5606 15.4308C60.2301 16.2267 59.7262 16.8872 59.0487 17.4123C58.3796 17.9374 57.5328 18.2779 56.5084 18.4338C56.2771 18.4667 56.021 18.4913 55.7401 18.5077C55.4675 18.5241 55.2485 18.5323 55.0833 18.5323H50.6965V24.7231H47.7101ZM50.6965 15.7631H54.9594C55.1246 15.7631 55.3105 15.7549 55.517 15.7385C55.7236 15.7221 55.9136 15.6892 56.0871 15.64C56.5827 15.5169 56.971 15.2995 57.2519 14.9877C57.541 14.6759 57.7435 14.3231 57.8591 13.9292C57.983 13.5354 58.045 13.1497 58.045 12.7723C58.045 12.3949 57.983 12.0092 57.8591 11.6154C57.7435 11.2133 57.541 10.8564 57.2519 10.5446C56.971 10.2328 56.5827 10.0154 56.0871 9.89231C55.9136 9.84308 55.7236 9.81436 55.517 9.80615C55.3105 9.78974 55.1246 9.78154 54.9594 9.78154H50.6965V15.7631Z"
                  fill="#111827" />
                <path
                  d="M66.6946 25.0923C65.728 25.0923 64.9101 24.9118 64.241 24.5508C63.5718 24.1815 63.0637 23.6933 62.7168 23.0862C62.378 22.479 62.2087 21.8103 62.2087 21.08C62.2087 20.44 62.3161 19.8656 62.5309 19.3569C62.7457 18.84 63.0761 18.3969 63.5222 18.0277C63.9684 17.6503 64.5466 17.3426 65.2571 17.1046C65.7941 16.9323 66.422 16.7764 67.1407 16.6369C67.8677 16.4974 68.6525 16.3703 69.4952 16.2554C70.3461 16.1323 71.2342 16.001 72.1594 15.8615L71.0937 16.4646C71.102 15.5456 70.8955 14.8687 70.4741 14.4338C70.0528 13.999 69.3423 13.7815 68.3427 13.7815C67.7396 13.7815 67.1572 13.921 66.5955 14.2C66.0337 14.479 65.6413 14.959 65.4182 15.64L62.692 14.7908C63.0224 13.6667 63.6503 12.7641 64.5756 12.0831C65.5091 11.4021 66.7648 11.0615 68.3427 11.0615C69.5323 11.0615 70.5774 11.2544 71.4779 11.64C72.3866 12.0256 73.0599 12.6574 73.4978 13.5354C73.7374 14.0031 73.8819 14.4831 73.9315 14.9754C73.9811 15.4595 74.0059 15.9887 74.0059 16.5631V24.7231H71.3911V21.8431L71.8249 22.3108C71.2218 23.2708 70.5154 23.9764 69.7058 24.4277C68.9045 24.8708 67.9007 25.0923 66.6946 25.0923ZM67.2894 22.7292C67.9668 22.7292 68.5451 22.6103 69.0243 22.3723C69.5034 22.1344 69.8835 21.8431 70.1643 21.4985C70.4535 21.1538 70.6476 20.8297 70.7468 20.5262C70.9037 20.1487 70.9905 19.7179 71.007 19.2338C71.0318 18.7415 71.0442 18.3436 71.0442 18.04L71.9612 18.3108C71.0607 18.4503 70.2883 18.5733 69.6439 18.68C68.9995 18.7867 68.446 18.8892 67.9834 18.9877C67.5207 19.0779 67.1118 19.1805 66.7565 19.2954C66.4096 19.4185 66.1163 19.5621 65.8767 19.7262C65.6371 19.8903 65.4513 20.079 65.3191 20.2923C65.1952 20.5056 65.1332 20.7559 65.1332 21.0431C65.1332 21.3713 65.2158 21.6626 65.381 21.9169C65.5463 22.1631 65.7858 22.36 66.0998 22.5077C66.422 22.6554 66.8185 22.7292 67.2894 22.7292Z"
                  fill="#111827" />
                <path
                  d="M82.6101 31C81.8666 31 81.152 30.8851 80.4663 30.6554C79.7889 30.4256 79.1776 30.0933 78.6323 29.6585C78.0871 29.2318 77.641 28.7149 77.294 28.1077L80.045 26.7538C80.3011 27.2379 80.6605 27.5949 81.1231 27.8246C81.594 28.0626 82.0938 28.1815 82.6225 28.1815C83.2421 28.1815 83.7956 28.0708 84.2831 27.8492C84.7705 27.6359 85.1464 27.3159 85.4107 26.8892C85.6833 26.4708 85.8114 25.9456 85.7949 25.3138V21.5354H86.1666V11.4308H88.7813V25.3631C88.7813 25.6995 88.7648 26.0195 88.7318 26.3231C88.707 26.6349 88.6616 26.9385 88.5955 27.2338C88.3972 28.0954 88.0172 28.801 87.4554 29.3508C86.8936 29.9087 86.1956 30.3231 85.3612 30.5938C84.535 30.8646 83.618 31 82.6101 31ZM82.3499 25.0923C81.119 25.0923 80.045 24.7846 79.128 24.1692C78.211 23.5538 77.5005 22.7169 76.9966 21.6585C76.4926 20.6 76.2407 19.4062 76.2407 18.0769C76.2407 16.7313 76.4926 15.5333 76.9966 14.4831C77.5088 13.4246 78.2316 12.5918 79.1652 11.9846C80.0987 11.3692 81.1975 11.0615 82.4614 11.0615C83.7337 11.0615 84.7994 11.3692 85.6586 11.9846C86.526 12.5918 87.1828 13.4246 87.6289 14.4831C88.075 15.5415 88.2981 16.7395 88.2981 18.0769C88.2981 19.3979 88.075 20.5918 87.6289 21.6585C87.1828 22.7169 86.5177 23.5538 85.6338 24.1692C84.7498 24.7846 83.6552 25.0923 82.3499 25.0923ZM82.8084 22.4338C83.6098 22.4338 84.2541 22.2533 84.7416 21.8923C85.2372 21.5231 85.5966 21.0103 85.8197 20.3538C86.051 19.6974 86.1666 18.9385 86.1666 18.0769C86.1666 17.2072 86.051 16.4482 85.8197 15.8C85.5966 15.1436 85.2455 14.6349 84.7663 14.2738C84.2872 13.9046 83.6676 13.72 82.9075 13.72C82.1062 13.72 81.4453 13.9169 80.9248 14.3108C80.4044 14.6964 80.0202 15.2215 79.7724 15.8862C79.5245 16.5426 79.4006 17.2728 79.4006 18.0769C79.4006 18.8892 79.5204 19.6277 79.76 20.2923C80.0078 20.9487 80.3837 21.4697 80.8877 21.8554C81.3916 22.241 82.0318 22.4338 82.8084 22.4338Z"
                  fill="#111827" />
                <path
                  d="M98.0929 25.0923C96.7381 25.0923 95.5485 24.801 94.5241 24.2185C93.4997 23.6359 92.6983 22.8277 92.12 21.7938C91.55 20.76 91.265 19.5703 91.265 18.2246C91.265 16.7723 91.5458 15.5128 92.1076 14.4462C92.6694 13.3713 93.4501 12.5385 94.4497 11.9477C95.4493 11.3569 96.6059 11.0615 97.9195 11.0615C99.3074 11.0615 100.485 11.3856 101.451 12.0338C102.426 12.6738 103.149 13.5805 103.62 14.7538C104.091 15.9272 104.268 17.3097 104.153 18.9015H101.191V17.8185C101.183 16.3744 100.927 15.32 100.423 14.6554C99.9187 13.9908 99.1256 13.6585 98.0434 13.6585C96.8207 13.6585 95.912 14.0359 95.3171 14.7908C94.7223 15.5374 94.4249 16.6328 94.4249 18.0769C94.4249 19.4226 94.7223 20.4646 95.3171 21.2031C95.912 21.9415 96.7794 22.3108 97.9195 22.3108C98.6547 22.3108 99.2867 22.1508 99.8154 21.8308C100.352 21.5026 100.765 21.0308 101.055 20.4154L104.004 21.3015C103.492 22.4995 102.699 23.4308 101.625 24.0954C100.559 24.76 99.3817 25.0923 98.0929 25.0923ZM93.4831 18.9015V16.6615H102.69V18.9015H93.4831Z"
                  fill="#111827" />
                <path
                  d="M112.035 25.0923C110.805 25.0923 109.731 24.7846 108.814 24.1692C107.897 23.5538 107.186 22.7169 106.682 21.6585C106.178 20.6 105.926 19.4062 105.926 18.0769C105.926 16.7313 106.178 15.5333 106.682 14.4831C107.194 13.4246 107.917 12.5918 108.851 11.9846C109.784 11.3692 110.883 11.0615 112.147 11.0615C113.419 11.0615 114.485 11.3692 115.344 11.9846C116.212 12.5918 116.868 13.4246 117.314 14.4831C117.761 15.5415 117.984 16.7395 117.984 18.0769C117.984 19.3979 117.761 20.5918 117.314 21.6585C116.868 22.7169 116.203 23.5538 115.319 24.1692C114.435 24.7846 113.341 25.0923 112.035 25.0923ZM112.494 22.4338C113.295 22.4338 113.94 22.2533 114.427 21.8923C114.923 21.5231 115.282 21.0103 115.505 20.3538C115.737 19.6974 115.852 18.9385 115.852 18.0769C115.852 17.2072 115.737 16.4482 115.505 15.8C115.282 15.1436 114.931 14.6349 114.452 14.2738C113.973 13.9046 113.353 13.72 112.593 13.72C111.792 13.72 111.131 13.9169 110.61 14.3108C110.09 14.6964 109.706 15.2215 109.458 15.8862C109.21 16.5426 109.086 17.2728 109.086 18.0769C109.086 18.8892 109.206 19.6277 109.446 20.2923C109.693 20.9487 110.069 21.4697 110.573 21.8554C111.077 22.241 111.717 22.4338 112.494 22.4338ZM115.852 24.7231V15.3938H115.48V7H118.492V24.7231H115.852Z"
                  fill="#111827" />
                <path
                  d="M127.629 25.0923C126.291 25.0923 125.122 24.7928 124.122 24.1938C123.123 23.5949 122.346 22.7703 121.793 21.72C121.247 20.6615 120.975 19.4472 120.975 18.0769C120.975 16.6821 121.256 15.4595 121.817 14.4092C122.379 13.359 123.16 12.5385 124.159 11.9477C125.159 11.3569 126.316 11.0615 127.629 11.0615C128.976 11.0615 130.149 11.361 131.149 11.96C132.148 12.559 132.925 13.3877 133.478 14.4462C134.032 15.4964 134.308 16.7067 134.308 18.0769C134.308 19.4554 134.028 20.6738 133.466 21.7323C132.912 22.7826 132.136 23.6072 131.136 24.2062C130.137 24.7969 128.968 25.0923 127.629 25.0923ZM127.629 22.3108C128.819 22.3108 129.703 21.9169 130.281 21.1292C130.859 20.3415 131.149 19.3241 131.149 18.0769C131.149 16.7887 130.855 15.7631 130.269 15C129.682 14.2287 128.802 13.8431 127.629 13.8431C126.828 13.8431 126.167 14.0236 125.646 14.3846C125.134 14.7374 124.754 15.2338 124.506 15.8738C124.259 16.5056 124.135 17.24 124.135 18.0769C124.135 19.3651 124.428 20.3949 125.014 21.1662C125.609 21.9292 126.481 22.3108 127.629 22.3108Z"
                  fill="#111827" />
                <path
                  d="M146.048 24.7231V18.3231C146.048 17.9046 146.019 17.441 145.961 16.9323C145.903 16.4236 145.767 15.9354 145.552 15.4677C145.346 14.9918 145.032 14.6021 144.61 14.2985C144.197 13.9949 143.635 13.8431 142.925 13.8431C142.545 13.8431 142.169 13.9046 141.797 14.0277C141.426 14.1508 141.087 14.3641 140.781 14.6677C140.484 14.9631 140.244 15.3733 140.062 15.8985C139.881 16.4154 139.79 17.08 139.79 17.8923L138.018 17.1415C138.018 16.0092 138.237 14.9836 138.675 14.0646C139.121 13.1456 139.773 12.4154 140.632 11.8738C141.492 11.3241 142.549 11.0492 143.805 11.0492C144.796 11.0492 145.614 11.2133 146.258 11.5415C146.903 11.8697 147.415 12.2882 147.795 12.7969C148.175 13.3056 148.456 13.8472 148.638 14.4215C148.819 14.9959 148.935 15.5415 148.985 16.0585C149.042 16.5672 149.071 16.9815 149.071 17.3015V24.7231H146.048ZM136.766 24.7231V11.4308H139.43V15.5538H139.79V24.7231H136.766Z"
                  fill="#111827" />
                <path
                  d="M157.924 25.0923C156.569 25.0923 155.379 24.801 154.355 24.2185C153.331 23.6359 152.529 22.8277 151.951 21.7938C151.381 20.76 151.096 19.5703 151.096 18.2246C151.096 16.7723 151.377 15.5128 151.939 14.4462C152.5 13.3713 153.281 12.5385 154.281 11.9477C155.28 11.3569 156.437 11.0615 157.75 11.0615C159.138 11.0615 160.316 11.3856 161.282 12.0338C162.257 12.6738 162.98 13.5805 163.451 14.7538C163.922 15.9272 164.099 17.3097 163.984 18.9015H161.022V17.8185C161.014 16.3744 160.758 15.32 160.254 14.6554C159.75 13.9908 158.957 13.6585 157.874 13.6585C156.652 13.6585 155.743 14.0359 155.148 14.7908C154.553 15.5374 154.256 16.6328 154.256 18.0769C154.256 19.4226 154.553 20.4646 155.148 21.2031C155.743 21.9415 156.61 22.3108 157.75 22.3108C158.486 22.3108 159.118 22.1508 159.646 21.8308C160.183 21.5026 160.596 21.0308 160.886 20.4154L163.835 21.3015C163.323 22.4995 162.53 23.4308 161.456 24.0954C160.39 24.76 159.213 25.0923 157.924 25.0923ZM153.314 18.9015V16.6615H162.521V18.9015H153.314Z"
                  fill="#111827" />
                <path
                  d="M25.3902 11.8941C26.0296 12.5063 26.0458 13.5149 25.4264 14.1468L19.6357 20.054C19.0162 20.686 17.9956 20.702 17.3562 20.0898C16.7167 19.4776 16.7005 18.469 17.32 17.8371L23.1106 11.9299C23.7301 11.2979 24.7507 11.2819 25.3902 11.8941Z"
                  fill="#075985" />
                <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M0.988159 4.54673C0.988159 2.03564 3.04801 0 5.58896 0H22.4006V0.00124069C29.8074 0.0998525 35.7811 6.06429 35.7811 13.4075C35.7811 20.8123 29.7069 26.8151 22.2141 26.8151C19.5425 26.8151 17.0512 26.0519 14.9514 24.7342L7.53733 31.9057C5.09801 34.2652 0.988159 32.5573 0.988159 29.1841V4.54673ZM12.4394 22.7055C10.0911 20.295 8.64709 17.0179 8.64709 13.4075C8.64709 12.5277 9.36884 11.8144 10.2592 11.8144C11.1495 11.8144 11.8712 12.5277 11.8712 13.4075C11.8712 19.0526 16.5019 23.6288 22.2141 23.6288C27.9263 23.6288 32.5569 19.0526 32.5569 13.4075C32.5569 7.76248 27.9263 3.18626 22.2141 3.18626H5.58896C4.82866 3.18626 4.21231 3.79536 4.21231 4.54673V29.1841C4.21231 29.7351 4.88363 30.014 5.28209 29.6286L12.4394 22.7055Z"
                  fill="#075985" />
              </svg>
            </a>
           <div class="flex flex-col min-[470px]:flex-row items-center gap-3 w-full">
            <div class="relative  text-gray-500 focus-within:text-gray-900 max-sm:w-full">
              <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none ">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                  <path
                    d="M2.95739 5.61072L6.47281 7.80147C8.18826 8.87052 9.04599 9.40504 9.99991 9.40489C10.9538 9.40474 11.8114 8.86994 13.5265 7.80035L17.0509 5.60245M9.16667 16.6663H10.8333C13.976 16.6663 15.5474 16.6663 16.5237 15.69C17.5 14.7137 17.5 13.1424 17.5 9.99967C17.5 6.85698 17.5 5.28563 16.5237 4.30932C15.5474 3.33301 13.976 3.33301 10.8333 3.33301H9.16667C6.02397 3.33301 4.45262 3.33301 3.47631 4.30932C2.5 5.28563 2.5 6.85698 2.5 9.99967C2.5 13.1424 2.5 14.7137 3.47631 15.69C4.45262 16.6663 6.02397 16.6663 9.16667 16.6663Z"
                    stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </div>
              <input type="text" id="default-search"
                class="block w-full max-sm:min-w-full sm:max-w-xs pr-4 pl-12 py-2.5 text-base font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none leading-relaxed"
                placeholder="mail@pagedone.com">
            </div>
            <button
              class="py-3 px-7 rounded-lg bg-sky-800 max-[470px]:w-full text-base font-semibold text-white transition-all duration-500 hover:bg-sky-900">Subscribe</button>
           </div>
            <div class="flex items-center ">
              <div class="flex items-center">
                <img src="https://pagedone.io/asset/uploads/1711781258.png" alt="" class="relative ">
                <img src="https://pagedone.io/asset/uploads/1711781273.png" alt="" class="relative -translate-x-2 z-10">
                <img src="https://pagedone.io/asset/uploads/1711781291.png" alt="" class="relative -translate-x-4 z-20">
              </div>
              <p class="text-gray-500 text-base font-normal"><span class="text-gray-900 font-medium">1K </span>Members
                Join</p>
            </div>
          </div>
        </div>
        <div class="min-[1130px]:col-span-7 max-[1130px]:pt-10 lg:pl-14 col-span-1 w-full min-[1130px]:max-w-full mx-auto flex flex-col sm:flex-row justify-between gap-6 ">
          <div class="">
            <h6 class="text-lg font-medium text-gray-900 mb-7 max-sm:text-center">Address</h6>
            <ul class="flex flex-col gap-6">
              <li><p href="javascript:;"
                  class="text-base font-normal max-sm:text-center  text-gray-600">61-A, Elm street, Gujarat, India.</p>
              </li>
              
            </ul>
          </div>
          <div class="">
            <h6 class="text-lg font-medium text-gray-900 mb-7 max-sm:text-center">Contact</h6>
            <ul class="flex flex-col gap-6">
              <li><p href="javascript:;"
                  class="text-base font-normal max-sm:text-center text-gray-600 whitespace-nowrap">+91 945 658 3256</p></li>
              <li><p href="javascript:;"
                  class="text-base font-normal max-sm:text-center text-gray-600 whitespace-nowrap ">support@pagedone.com</p></li>
              
            </ul>
          </div>
          <div class="">
            <h6 class="text-lg font-medium text-gray-900 mb-7 max-sm:text-center">Office</h6>
            <ul class="flex flex-col gap-6">
              <li><p href="javascript:;"
                  class="text-base font-normal max-sm:text-center text-gray-600 whitespace-nowrap ">Monday - Friday</p>
              </li>
              <li><p href="javascript:;"
                  class="text-base font-normal max-sm:text-center text-gray-600 whitespace-nowrap">9AM - 7PM</p></li>
             
            </ul>
          </div>
        </div>
      </div>
      <div class="flex flex-col-reverse gap-5 md:flex-row items-center first-letter:items-center justify-between pt-7">
        <p class="font-normal text-sm text-gray-400">©<a href="https://pagedone.io/">pagedone</a>2023, All rights reserved.</p>
        <ul class="flex items-center gap-9">
          <li><a href="javascript:;"
              class="text-gray-500 text-sm font-normal transition-all duration-300 hover:text-indigo-600 focus-within:text-indigo-600 focus-within:outline-0">Terms</a>
          </li>
          <li><a href="javascript:;"
              class="text-gray-500 text-sm font-normal transition-all duration-300 hover:text-indigo-600 focus-within:text-indigo-600 focus-within:outline-0">Privacy</a>
          </li>
          <li><a href="javascript:;"
              class="text-gray-500 text-sm font-normal transition-all duration-300 hover:text-indigo-600 focus-within:text-indigo-600 focus-within:outline-0">Cookies</a>
          </li>
        </ul>
        <div class="flex items-center gap-4">
          <button
            class="w-9 h-9 flex items-center relative border border-gray-300 overflow-hidden justify-center rounded-full bg-white shadow-sm shadow-gray-200 group transition-all duration-300 focus-within:outline-0">
            <svg
              class="fill-gray-900 relative z-10 transition-all duration-300 group-hover:fill-white group-focus-within:fill-white"
              xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 50 50" fill="none">
              <path
                d="M29.3522 14.55C29.3522 18.4089 27.8124 22.1097 25.0717 24.8384C22.3309 27.5671 18.6136 29.1 14.7376 29.1C10.8616 29.1 7.14432 27.5671 4.40356 24.8384C1.66279 22.1097 0.123047 18.4089 0.123047 14.55C0.123047 10.6911 1.66279 6.99025 4.40356 4.2616C7.14432 1.53294 10.8616 0 14.7376 0C18.6136 0 22.3309 1.53294 25.0717 4.2616C27.8124 6.99025 29.3522 10.6911 29.3522 14.55Z"
                fill=""></path>
              <path
                d="M49.7196 35.445C49.7196 37.3564 49.3415 39.2491 48.6068 41.015C47.8721 42.7809 46.7952 44.3854 45.4376 45.737C44.0801 47.0885 42.4684 48.1606 40.6947 48.8921C38.921 49.6235 37.0199 50 35.1 50C31.2227 50 27.5041 48.4665 24.7624 45.737C22.0207 43.0074 20.4805 39.3052 20.4805 35.445C20.4805 31.5848 22.0207 27.8827 24.7624 25.1531C27.5041 22.4235 31.2227 20.89 35.1 20.89C37.0199 20.89 38.921 21.2665 40.6947 21.9979C42.4684 22.7294 44.0801 23.8015 45.4376 25.1531C46.7952 26.5046 47.8721 28.1092 48.6068 29.8751C49.3415 31.641 49.7196 33.5336 49.7196 35.445Z"
                fill=""></path>
              <path opacity="0.05" fill-rule="evenodd" clip-rule="evenodd"
                d="M0.176758 15.795C0.40376 18.5441 1.40597 21.1727 3.06724 23.3762C4.72852 25.5797 6.98086 27.2679 9.56328 28.2451C12.1457 29.2224 14.9525 29.4487 17.6584 28.8978C20.3643 28.347 22.8585 27.0415 24.8521 25.1327C26.8457 23.2239 28.257 20.7899 28.9225 18.1127C29.5879 15.4356 29.4804 12.6248 28.6122 10.0062C27.744 7.38765 26.1508 5.06839 24.0171 3.3172C21.8835 1.56601 19.2967 0.454576 16.5566 0.111694C12.8361 1.35488 9.43753 3.4061 6.60533 6.11786C3.77313 8.82962 1.57765 12.1346 0.176758 15.795Z"
                fill=""></path>
              <path opacity="0.05" fill-rule="evenodd" clip-rule="evenodd"
                d="M49.6811 34.4C49.4902 31.6174 48.5055 28.9476 46.8434 26.7064C45.1813 24.4652 42.9113 22.7464 40.302 21.7534C37.6928 20.7603 34.8534 20.5345 32.1197 21.1027C29.386 21.6708 26.8724 23.0092 24.8762 24.9594C22.88 26.9097 21.4848 29.3902 20.8555 32.1076C20.2263 34.825 20.3893 37.6656 21.3254 40.2933C22.2615 42.9211 23.9315 45.226 26.1377 46.9356C28.344 48.6451 30.9943 49.6877 33.7751 49.94C37.394 48.6528 40.6902 46.5967 43.4363 43.9135C46.1824 41.2303 48.313 37.9839 49.6811 34.3983V34.4Z"
                fill=""></path>
              <path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd"
                d="M0.860352 19.1216C1.62798 21.4673 2.97863 23.5801 4.78599 25.2626C6.59336 26.9451 8.79838 28.1422 11.1948 28.742C13.5913 29.3418 16.1009 29.3246 18.4889 28.6922C20.877 28.0597 23.0654 26.8326 24.8496 25.1257C26.6337 23.4187 27.9554 21.2876 28.6908 18.9317C29.4263 16.5758 29.5516 14.072 29.0549 11.6546C28.5583 9.23718 27.456 6.98506 25.8511 5.10889C24.2462 3.23271 22.1911 1.79377 19.8781 0.926636C15.32 1.8752 11.1204 4.08384 7.75796 7.30082C4.3955 10.5178 2.00549 14.6137 0.860352 19.1216Z"
                fill=""></path>
              <path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd"
                d="M49.0178 30.98C48.2615 28.6066 46.9097 26.466 45.0911 24.7619C43.2726 23.0578 41.0477 21.8469 38.6282 21.2444C36.2088 20.6419 33.6752 20.6678 31.2686 21.3198C28.8621 21.9717 26.6625 23.2279 24.8793 24.9689C23.0961 26.7098 21.7885 28.8777 21.081 31.266C20.3735 33.6544 20.2896 36.1839 20.8374 38.6138C21.3851 41.0437 22.5462 43.2932 24.2101 45.1483C25.8741 47.0033 27.9856 48.4021 30.3437 49.2117C34.8435 48.203 38.9734 45.9634 42.2714 42.7435C45.5694 39.5236 47.9054 35.4505 49.0178 30.98Z"
                fill=""></path>
              <path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd"
                d="M1.39746 20.5016C2.34836 22.6419 3.80103 24.522 5.63274 25.9832C7.46445 27.4444 9.62136 28.4437 11.9212 28.8967C14.2211 29.3497 16.5963 29.243 18.8462 28.5857C21.0961 27.9284 23.1545 26.7397 24.8475 25.1203C26.5406 23.5008 27.8185 21.498 28.5733 19.2811C29.328 17.0643 29.5375 14.6985 29.184 12.3838C28.8304 10.069 27.9243 7.8733 26.5421 5.98211C25.1599 4.09093 23.3423 2.55987 21.2428 1.51831C16.3875 2.27323 11.881 4.49834 8.33208 7.89315C4.78311 11.288 2.36261 15.6889 1.39746 20.5016Z"
                fill=""></path>
              <path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd"
                d="M48.4788 29.5717C47.5328 27.4066 46.0747 25.5033 44.2299 24.0253C42.385 22.5473 40.2086 21.5387 37.8874 21.0863C35.5663 20.6338 33.1699 20.7509 30.9041 21.4276C28.6383 22.1043 26.5708 23.3203 24.8792 24.9712C23.1877 26.622 21.9226 28.6584 21.1927 30.9054C20.4628 33.1524 20.2899 35.5427 20.6889 37.8712C21.0878 40.1996 22.0467 42.3965 23.4831 44.2731C24.9195 46.1497 26.7905 47.65 28.9354 48.645C33.7482 47.8281 38.1973 45.5648 41.6891 42.157C45.1809 38.7492 47.5494 34.3589 48.4788 29.5717Z"
                fill=""></path>
              <path
                d="M48.0711 25.1084C48.0711 28.1347 47.4724 31.1313 46.3092 33.9273C45.1459 36.7232 43.4409 39.2637 41.2914 41.4036C39.142 43.5436 36.5903 45.241 33.7819 46.3992C30.9735 47.5573 27.9635 48.1534 24.9238 48.1534C21.884 48.1534 18.874 47.5573 16.0656 46.3992C13.2573 45.241 10.7055 43.5436 8.55608 41.4036C6.40665 39.2637 4.70162 36.7232 3.53836 33.9273C2.37509 31.1313 1.77637 28.1347 1.77637 25.1084C1.77637 22.082 2.37509 19.0854 3.53836 16.2894C4.70162 13.4935 6.40665 10.953 8.55608 8.81308C10.7055 6.67315 13.2573 4.97567 16.0656 3.81755C18.874 2.65943 21.884 2.06335 24.9238 2.06335C27.9635 2.06335 30.9735 2.65943 33.7819 3.81755C36.5903 4.97567 39.142 6.67315 41.2914 8.81308C43.4409 10.953 45.1459 13.4935 46.3092 16.2894C47.4724 19.0854 48.0711 22.082 48.0711 25.1084Z"
                fill=""></path>
              <path class="fill-white group-hover:fill-sky-500 group-focus-within:fill-sky-500" fill-rule="evenodd"
                clip-rule="evenodd"
                d="M18.4151 24.3084C17.4797 23.6934 16.6991 22.8709 16.1343 21.905C15.5889 20.8846 15.3197 19.7396 15.3534 18.5834C15.3121 17.116 15.8134 15.6849 16.7616 14.5634C17.7471 13.4371 19.0136 12.5918 20.4324 12.1134C21.9754 11.5688 23.6012 11.2954 25.2377 11.305C26.3084 11.2949 27.378 11.3769 28.4346 11.55C29.1909 11.6667 29.9337 11.8582 30.6521 12.1217C31.3117 12.3447 31.9072 12.7245 32.3873 13.2284C32.7411 13.6429 32.9315 14.172 32.9229 14.7167C32.9355 14.9997 32.8922 15.2823 32.7954 15.5486C32.6987 15.8148 32.5504 16.0594 32.359 16.2684C32.1778 16.4609 31.958 16.6131 31.7139 16.7147C31.4697 16.8164 31.2068 16.8654 30.9424 16.8584C30.5786 16.8554 30.2196 16.7747 29.8895 16.6217C29.0761 16.258 28.2381 15.9517 27.3818 15.705C26.5935 15.4974 25.7809 15.3965 24.9657 15.405C23.9033 15.366 22.8522 15.6345 21.939 16.1784C21.5537 16.4122 21.2383 16.7452 21.0258 17.1425C20.8133 17.5397 20.7115 17.9867 20.731 18.4367C20.7254 19.0275 20.9505 19.5972 21.3584 20.025C21.8431 20.5276 22.416 20.9371 23.0486 21.2334C23.7572 21.5845 24.8139 22.05 26.2188 22.63C26.3744 22.6792 26.5261 22.74 26.6726 22.8117C28.0436 23.3534 29.3581 24.0283 30.597 24.8267C31.5755 25.464 32.4006 26.3098 33.013 27.3034C33.6161 28.3476 33.9181 29.5382 33.8857 30.7434C33.9363 32.2189 33.513 33.672 32.6776 34.89C31.827 36.0433 30.6503 36.9157 29.2989 37.395C27.6702 37.9763 25.9491 38.2564 24.2199 38.2217C21.8437 38.3048 19.4788 37.8578 17.2972 36.9134C16.7395 36.6653 16.2505 36.2855 15.8723 35.8067C15.5583 35.368 15.3955 34.8392 15.4085 34.3C15.3929 34.0157 15.4393 33.7313 15.5444 33.4666C15.6495 33.2018 15.8109 32.9631 16.0175 32.7667C16.4504 32.388 17.0125 32.1899 17.5875 32.2134C18.2282 32.2221 18.8576 32.3838 19.4229 32.685C20.1259 33.0361 20.6804 33.2995 21.0864 33.475C21.5501 33.6689 22.0304 33.8207 22.5214 33.9284C23.1268 34.061 23.7453 34.1248 24.3651 34.1184C25.4611 34.1965 26.5518 33.9061 27.4635 33.2934C27.8048 33.0266 28.0776 32.6825 28.2592 32.2895C28.4408 31.8964 28.5261 31.4659 28.508 31.0334C28.509 30.4201 28.275 29.8297 27.854 29.3834C27.2975 28.8095 26.6461 28.3359 25.9285 27.9834C25.0798 27.5367 23.8862 26.9923 22.3478 26.35C20.972 25.8024 19.6545 25.1184 18.4151 24.3084Z"
                fill=""></path>
              <defs>
                <linearGradient id="paint0_linear_7092_54073" x1="12.4584" y1="0.176667" x2="17.0069" y2="28.9249"
                  gradientUnits="userSpaceOnUse">
                  <stop offset="0.012" stop-color="#00B7F0"></stop>
                  <stop offset="0.339" stop-color="#009DE5"></stop>
                  <stop offset="0.755" stop-color="#0082D9"></stop>
                  <stop offset="1" stop-color="#0078D4"></stop>
                </linearGradient>
                <linearGradient id="paint1_linear_7092_54073" x1="22.446" y1="42.7417" x2="47.7384" y2="28.124"
                  gradientUnits="userSpaceOnUse">
                  <stop stop-color="#0078D4"></stop>
                  <stop offset="0.37" stop-color="#007AD5"></stop>
                  <stop offset="0.573" stop-color="#0082D9"></stop>
                  <stop offset="0.735" stop-color="#0090DF"></stop>
                  <stop offset="0.875" stop-color="#00A3E7"></stop>
                  <stop offset="1" stop-color="#00BCF2"></stop>
                </linearGradient>
                <linearGradient id="paint2_linear_7092_54073" x1="15.8904" y1="9.48169" x2="38.9459" y2="49.4589"
                  gradientUnits="userSpaceOnUse">
                  <stop stop-color="#00B7F0"></stop>
                  <stop offset="1" stop-color="#007CC1"></stop>
                </linearGradient>
              </defs>
            </svg>
            <div
              class="absolute top-full left-0 w-full h-full rounded-full bg-sky-500 z-0 transition-all duration-500 group-hover:top-0 group-focus-within:top-0">
            </div>
          </button>

</div>
      </div>
    </div>
  </section>

Related Examples

Footer with mobile accordion
A modern dark-themed footer component built with Tailwind CSS, featuring a responsive 5-column grid layout for desktop that transforms into an accordion menu on mobile devices. Perfect for beverage, e-commerce, or corporate websites, it includes organized navigation categories, hover effects on links, social media integration, and a clean copyright section - all styled with a professional stone-gray color scheme.

Maxim

1 year ago

2.2k
Creative with CTA buttons
Use Below tailwind css footer example with CTA buttons and site links.

Pagedone

2 years ago

2.8k
Simple Footer 3

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.4k
Responsive Website Footer
A modern and clean website footer component with sections for branding, navigation links, social media icons, and copyright text. Designed to be fully responsive and suitable for portfolios, business websites, and web applications.

Sudip chaudhary

9 months ago

811
SaaS Footer
SaaS footer built with pure HTML and Tailwind CSS

JUGENDRA GANGWAR

2 months ago

106
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Ayyamperumal S

1 year ago

2.6k
Footer with 3 sections

Mr Robot

3 years ago

14k
Simple centered footer
Use this example for simple footer with horizontal sitemap links, brand logo, and social media accounts.This example can also be used as a tailwind sticky footer.

Pagedone

2 years ago

3.5k
footer
footer

Anonymous

1 year ago

2.2k
Footer - Htmlwind
Simple centerd footer

Htmlwind

1 year ago

1.1k
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Abdul Baset Bappy

1 year ago

1.5k
Responsive Footer
This a full responsive footer made with tailwind

Pape Toulé Yade

2 years ago

2.7k