Component:
Free Footer Mobile App Minimal
Tailwind
Tailwind
React
Vue
Svelte
Astro
Colors:
Description:
This carefully crafted Footer component is perfect for Mobile App landing pages, featuring a Minimal 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: Mobile App
@style: Minimal
@category: Navigation, Page Section, Contact
@framework: Tailwind
@license: Free
-->
<footer class="relative bg-[#f9faff] overflow-hidden">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Top Section with Logo and Newsletter -->
<div class="grid grid-cols-1 gap-8 border-b border-gray-900/10 py-12 md:grid-cols-2 lg:py-16">
<div>
<div class="flex items-center">
<a href="#" class="flex items-center">
<span class="text-xl font-bold text-purple-600">FitMom</span>
<span class="ml-1 rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-600">App</span>
</a>
</div>
<p class="mt-4 max-w-md text-base text-gray-600">Transform your fitness journey with personalized workouts designed for busy moms. Join our community of 50,000+ moms getting stronger together.</p>
<div class="mt-6 flex space-x-6">
<a href="#" class="text-gray-500 hover:text-purple-600">
<span class="sr-only">Instagram</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"/>
</svg>
</a>
<a href="#" class="text-gray-500 hover:text-purple-600">
<span class="sr-only">Facebook</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"/>
</svg>
</a>
<a href="#" class="text-gray-500 hover:text-purple-600">
<span class="sr-only">YouTube</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd"/>
</svg>
</a>
</div>
</div>
<div class="md:ml-auto md:max-w-md">
<h3 class="text-sm font-semibold text-gray-900">Subscribe to our newsletter</h3>
<p class="mt-2 text-sm text-gray-600">Get weekly tips, workouts, and motivation delivered to your inbox.</p>
<form class="mt-4">
<div class="flex gap-x-3">
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" type="email" required class="min-w-0 flex-auto rounded-lg border-0 bg-white px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-purple-600 sm:text-sm sm:leading-6" placeholder="Enter your email">
<button type="submit" class="flex-none rounded-lg bg-purple-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600">Subscribe</button>
</div>
</form>
</div>
</div>
<!-- Navigation Links -->
<div class="grid grid-cols-2 gap-8 py-12 sm:grid-cols-3 md:grid-cols-4 lg:py-16">
<div>
<h3 class="text-sm font-semibold text-gray-900">Product</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#features" class="text-sm text-gray-600 hover:text-purple-600">Features</a>
</li>
<li>
<a href="#pricing" class="text-sm text-gray-600 hover:text-purple-600">Pricing</a>
</li>
<li>
<a href="#download" class="text-sm text-gray-600 hover:text-purple-600">Download App</a>
</li>
<li>
<a href="#reviews" class="text-sm text-gray-600 hover:text-purple-600">Reviews</a>
</li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-900">Resources</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#blog" class="text-sm text-gray-600 hover:text-purple-600">Blog</a>
</li>
<li>
<a href="#guides" class="text-sm text-gray-600 hover:text-purple-600">Workout Guides</a>
</li>
<li>
<a href="#recipes" class="text-sm text-gray-600 hover:text-purple-600">Healthy Recipes</a>
</li>
<li>
<a href="#community" class="text-sm text-gray-600 hover:text-purple-600">Community</a>
</li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-900">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#help" class="text-sm text-gray-600 hover:text-purple-600">Help Center</a>
</li>
<li>
<a href="#faq" class="text-sm text-gray-600 hover:text-purple-600">FAQs</a>
</li>
<li>
<a href="#contact" class="text-sm text-gray-600 hover:text-purple-600">Contact Us</a>
</li>
<li>
<a href="#safety" class="text-sm text-gray-600 hover:text-purple-600">Safety Tips</a>
</li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-900">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#about" class="text-sm text-gray-600 hover:text-purple-600">About Us</a>
</li>
<li>
<a href="#careers" class="text-sm text-gray-600 hover:text-purple-600">Careers</a>
</li>
<li>
<a href="#press" class="text-sm text-gray-600 hover:text-purple-600">Press</a>
</li>
<li>
<a href="#partners" class="text-sm text-gray-600 hover:text-purple-600">Partners</a>
</li>
</ul>
</div>
</div>
<!-- Bottom Section -->
<div class="flex flex-col items-center border-t border-gray-900/10 py-8 sm:flex-row sm:justify-between">
<div class="flex space-x-6 md:order-2">
<a href="#privacy" class="text-sm text-gray-600 hover:text-purple-600">Privacy Policy</a>
<a href="#terms" class="text-sm text-gray-600 hover:text-purple-600">Terms of Service</a>
<a href="#cookies" class="text-sm text-gray-600 hover:text-purple-600">Cookie Policy</a>
</div>
<p class="mt-4 text-sm text-gray-600 md:order-1 md:mt-0">© 2025 FitMom. All rights reserved.</p>
</div>
</div>
</footer>
This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Unlock for $49
(one-time payment)Early bird discount. Lock in this price forever
Premium components
Get access to all pro components. New ones added monthly
Save components
Save your favorite components to your account
Unlimited usage
Use components as often as you want
Landing page submissions
Get your landing pages featured on LandingGo and earn a
strong backlink
21 DR dofollow backlink from the main page