Home
Juraj
NebulaFooter

NebulaFooter

Footer

This tailwind example is contributed by Juraj, on 25-Mar-2025. Component is made with Tailwind CSS v3. It is responsive.

Footer

Author Juraj

Fork Fullscreen

<div class="space-y-4 relative z-10">
        <h3 class="text-lg font-bold uppercase bg-gradient-to-r from-pink-400 to-purple-400 bg-clip-text text-transparent">About us</h3>
        <p class="text-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
      </div>

<div class="relative z-10">
        <h3 class="text-lg font-bold uppercase mb-4 bg-gradient-to-r from-green-400 to-blue-400 bg-clip-text text-transparent">Links</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors flex items-center group">
            <span class="bg-gradient-to-r from-pink-500 to-purple-500 w-1 h-4 mr-2 transition-all group-hover:w-2"></span>
            Home
          </a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors flex items-center group">
            <span class="bg-gradient-to-r from-pink-500 to-purple-500 w-1 h-4 mr-2 transition-all group-hover:w-2"></span>
            Services
          </a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors flex items-center group">
            <span class="bg-gradient-to-r from-pink-500 to-purple-500 w-1 h-4 mr-2 transition-all group-hover:w-2"></span>
            About us
          </a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors flex items-center group">
            <span class="bg-gradient-to-r from-pink-500 to-purple-500 w-1 h-4 mr-2 transition-all group-hover:w-2"></span>
            Contact
          </a></li>
        </ul>
      </div>

<div class="relative z-10">
        <h3 class="text-lg font-bold uppercase mb-4 bg-gradient-to-r from-yellow-400 to-red-400 bg-clip-text text-transparent">Contact</h3>
        <ul class="space-y-2 text-gray-300">
          <li class="flex items-center hover:text-white transition-colors">
            <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
            </svg>
            info@example.com
          </li>
        </ul>
      </div>

<div class="relative z-10">
        <h3 class="text-lg font-bold uppercase mb-4 bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent">Follow us</h3>
        <div class="flex space-x-6">
          <a href="#" class="p-2 bg-white/10 rounded-full backdrop-blur-sm hover:bg-white/20 transition-all">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
            </svg>
          </a>
        </div>
      </div>
    </div>

<div class="border-t border-white/10 py-6 relative z-10">
      <p class="text-center text-sm text-gray-300">&copy; 2024 Company</p>
    </div>
  </div>
</footer>

Related Examples

Very simple footer

Author:
Arya

2 years ago

11.8k
Footer (Tailwind UI)

Author:
Gopi Yadav

2 years ago

11.6k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

6 months ago

2.4k
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!

Author:
Abdul Baset Bappy

3 weeks ago

37
Tailwind Footer with dark version
This example can be used if you are looking for four column footer in dark version with sitemap links, brand logo, and social media accounts.

Author:
Pagedone

11 months ago

2.4k
Footer
A simple footer with link adjustment for smartphones

Author:
Matti

4 months ago

547
Tailwind Footer Template
Following is the Tailwind CSS template for creative footer with contact information like address, email, phone number and a newsletter with social icons and site links.

Author:
Pagedone

11 months ago

1.9k
beautifull footer
We create a Advance animated footer section using tailwindcss and custom css

Author:
Akram Khan

9 months ago

1.3k
Small Footer

Author:
Abhijit Sen

2 years ago

10.9k
Newsletter form with Pre-footer CTA
Get started with this example with a CTA section before the footer, a sitemap links, the logo of your brand, a newsletter sign-up form, and the copyright notice.

Author:
Pagedone

11 months ago

1.8k
Crafting a Responsive Footer with TypeScript, and Tailwind CSS
This is a well-structured and comprehensive footer section that uses Tailwind CSS for styling and layout. Here’s a brief explanation of what each part does: Footer Container (<footer class="bg-gray-800">): The footer is wrapped in a <footer> element with a dark background using the bg-gray-800 class. The aria-labelledby="footer-heading" attribute is used for accessibility, linking the <footer> to the invisible heading (<h2 id="footer-heading" class="sr-only">Footer</h2>). Main Content Area: The content inside the footer is centered and spaced using utility classes like max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8. Footer Sections: The footer is divided into several sections using grid layouts (xl:grid xl:grid-cols-5 xl:gap-8), which organize content into columns. Each section (Solutions, Support, Company, Legal) contains a heading with a list of links. These links are styled with Tailwind classes for consistent spacing and hover effects (text-base text-gray-300 hover:text-white). Language & Currency Selector: This section provides dropdowns for selecting language and currency. Tailwind's form utilities (@tailwindcss/forms plugin) are used to style the select elements. Newsletter Subscription Form: A subscription form is provided with an email input and a submit button. The form is styled to be responsive, with focus states for accessibility (focus:ring-2 focus:ring-offset-2). Social Media Links: Social media icons (Facebook, Instagram, etc.) are included, each wrapped in a link with hover effects. Icons are created using SVGs, which are scalable and look sharp at any size. Final Section: The footer concludes with another grid layout, ensuring spacing and alignment for different screen sizes. Customization Tips: Colors: You can easily customize the colors using Tailwind's utility classes (e.g., bg-gray-800, text-gray-400) to match your design. Icons: Replace SVGs with the appropriate icons for your needs. You might use a different icon set or add more icons. Responsive Design: Tailwind's utility classes like sm:, md:, lg:, xl: ensure that the footer is responsive across devices. Adjust the layout or padding if needed. Additional Considerations: SEO: Ensure the links in the footer point to meaningful pages to improve SEO. Accessibility: Consider adding aria-labels to the form elements and social media links to enhance accessibility further. This footer is ready to be integrated into a Tailwind CSS-powered project, offering both aesthetic appeal and functional utility.

Author:
zobaidul kaziex

7 months ago

1.9k
Footer with images

Author:
Mr Robot

2 years ago

8.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components