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

777

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

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

Author:
Pagedone

1 year ago

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

Author:
Pagedone

1 year ago

2.5k
Footer
Footer with responsive desing

Author:
Rajesh Maheshwari

6 months ago

929
Basic footer
Simple footer with follow us section

Author:
Anonymous

1 year ago

1.9k
footer
footer

Author:
Anonymous

5 months ago

1.4k
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

3 months ago

739
Footer with Member info
Use below footer tailwind template which show number of member who joins the community.

Author:
Pagedone

1 year ago

2k
Centered footer with CTA
Use this Tailwind CSS footer compoent for simple footer with center aligned everything and with CTA buttons.

Author:
Pagedone

1 year ago

1.7k
Basic footer
Basic footer with subscribe to the newsletter section

Author:
Mr Robot

2 years ago

9.4k
Small Footer

Author:
Abhijit Sen

2 years ago

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

Author:
Pagedone

1 year ago

2.6k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

7 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components