VibeCoderzVibeCoderz
Telegram
All Prompts
Responsive Multi-column Footer with Tailwind CSS preview
footertailwindresponsivectanavigationdark-thememulticolumnui-component

Responsive Multi-column Footer with Tailwind CSS

Адаптивный многоколоночный футер на Tailwind CSS. Темная тема, лого, CTA, ссылки. Для лендингов, e-commerce, SaaS.

Prompt

<footer class="max-w-7xl sm:px-6 mt-10 mr-auto mb-12 ml-auto pr-4 pl-4">
  <div class="relative sm:mt-12 overflow-hidden shadow-[0px_0px_0px_1px_rgba(255,255,255,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.3),0px_12px_24px_-12px_rgba(0,0,0,0.5)] bg-black/80 border-white/10 border rounded-[40px] backdrop-blur">
    <div class="absolute inset-0 pointer-events-none">
      <div class="absolute inset-0 bg-gradient-to-b from-white/10 via-white/5 to-transparent"></div>
    </div>

    <div class="relative sm:p-8 pt-6 pr-6 pb-6 pl-6">
      <div class="grid lg:grid-cols-4 gap-10">
        <!-- Brand / intro -->
        <div class="space-y-4">
          <div class="flex items-center gap-2">
            
            <svg width="92" height="36" viewBox="0 0 92 36" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
<path d="M18.8834 4.66666C17.4168 4.66666 16.2168 5.86666 16.2168 7.33332V11.56L18.8834 14.2267L21.5501 11.56V7.33332C21.5501 6.59999 21.2568 5.93332 20.7634 5.43999C20.2834 4.95999 19.6168 4.66666 18.8834 4.66666Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" class=""></path>
<path d="M16.2168 24.44V28.6666C16.2168 30.1333 17.4168 31.3333 18.8834 31.3333C20.3501 31.3333 21.5501 30.1333 21.5501 28.6666V24.44L18.8834 21.7733L16.2168 24.44Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" class=""></path>
<path d="M12.4434 15.3333H8.21675C6.75008 15.3333 5.55008 16.5333 5.55008 18C5.55008 19.4667 6.75008 20.6667 8.21675 20.6667H12.4434L15.1101 18L12.4434 15.3333Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" class=""></path>
<path d="M29.5502 15.3333H25.3235L22.6569 18L25.3235 20.6667H29.5502C30.2835 20.6667 30.9502 20.3733 31.4302 19.88C31.9235 19.4 32.2169 18.7333 32.2169 18C32.2169 16.5333 31.0169 15.3333 29.5502 15.3333Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" class=""></path>
<path d="M28.3101 23.6533L22.6568 18L18.8834 21.7733L24.5368 27.4267C25.5768 28.4667 27.2701 28.4667 28.3101 27.4267C29.3501 26.3867 29.3501 24.6933 28.3101 23.6533Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" class=""></path>
<path d="M13.2301 8.57329C12.7101 8.05329 12.0301 7.78662 11.3367 7.78662C10.6567 7.78662 9.97673 8.05329 9.45673 8.57329C8.41673 9.61329 8.41673 11.3066 9.45673 12.3466L15.1101 18L18.8834 14.2266L13.2301 8.57329Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" class=""></path>
<path d="M9.45673 27.4266C8.41673 26.3866 8.41673 24.6933 9.45673 23.6533L24.5367 8.5733C25.5767 7.5333 27.2701 7.5333 28.3101 8.5733C29.3501 9.6133 29.3501 11.3066 28.3101 12.3466L13.2301 27.4266C12.1901 28.4666 10.4967 28.4666 9.45673 27.4266Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" class=""></path>
<path d="M84.6756 27C84.3509 27 83.9855 26.9675 83.5796 26.9025C83.1899 26.8376 82.8164 26.7564 82.4591 26.659C82.1181 26.5615 81.8502 26.456 81.6554 26.3423C81.5417 26.2774 81.4524 26.2124 81.3874 26.1475C81.3387 26.0663 81.3144 25.9364 81.3144 25.7578L81.1926 21.9337C81.1926 21.6089 81.2981 21.4465 81.5092 21.4465C81.6878 21.4465 81.8096 21.5927 81.8746 21.885L82.0938 22.8105C82.6459 25.1326 83.677 26.2936 85.1871 26.2936C85.9991 26.2936 86.6405 26.0257 87.1114 25.4898C87.5985 24.9377 87.8421 24.1664 87.8421 23.1759C87.8421 22.2178 87.5904 21.3247 87.087 20.4966C86.5999 19.6685 85.8123 18.8484 84.7244 18.0365C83.5227 17.1759 82.6459 16.3478 82.0938 15.5521C81.5417 14.7402 81.2656 13.8796 81.2656 12.9702C81.2656 11.7686 81.6797 10.8106 82.5079 10.0961C83.3522 9.36536 84.424 9 85.723 9C86.2102 9 86.6811 9.05683 87.1357 9.1705C87.5904 9.28417 87.9639 9.44655 88.2562 9.65764C88.3536 9.7226 88.4267 9.79567 88.4754 9.87686C88.5403 9.95805 88.5728 10.0636 88.5728 10.1935L88.6459 13.8714C88.6459 14.1475 88.5403 14.2855 88.3292 14.2855C88.1831 14.2855 88.0775 14.1718 88.0126 13.9445L87.8421 13.3356C87.4848 12.0852 87.1114 11.1759 86.7217 10.6076C86.3482 10.023 85.8042 9.73072 85.0897 9.73072C84.3915 9.73072 83.8313 9.95805 83.4091 10.4127C83.0031 10.8674 82.8001 11.5088 82.8001 12.3369C82.8001 13.0352 83.0275 13.7009 83.4821 14.3342C83.9368 14.9675 84.7325 15.7388 85.8692 16.6482C87.087 17.6387 87.972 18.5967 88.5241 19.5223C89.0924 20.4316 89.3766 21.4059 89.3766 22.4452C89.3766 23.3545 89.1736 24.1502 88.7677 24.8322C88.3617 25.5142 87.8015 26.05 87.087 26.4398C86.3888 26.8132 85.585 27 84.6756 27Z" fill="currentColor" class=""></path>
<path d="M75.2893 27C74.4124 27 73.633 26.797 72.951 26.3911C72.2852 25.9689 71.7656 25.3924 71.3921 24.6617C71.0186 23.9147 70.8319 23.0622 70.8319 22.1042V10.8512C70.8319 10.5102 70.7751 10.2828 70.6614 10.1692C70.564 10.0555 70.3448 9.96619 70.0038 9.90124L69.4435 9.80381C69.2324 9.75509 69.1269 9.65766 69.1269 9.51152C69.1269 9.3329 69.2487 9.24359 69.4923 9.24359H73.9496C74.1932 9.24359 74.315 9.34102 74.315 9.53588C74.315 9.68202 74.2257 9.77133 74.047 9.80381L73.3894 9.90124C73.0646 9.94995 72.8454 10.0393 72.7318 10.1692C72.6181 10.2991 72.5613 10.5345 72.5613 10.8755V22.1286C72.5613 23.3627 72.8373 24.3207 73.3894 25.0027C73.9415 25.6847 74.7128 26.0257 75.7033 26.0257C76.7101 26.0257 77.4895 25.6847 78.0416 25.0027C78.5937 24.3207 78.8698 23.3627 78.8698 22.1286V11.3627C78.8698 10.4858 78.5937 9.99866 78.0416 9.90124L77.384 9.80381C77.2054 9.77133 77.1161 9.68202 77.1161 9.53588C77.1161 9.34102 77.2378 9.24359 77.4814 9.24359H80.9889C81.2324 9.24359 81.3542 9.3329 81.3542 9.51152C81.3542 9.65766 81.2487 9.75509 81.0376 9.80381L80.4774 9.90124C79.9253 9.99866 79.6492 10.4777 79.6492 11.3383V22.1042C79.6492 23.5819 79.2514 24.7673 78.4557 25.6603C77.66 26.5534 76.6046 27 75.2893 27Z" fill="currentColor" class=""></path>
<path d="M58.2703 26.7808C58.108 26.7808 57.9943 26.7483 57.9293 26.6834C57.8644 26.6184 57.8319 26.5534 57.8319 26.4885C57.8319 26.3261 57.9537 26.2206 58.1973 26.1719L58.587 26.0988C59.1066 26.0014 59.5126 25.8471 59.8048 25.636C60.1134 25.4087 60.3732 25.0514 60.5843 24.5643L63.02 18.7673C63.1012 18.5886 63.1499 18.41 63.1661 18.2314C63.1986 18.0365 63.1661 17.8336 63.0687 17.6225L60.0241 10.8755C59.8617 10.502 59.6831 10.2504 59.4882 10.1205C59.3096 9.99055 59.1147 9.90936 58.9036 9.87688L58.4408 9.80381C58.181 9.75509 58.0511 9.64954 58.0511 9.48716C58.0511 9.32478 58.1891 9.24359 58.4652 9.24359H62.7521C63.0444 9.24359 63.1905 9.32478 63.1905 9.48716C63.1905 9.64954 63.0525 9.75509 62.7764 9.80381L62.3136 9.87688C62.0376 9.92559 61.8427 10.023 61.7291 10.1692C61.6316 10.3153 61.656 10.5508 61.8021 10.8755L64.1161 16.0636C64.181 16.2098 64.2541 16.2828 64.3353 16.2828C64.4327 16.2828 64.5139 16.2098 64.5789 16.0636L66.6736 11.1191C66.8197 10.7619 66.8684 10.502 66.8197 10.3397C66.771 10.161 66.6086 10.0393 66.3326 9.97431L65.6506 9.82816C65.3745 9.76321 65.2365 9.64954 65.2365 9.48716C65.2365 9.32478 65.3826 9.24359 65.6749 9.24359H69.4016C69.5802 9.24359 69.6939 9.27607 69.7426 9.34102C69.8075 9.38973 69.84 9.45469 69.84 9.53588C69.84 9.69826 69.7182 9.80381 69.4747 9.85252L69.0849 9.92559C68.679 9.99055 68.338 10.1448 68.0619 10.3884C67.7859 10.6157 67.5423 10.973 67.3312 11.4601L65.0173 16.8674C64.9361 17.0785 64.8874 17.2815 64.8711 17.4763C64.8711 17.6712 64.928 17.8823 65.0416 18.1096L68.1837 25.1489C68.3623 25.5386 68.541 25.7903 68.7196 25.9039C68.9144 26.0176 69.1093 26.0907 69.3042 26.1231L69.7669 26.1962C70.043 26.2449 70.181 26.3586 70.181 26.5372C70.181 26.6996 70.0349 26.7808 69.7426 26.7808H65.4314C65.1391 26.7808 64.9929 26.6834 64.9929 26.4885C64.9929 26.3424 65.1228 26.2449 65.3826 26.1962L65.8698 26.1231C66.1458 26.0907 66.3407 26.0014 66.4544 25.8552C66.568 25.6928 66.5599 25.4574 66.43 25.1489L63.9212 19.571C63.8563 19.4249 63.7751 19.3518 63.6776 19.3518C63.5965 19.3518 63.5234 19.4249 63.4584 19.571L61.2663 24.9053C61.1201 25.2625 61.0714 25.5304 61.1201 25.7091C61.1688 25.8714 61.3312 25.9851 61.6073 26.0501L62.2893 26.1962C62.5653 26.2612 62.7034 26.3748 62.7034 26.5372C62.7034 26.6996 62.5572 26.7808 62.2649 26.7808H58.2703Z" fill="currentColor" class=""></path>
<path d="M49.2578 26.7808C49.0142 26.7808 48.8925 26.6915 48.8925 26.5129C48.8925 26.3667 48.998 26.2693 49.2091 26.2206L49.7693 26.1231C50.1103 26.0582 50.3295 25.9689 50.427 25.8552C50.5406 25.7415 50.5975 25.5142 50.5975 25.1732V10.8512C50.5975 10.5102 50.5406 10.2828 50.427 10.1692C50.3295 10.0555 50.1103 9.96619 49.7693 9.90124L49.2091 9.80381C48.998 9.75509 48.8925 9.65766 48.8925 9.51152C48.8925 9.3329 49.0142 9.24359 49.2578 9.24359H57.4418C57.8153 9.24359 58.0183 9.43033 58.0508 9.80381L58.2456 13.8471C58.2781 14.1232 58.1726 14.2612 57.929 14.2612C57.7341 14.2612 57.6205 14.1556 57.588 13.9445L57.4418 13.0433C57.2632 11.9391 56.8979 11.1353 56.3458 10.632C55.7937 10.1123 55.0305 9.85252 54.0562 9.85252C53.4067 9.85252 52.952 9.94995 52.6922 10.1448C52.4486 10.3234 52.3268 10.6482 52.3268 11.1191V16.9892C52.3268 17.2165 52.4405 17.3302 52.6678 17.3302H53.8857C54.6002 17.3302 55.0386 16.9486 55.201 16.1854L55.4445 14.9675C55.5095 14.724 55.6475 14.6184 55.8586 14.6509C56.0372 14.6834 56.1265 14.8214 56.1265 15.065V20.5453C56.1265 20.7889 56.0372 20.9269 55.8586 20.9594C55.6475 20.9919 55.5095 20.8863 55.4445 20.6428L55.201 19.4493C55.0873 18.8809 54.9249 18.5074 54.7138 18.3288C54.519 18.1502 54.2348 18.0609 53.8613 18.0609H52.6678C52.4405 18.0609 52.3268 18.1746 52.3268 18.4019V24.5156C52.3268 25.1001 52.473 25.5223 52.7653 25.7821C53.0738 26.0419 53.6259 26.1719 54.4215 26.1719C55.2335 26.1719 55.9236 25.9689 56.4919 25.5629C57.0765 25.1407 57.4824 24.3613 57.7098 23.2246L58.0021 21.7876C58.0508 21.5765 58.1726 21.4709 58.3674 21.4709C58.5947 21.4709 58.6922 21.6089 58.6597 21.885L58.4161 26.2206C58.3837 26.594 58.1807 26.7808 57.8072 26.7808H49.2578Z" fill="currentColor" class=""></path>
<path d="M46.943 27C46.6831 27 46.4639 26.8051 46.2853 26.4154L39.6845 12.0934C39.6358 11.9797 39.5708 11.931 39.4896 11.9472C39.4247 11.9635 39.3922 12.0366 39.3922 12.1665V24.6861C39.3922 25.1407 39.4653 25.4898 39.6114 25.7334C39.7738 25.9608 40.058 26.1069 40.4639 26.1718L40.7806 26.2206C40.9917 26.2368 41.0972 26.3342 41.0972 26.5129C41.0972 26.6915 40.9754 26.7808 40.7319 26.7808H37.2488C37.0052 26.7808 36.8834 26.6915 36.8834 26.5129C36.8834 26.3342 36.989 26.2368 37.2001 26.2206L37.5167 26.1718C37.9389 26.1069 38.2312 25.9608 38.3936 25.7334C38.556 25.4898 38.6371 25.1407 38.6371 24.6861V10.8512C38.6371 10.5102 38.5803 10.2828 38.4666 10.1692C38.3692 10.0555 38.1338 9.96619 37.7603 9.90124L37.2001 9.80381C36.989 9.75509 36.8834 9.65766 36.8834 9.51152C36.8834 9.3329 37.0052 9.24359 37.2488 9.24359H39.855C40.261 9.24359 40.5451 9.42221 40.7075 9.77945L46.4558 22.4208C46.5045 22.5183 46.5614 22.5589 46.6263 22.5426C46.7075 22.5264 46.7481 22.4696 46.7481 22.3721V11.3383C46.7481 10.8187 46.6588 10.4615 46.4802 10.2666C46.3015 10.0555 46.0742 9.92559 45.7982 9.87688L45.3597 9.80381C45.1486 9.75509 45.0431 9.65766 45.0431 9.51152C45.0431 9.3329 45.1649 9.24359 45.4084 9.24359H48.8915C49.1351 9.24359 49.2569 9.3329 49.2569 9.51152C49.2569 9.69014 49.1513 9.78757 48.9402 9.80381L48.6236 9.85252C48.2014 9.91747 47.9091 10.0555 47.7467 10.2666C47.5844 10.4615 47.5032 10.8187 47.5032 11.3383V26.2206C47.5032 26.5129 47.4463 26.7158 47.3327 26.8295C47.2352 26.9432 47.1053 27 46.943 27Z" fill="currentColor" class=""></path>
</svg>
          </div>
          <p class="text-sm leading-relaxed text-neutral-400 font-geist">
            Curated homes, verified sellers, and concierge support from first tour to closing. Move with confidence.
          </p>
          <a href="#" class="inline-flex items-center gap-2 text-sm font-medium tracking-tight text-neutral-900 bg-white hover:bg-white/90 rounded-full px-3 py-1.5">
            <span class="font-geist">Contact us</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4 stroke-[1.5]"></svg>
          </a>
          <div class="text-xs text-neutral-500 font-geist">support@estatevault.com</div>
        </div>

        <!-- Column: Company -->
        <div class="">
          <h4 class="text-xs tracking-wider text-neutral-300 uppercase font-geist">Company</h4>
          <ul class="mt-3 space-y-2">
            <li class=""><a href="#" class="text-sm text-neutral-300 hover:text-white font-geist">About</a></li>
            <li class=""><a href="#" class="text-sm text-neutral-300 hover:text-white font-geist">Press</a></li>
            <li><a href="#" class="text-sm text-neutral-300 hover:text-white font-geist">Careers</a></li>
            <li><a href="#" class="text-sm text-neutral-300 hover:text-white font-geist">Partners</a></li>
            <li class=""><a href="#" class="text-sm text-neutral-300 hover:text-white font-geist">Investor Relations</a></li>
          </ul>
        </div>

        <!-- Column: Apps/Tools -->
        <div class="">
          <h4 class="text-xs tracking-wider text-neutral-300 uppercase font-geist">Apps</h4>
          <ul class="mt-3 space-y-2">
            <li class=""><a href="#" class="text-sm text-neutral-300 hover:text-white font-geist">iOS App</a></li>
            <li class=""><a href="#" class="text-sm text-neutral-300 hover:text-white font-geist">Android App</a></li>
            <li><a href="#" class="text-sm text-neutral-300 hover:text-white font-geist">TV App</a></li>
            <li><a href="#" class="text-sm text-neutral-300 hover:text-white font-geist">Virtual Reality</a></li>
          </ul>
        </div>

        <!-- Column: Services -->
        <div class="">
          <h4 class="text-xs tracking-wider text-neutral-300 uppercase font-geist">Services</h4>
          <ul class="mt-3 space-y-2">
            <li class=""><a href="#" class="text-sm text-neutral-300 hover:text-white font-geist">Buy with EstateVault</a></li>
            <li><a href="#" class="text-sm text-neutral-300 hover:text-white font-geist">Sell with EstateVault</a></li>
            <li class=""><a href="#" class="text-sm text-neutral-300 hover:text-white font-geist">Concierge</a></li>
            <li class=""><a href="#" class="text-sm text-neutral-300 hover:text-white font-geist">Agent Finder</a></li>
            <li class=""><a href="#" class="text-sm text-neutral-300 hover:text-white font-geist">Neighborhood Guides</a></li>
          </ul>
        </div>
      </div>

      <!-- Meta / social -->
      

      

      <!-- Bottom bar -->
      <div class="mt-6 pt-6 border-t border-white/10 flex flex-col md:flex-row md:items-center gap-3 md:justify-between">
        <nav class="flex flex-wrap gap-x-4 gap-y-2 text-[11px] text-neutral-400 font-geist">
          <a href="#" class="hover:text-neutral-200">Fair Housing Statement</a>
          <span class="text-neutral-700">|</span>
          <a href="#" class="hover:text-neutral-200">Privacy Policy</a>
          <span class="text-neutral-700">|</span>
          <a href="#" class="hover:text-neutral-200">Terms of Use</a>
          <span class="text-neutral-700">|</span>
          <a href="#" class="hover:text-neutral-200">Accessibility</a>
          <span class="text-neutral-700">|</span>
          <a href="#" class="hover:text-neutral-200">DMCA</a>
          <span class="text-neutral-700">|</span>
          <a href="#" class="hover:text-neutral-200">Sitemap</a>
        </nav>
        <div class="text-[11px] text-neutral-500 font-geist">© 2025 EstateVault, Inc. All rights reserved.</div>
      </div>
    </div>
  </div>
</footer>
All Prompts