Tailwind CSS Footer Navigation Components

Simple Footer Component

A comprehensive Tailwind CSS Footer block featuring organized link columns for company information, resources, and legal pages. Includes a bottom section with copyright notice and social media icons, all arranged in a clean grid layout that adapts to different screen sizes component.

LTR

RTL

<footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 transition-colors duration-300" x-data="{ currentYear: new Date().getFullYear() }">
        <div class="max-w-6xl mx-auto px-4 py-8">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="space-y-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Company</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">About Us</a></li>
                        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Careers</a></li>
                        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Contact</a></li>
                    </ul>
                </div>
                <div class="space-y-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Resources</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Documentation</a></li>
                        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Support</a></li>
                        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Blog</a></li>
                    </ul>
                </div>
                <div class="space-y-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Legal</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Privacy Policy</a></li>
                        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Terms of Service</a></li>
                        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Cookies</a></li>
                    </ul>
                </div>
            </div>
            <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
                <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                    <div class="flex items-center space-x-4 rtl:space-x-reverse">
                        <span class="text-gray-600 dark:text-gray-300">© <span x-text="currentYear"></span> Your Company. All rights reserved.</span>
                    </div>
                    
                    <div class="flex space-x-4 rtl:space-x-reverse">
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

Brutalist Studio Footer with Infinite Marquee Component

A high-end, dark-themed Tailwind CSS Footer featuring an auto-scrolling infinite marquee, a validated newsletter form with toast notifications, and a real-time local clock component.

LTR

RTL

function calculateAdvancedMetrics(data) {
                          const metrics = {
                              performance: [],
                              efficiency: {},
                              trends: new Map()
                          };
                          
                          data.forEach((item, index) => {
                              const weightedScore = item.value * Math.pow(0.95, index);
                              metrics.performance.push({
                                  score: weightedScore,
                                  timestamp: item.timestamp,
                                  confidence: calculateConfidence(item)
                              });
                          });
                          
                          const model = await loadPreTrainedModel();
                          const predictions = model.predict(metrics.performance);
                          
                          return {
                              ...metrics,
                              predictions,
                              accuracy: calculateAccuracy(predictions),
                              recommendations: generateRecommendations(metrics)
                          };
                      }

                      class DataAnalyzer {
                          constructor(config) {
                              this.config = config;
                              this.cache = new LRUCache(1000);
                              this.workers = new WorkerPool(4);
                          }
                          
                          async analyze(dataset) {
                              const chunks = this.chunkData(dataset);
                              const results = await Promise.all(
                                  chunks.map(chunk => this.workers.process(chunk))
                              );
                              
                              return this.aggregateResults(results);
                          }
                      }

Premium Code Access

Unlock advanced code snippets, frameworks, and exclusive developer resources with our premium membership.

Full source code access

Advanced frameworks & libraries

Priority support & updates

Upgrade to Premium

Massive Type Footer Component

A high-impact Tailwind CSS Footer component featuring a massive, gradient-text call-to-action, animated background glows, and a clean grid layout for navigation and contact details component.

LTR

RTL

function calculateAdvancedMetrics(data) {
                          const metrics = {
                              performance: [],
                              efficiency: {},
                              trends: new Map()
                          };
                          
                          data.forEach((item, index) => {
                              const weightedScore = item.value * Math.pow(0.95, index);
                              metrics.performance.push({
                                  score: weightedScore,
                                  timestamp: item.timestamp,
                                  confidence: calculateConfidence(item)
                              });
                          });
                          
                          const model = await loadPreTrainedModel();
                          const predictions = model.predict(metrics.performance);
                          
                          return {
                              ...metrics,
                              predictions,
                              accuracy: calculateAccuracy(predictions),
                              recommendations: generateRecommendations(metrics)
                          };
                      }

                      class DataAnalyzer {
                          constructor(config) {
                              this.config = config;
                              this.cache = new LRUCache(1000);
                              this.workers = new WorkerPool(4);
                          }
                          
                          async analyze(dataset) {
                              const chunks = this.chunkData(dataset);
                              const results = await Promise.all(
                                  chunks.map(chunk => this.workers.process(chunk))
                              );
                              
                              return this.aggregateResults(results);
                          }
                      }

Premium Code Access

Unlock advanced code snippets, frameworks, and exclusive developer resources with our premium membership.

Full source code access

Advanced frameworks & libraries

Priority support & updates

Upgrade to Premium

Modern Card-Style Footer Component

A distinct, floating-card Tailwind CSS Footer component featuring blurred background decorations, a comprehensive sitemap, and a dedicated contact area with hover animations component.

LTR

RTL

function calculateAdvancedMetrics(data) {
                          const metrics = {
                              performance: [],
                              efficiency: {},
                              trends: new Map()
                          };
                          
                          data.forEach((item, index) => {
                              const weightedScore = item.value * Math.pow(0.95, index);
                              metrics.performance.push({
                                  score: weightedScore,
                                  timestamp: item.timestamp,
                                  confidence: calculateConfidence(item)
                              });
                          });
                          
                          const model = await loadPreTrainedModel();
                          const predictions = model.predict(metrics.performance);
                          
                          return {
                              ...metrics,
                              predictions,
                              accuracy: calculateAccuracy(predictions),
                              recommendations: generateRecommendations(metrics)
                          };
                      }

                      class DataAnalyzer {
                          constructor(config) {
                              this.config = config;
                              this.cache = new LRUCache(1000);
                              this.workers = new WorkerPool(4);
                          }
                          
                          async analyze(dataset) {
                              const chunks = this.chunkData(dataset);
                              const results = await Promise.all(
                                  chunks.map(chunk => this.workers.process(chunk))
                              );
                              
                              return this.aggregateResults(results);
                          }
                      }

Premium Code Access

Unlock advanced code snippets, frameworks, and exclusive developer resources with our premium membership.

Full source code access

Advanced frameworks & libraries

Priority support & updates

Upgrade to Premium

Onyx Newsletter Footer Component

A professional dark-mode ready Tailwind CSS Footer featuring a real-time validating newsletter signup form, organized sitemap links, and social media navigation component.

LTR

RTL

function calculateAdvancedMetrics(data) {
                          const metrics = {
                              performance: [],
                              efficiency: {},
                              trends: new Map()
                          };
                          
                          data.forEach((item, index) => {
                              const weightedScore = item.value * Math.pow(0.95, index);
                              metrics.performance.push({
                                  score: weightedScore,
                                  timestamp: item.timestamp,
                                  confidence: calculateConfidence(item)
                              });
                          });
                          
                          const model = await loadPreTrainedModel();
                          const predictions = model.predict(metrics.performance);
                          
                          return {
                              ...metrics,
                              predictions,
                              accuracy: calculateAccuracy(predictions),
                              recommendations: generateRecommendations(metrics)
                          };
                      }

                      class DataAnalyzer {
                          constructor(config) {
                              this.config = config;
                              this.cache = new LRUCache(1000);
                              this.workers = new WorkerPool(4);
                          }
                          
                          async analyze(dataset) {
                              const chunks = this.chunkData(dataset);
                              const results = await Promise.all(
                                  chunks.map(chunk => this.workers.process(chunk))
                              );
                              
                              return this.aggregateResults(results);
                          }
                      }

Premium Code Access

Unlock advanced code snippets, frameworks, and exclusive developer resources with our premium membership.

Full source code access

Advanced frameworks & libraries

Priority support & updates

Upgrade to Premium

Build Your Way with WavyKits' Components

Footer Navigation

Simple Footer Component

Brutalist Studio Footer with Infinite Marquee Component

Premium Code Access

Massive Type Footer Component

Premium Code Access

Modern Card-Style Footer Component

Premium Code Access

Onyx Newsletter Footer Component

Premium Code Access

Build Your Way with WavyKits'
Components