Component:
Footer Freelance Playful

Name: Footer Freelance Playful
Availability: InStock
Free
Tailwind
React
Vue
Svelte
Astro
Tags: Footer Page Section Navigation Freelance Playful
Colors:
Description:
This carefully crafted Footer component is perfect for Freelance landing pages, featuring a Playful design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.

                <!--
@type: Footer
@industry: Freelance
@style: Playful
@category: Page Section, Navigation, Contact
@framework: Tailwind
@license: Free
-->

<style>
  @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600&family=Quicksand:wght@500;700&display=swap');
  body {
    font-family: 'Quicksand', sans-serif;
  }
  .playful-title {
    font-family: 'Fredoka', sans-serif;
  }
</style>

<footer class="bg-stone-800 text-stone-100 py-10 px-6 relative overflow-hidden">
  <div class="absolute -bottom-24 -right-24 w-96 h-96 bg-rose-500/10 rounded-full blur-3xl"></div>
  <div class="absolute top-0 left-1/4 w-64 h-64 bg-stone-700/30 rounded-full blur-3xl"></div>

  <div class="max-w-7xl mx-auto relative z-10">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start pb-16 border-b border-stone-700">

      <div>
        <div class="flex items-center gap-2 mb-6">
          <div
            class="w-12 h-12 bg-rose-500 rounded-2xl flex items-center justify-center shadow-lg shadow-rose-900/20">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 text-white" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              <path
                d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
            </svg>
          </div>
          <span class="playful-title text-3xl font-bold tracking-tight">Studio<span
              class="text-rose-400">Mojo</span></span>
        </div>
        <p class="text-stone-400 text-lg leading-relaxed max-w-md mb-8">
          The end of one page is just the beginning of the next. Let's write a digital story that your customers will
          never want to put down.
        </p>
        <div class="flex gap-4">
          <a href="#"
            class="w-12 h-12 rounded-xl bg-stone-700 hover:bg-rose-500 flex items-center justify-center transition-all group">
            <span class="sr-only">Twitter</span>
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <path
                d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
            </svg>
          </a>
          <a href="#"
            class="w-12 h-12 rounded-xl bg-stone-700 hover:bg-rose-500 flex items-center justify-center transition-all group">
            <span class="sr-only">Instagram</span>
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <path
                d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
            </svg>
          </a>
        </div>
      </div>

      <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
        <div>
          <h4 class="playful-title text-xl font-bold text-white mb-6">Navigation</h4>
          <ul class="space-y-4">
            <li><a href="#" class="text-stone-400 hover:text-rose-400 transition-colors font-medium">The Gallery</a>
            </li>
            <li><a href="#" class="text-stone-400 hover:text-rose-400 transition-colors font-medium">Services</a></li>
            <li><a href="#" class="text-stone-400 hover:text-rose-400 transition-colors font-medium">Case Studies</a>
            </li>
          </ul>
        </div>
        <div>
          <h4 class="playful-title text-xl font-bold text-white mb-6">Adventure</h4>
          <ul class="space-y-4">
            <li><a href="#" class="text-stone-400 hover:text-rose-400 transition-colors font-medium">Get a Quote</a>
            </li>
            <li><a href="#" class="text-stone-400 hover:text-rose-400 transition-colors font-medium">FAQ</a></li>
            <li><a href="#" class="text-stone-400 hover:text-rose-400 transition-colors font-medium">Contact</a></li>
          </ul>
        </div>
        <div class="col-span-2 md:col-span-1">
          <h4 class="playful-title text-xl font-bold text-white mb-6">Current Status</h4>
          <div class="bg-stone-700/50 p-4 rounded-2xl border border-stone-600">
            <div class="flex items-center gap-2 mb-2">
              <span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
              <span class="text-sm font-bold text-stone-200">Open for Booking</span>
            </div>
            <p class="text-xs text-stone-400 leading-tight">Current wait time: ~2 weeks. Let's secure your slot!</p>
          </div>
        </div>
      </div>
    </div>

    <div class="mt-12 flex flex-col md:flex-row justify-between items-center gap-6">
      <p class="text-stone-500 text-sm font-medium">
        &copy; 2026 Studio Mojo. Built with <span class="text-rose-500">❤️</span> and a lot of coffee.
      </p>

      <div class="flex items-center gap-8">
        <a href="#" class="text-stone-500 hover:text-stone-300 text-xs font-bold uppercase tracking-widest">Privacy
          Policy</a>
        <a href="#" class="text-stone-500 hover:text-stone-300 text-xs font-bold uppercase tracking-widest">Terms of
          Service</a>
      </div>

      <button
        class="w-10 h-10 bg-rose-500 rounded-full flex items-center justify-center text-white shadow-lg hover:bg-rose-600 transition-all hover:-translate-y-1">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"
          stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
          <path d="m18 15-6-6-6 6" />
        </svg>
      </button>
    </div>
  </div>
</footer>
Footer Freelance Playful

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions
