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

955

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

Subscribe to our newsletter section

Author:
Conan Hilton

3 years ago

11.7k
Sticky bottom footer

Author:
Isabella Kowalski

3 years ago

10.9k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

1 year ago

4.3k
Centered footer with subscribe form
Use this example to center align everything in footer with brand logo, sitemap links and subscribe form.

Author:
Pagedone

1 year ago

2.7k
Footer with social media icons
If you want to use colorful social media icons with address location, sitemap links and newsletter.

Author:
Pagedone

1 year ago

3.6k
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.

Author:
Ayyamperumal S

1 year ago

2.1k
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Author:
Hamza Atig

11 months ago

1.1k
Pre-footer Newsletter
Use this example with a Newsletter section before the footer, a sitemap, the logo of your brand and social media accounts.

Author:
Pagedone

1 year ago

2.9k
Basic footer
Simple footer with follow us section

Author:
Anonymous

1 year ago

2.3k
Simple footer

Author:
threehymns

2 years ago

5.3k
Horizontal footer
Use this horizontal footer tailwind css example if you want horizontal footer layout side by side, which includes sitemap links, brand logo and social media accounts.

Author:
Pagedone

1 year ago

3k
Footer
responsive footer

Author:
Aman kumar

2 years ago

8.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components