Free
Footer
Physiotech Footer
A footer block extracted from the Physiotech template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.
0
17
physiotech.html
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.FontAwesomeConfig = {
autoReplaceSvg: 'nest'
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Physiotech Footer | Tailwind CSS UI Block</title>
<meta name="description" content="A footer block extracted from the Physiotech template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design." />
<meta name="keywords" content="Physiotech, Tailwind CSS template, HTML website template, healthcare website template, fitness landing page, digital health, responsive medical design" />
<meta name="author" content="Let's templates">
<link rel="canonical" href="">
<meta property="og:type" content="product">
<meta property="og:site_name" content="Let's templates">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="">
<meta property="og:title" content="Physiotech | Tailwind CSS Healthcare & Fitness Template">
<meta property="og:description" content="A responsive Tailwind CSS healthcare website template for fitness tracking, nutrition tools, workout scheduling, and digital health services.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="Physiotech template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="Physiotech | Tailwind CSS Healthcare & Fitness Template">
<meta name="twitter:description" content="A responsive Tailwind CSS healthcare website template for fitness tracking, nutrition tools, workout scheduling, and digital health services.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="Physiotech template preview">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
</style>
</head>
<body class="bg-white overflow-x-hidden">
<%
team_members = [
["https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_569461d1de_b8525e8b12e7633b.png", "female doctor in white coat with dark vest standing confidently, tropical green plants background", "Amara Cole", "Clinical Director"],
["https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_760653c638_7d1101aaf02e7334.png", "male doctor in dark green scrubs with stethoscope smiling, indoor plants and bright window background", "James Okonkwo", "Sports Medicine"],
["https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_fb5f7d2783_e407475c4ee126e9.png", "young male doctor in white coat with stethoscope standing by large window, indoor plants background", "Leo Hart", "Digital Health"],
["https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_30925c4d33_1a272b2c67c83272.png", "female doctor in white coat sitting at desk working on a computer, tropical green plants surrounding", "Priya Shah", "Preventive Care"],
["https://images.unsplash.com/photo-1559839734-2b71ea197ec2?auto=format&fit=crop&w=800&q=80", "female physician in a white coat smiling in a bright clinic", "Elena Voss", "Nutrition Science"],
["https://images.unsplash.com/photo-1622253692010-333f2da6031d?auto=format&fit=crop&w=800&q=80", "male physician in a white coat standing in a modern hospital corridor", "Noah Blake", "Physiotherapy"]
]
%>
<% team_members.first(3).each_with_index do |(src, alt, name, role), index| %>
<% end %>
<!-- block:start footer -->
<footer id="footer" class="bg-gray-50 w-full px-4 sm:px-8 pt-16 md:pt-24 pb-8 md:pb-12">
<div class="max-w-6xl mx-auto">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12 mb-16 md:mb-20">
<div class="col-span-1 sm:col-span-2 lg:col-span-1">
<div class="flex items-center gap-2 mb-6 text-gray-900">
<svg width="24" height="24" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 6 L14 2 L22 6 L22 14 L14 26 L6 14 Z" stroke="currentColor" stroke-width="2" fill="none"/>
<circle cx="14" cy="10" r="3" fill="currentColor"/>
</svg>
<span class="font-bold text-xl tracking-wide">Physiotech</span>
</div>
<p class="text-gray-500 text-sm leading-relaxed mb-8 max-w-xs">Empowering your health journey with modern technology and expert guidance.</p>
<div class="flex gap-4">
<a href="#" class="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center text-gray-400 hover:text-gray-900 hover:border-gray-900 transition shadow-sm"><i class="fa-brands fa-twitter text-sm"></i></a>
<a href="#" class="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center text-gray-400 hover:text-gray-900 hover:border-gray-900 transition shadow-sm"><i class="fa-brands fa-instagram text-sm"></i></a>
<a href="#" class="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center text-gray-400 hover:text-gray-900 hover:border-gray-900 transition shadow-sm"><i class="fa-brands fa-linkedin-in text-sm"></i></a>
</div>
</div>
<div class="lg:pl-8">
<h6 class="font-bold text-gray-900 mb-6 uppercase text-[10px] tracking-widest">Platform</h6>
<ul class="space-y-4">
<li><a href="#" class="text-sm text-gray-500 hover:text-gray-900 transition font-medium">Features</a></li>
<li><a href="#" class="text-sm text-gray-500 hover:text-gray-900 transition font-medium">Nutrition API</a></li>
<li><a href="#" class="text-sm text-gray-500 hover:text-gray-900 transition font-medium">Mobile App</a></li>
</ul>
</div>
<div class="lg:pl-8">
<h6 class="font-bold text-gray-900 mb-6 uppercase text-[10px] tracking-widest">Company</h6>
<ul class="space-y-4">
<li><a href="#" class="text-sm text-gray-500 hover:text-gray-900 transition font-medium">About Us</a></li>
<li><a href="#" class="text-sm text-gray-500 hover:text-gray-900 transition font-medium">Our Team</a></li>
<li><a href="#" class="text-sm text-gray-500 hover:text-gray-900 transition font-medium">Careers</a></li>
</ul>
</div>
<div class="lg:pl-8">
<h6 class="font-bold text-gray-900 mb-6 uppercase text-[10px] tracking-widest">Support</h6>
<ul class="space-y-4">
<li><a href="#" class="text-sm text-gray-500 hover:text-gray-900 transition font-medium">Help Center</a></li>
<li><a href="#" class="text-sm text-gray-500 hover:text-gray-900 transition font-medium">Privacy Policy</a></li>
<li><a href="#" class="text-sm text-gray-500 hover:text-gray-900 transition font-medium">Terms</a></li>
</ul>
</div>
</div>
<div class="pt-8 border-t border-gray-200 flex flex-col md:flex-row items-center justify-between gap-6">
<p class="text-[10px] md:text-xs text-gray-400 font-medium tracking-wide">© 2024 Physiotech Inc. All rights reserved.</p>
<div class="flex flex-wrap justify-center gap-6">
<span class="text-[10px] md:text-xs text-gray-400 font-medium tracking-wide">Built with Wellness in Mind</span>
<span class="text-[10px] md:text-xs text-gray-400 font-medium tracking-wide flex items-center gap-2">
System Status: <span class="flex items-center gap-1.5 text-green-500"><span class="w-1.5 h-1.5 rounded-full bg-green-500"></span> Operational</span>
</span>
</div>
</div>
</div>
</footer>
<!-- block:end footer -->
<script>
(function () {
var data = document.getElementById("team-members-data");
var members = data ? JSON.parse(data.textContent) : [];
var prev = document.getElementById("team-prev");
var next = document.getElementById("team-next");
var slots = document.querySelectorAll("[data-team-slot]");
var index = 0;
if (!prev || !next || !slots.length || !members.length) return;
function render() {
slots.forEach(function (slot, offset) {
var member = members[(index + offset) % members.length];
var image = slot.querySelector("img");
var name = slot.querySelector("[data-team-name]");
var role = slot.querySelector("[data-team-role]");
image.style.opacity = "0";
window.setTimeout(function () {
image.src = member[0];
image.alt = member[1];
name.textContent = member[2];
role.textContent = member[3];
image.style.opacity = "1";
}, 160);
});
}
function step(direction) {
index = (index + direction + members.length) % members.length;
render();
}
prev.addEventListener("click", function () { step(-1); });
next.addEventListener("click", function () { step(1); });
})();
</script>
</body>
</html>
From this template
Free
Business
Physiotech
Unlimited access to all products
Unlock the entire library of premium templates and blocks. Renews automatically, cancel anytime.
€20
/ 3 months
or €60 / year
Get Unlimited Access