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

783

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

Footer for blog
https://github.com/tailwindow/component

Author:
Prem..

3 years ago

17.8k
Simple footer with CTA Button
You can use this simple footer as a base for any type of websites. It includes a single CTAs button that you can customize according to your requirement.

Author:
Pagedone

1 year ago

1.8k
Dark Footer with subscribe form
Use below exmaple of Tailwind CSS Dark Footer with Newsletter Subscription Form with brand logo and site links.

Author:
Pagedone

1 year ago

2.7k
Modern Website Header & Footer
I created a professional header and footer using HTML and Tailwind CSS with modern design elements, smooth animations, and interactive features.

Author:
Rathanak Phan

4 months ago

858
Horizontal footer with dark version
Use this example for simple horizontal layout of footer in dark version with brand logo, sitemap links and social media accounts.

Author:
Pagedone

1 year ago

2.9k
Home page
Home page для ПО, страница для входа в приложение.

Author:
Алла Телегина

8 months ago

1k
Footer, TailwindFlex v2
Another footer version of tailwindflex.com Example users randomly picked: Samuel & Prajwal

Author:
Matti

9 months ago

909
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

1 year ago

2.7k
Footer with social media buttons

Author:
Sophia Baker

2 years ago

13.4k
Very simple footer

Author:
Arya

2 years ago

12.6k
Responsive Footer Section
This modern and responsive footer adapts seamlessly to all screen sizes, ensuring a clean and organized layout. It includes essential navigation links, contact details, and a subscription form, all structured for easy access. Using display: contents;, the design remains flexible and visually balanced, enhancing the user experience across devices.

Author:
ABDO-SY

6 months ago

620
Footer with App buttons
This example can be used if you want add your app buttons of store for download with brand logo, sitemap links and social media accounts.

Author:
Pagedone

1 year ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components