Free
Features
Clinova Features
A features block extracted from the Clinova template, available in Tailwind CSS and Bootstrap.
0
1
clinova.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>Clinova Features | Tailwind CSS UI Block</title>
<meta name="description" content="A features block extracted from the Clinova template, available in Tailwind CSS and Bootstrap.">
<meta name="keywords" content="Clinova, Tailwind CSS template, HTML website template, health template, medical clinic, family doctor, preventive care, doctor profiles, responsive healthcare 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="Clinova | Tailwind CSS Health Clinic Template">
<meta property="og:description" content="A calm, editorial Tailwind CSS health template for clinics, family practices, and preventive care providers with doctor profiles, health programs, membership pricing, and online booking.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="Clinova template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="Clinova | Tailwind CSS Health Clinic Template">
<meta name="twitter:description" content="A calm, editorial Tailwind CSS health template for clinics, family practices, and preventive care providers with doctor profiles, health programs, membership pricing, and online booking.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="Clinova template preview">
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
navy: '#0e1a3a',
teal: '#4b7b8a',
mist: '#f4f4f3',
frame: '#eeeff1',
ash: '#9b9b9b'
},
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
display: ['Archivo', 'ui-sans-serif', 'system-ui', 'sans-serif']
}
}
}
};
</script>
<style>
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 180ms ease-out both page-fade-out; }
::view-transition-new(root) { animation: 220ms ease-in both page-fade-in; }
@keyframes page-fade-out { to { opacity: 0; } }
@keyframes page-fade-in { from { opacity: 0; } }
html { scroll-behavior: smooth; }
.font-display { letter-spacing: -0.035em; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
details > summary::-webkit-details-marker { display: none; }
[data-word] { transition: color .35s ease; }
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--reveal-delay, 0ms); }
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
[data-word] { transition: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
</style>
</head>
<body class="bg-frame font-sans text-navy antialiased overflow-x-hidden">
<%
nav_links = [["Services", "services.html"], ["Doctors", "doctors.html"], ["Health Programs", "health-programs.html"], ["Blog", "blog.html"]]
approach = "Lasting health stands on three things: understanding your body through regular screening, building everyday habits that protect it, and having a care team you can reach whenever you need them. Our promise is simple: check, prevent, thrive, a clear path to a longer, healthier life."
pillars = [
["Check", "https://images.unsplash.com/photo-1666887360388-93e684b6474a?auto=format&fit=crop&w=600&q=80", "Doctor in a white coat holding a stethoscope chest piece"],
["Prevent", "https://images.unsplash.com/photo-1761315600943-d8a5bb0c499f?auto=format&fit=crop&w=600&q=80", "Grilled chicken salad with avocado and tomatoes in a dark bowl"],
["Thrive", "https://images.unsplash.com/photo-1742522450616-a2cf0cba1274?auto=format&fit=crop&w=600&q=80", "Three generations of a family embracing in an autumn park"]
]
values = [
{ icon: "fa-gear", title: "Evidence-led", text: "Each recommendation follows current clinical guidelines, so the care you get is proven, measured and suited to you.", image: "https://images.unsplash.com/photo-1758691462123-8a17ae95d203?auto=format&fit=crop&w=1400&q=80", alt: "Doctor checking a patient's blood pressure with a stethoscope" },
{ icon: "fa-hand-holding-heart", title: "Compassion", text: "Longer appointments, plain language and a team that remembers your story from one visit to the next.", image: "https://images.unsplash.com/photo-1780461159717-04ebb5eb3293?auto=format&fit=crop&w=1400&q=80", alt: "Medical professional gently holding a patient's hand" },
{ icon: "fa-circle-half-stroke", title: "Accuracy", text: "In-house labs and calibrated equipment mean results you can trust, usually back within a day.", image: "https://images.unsplash.com/photo-1606206591513-adbfbdd7a177?auto=format&fit=crop&w=1400&q=80", alt: "Rows of blood collection tubes with colourful caps in a lab rack" }
]
quotes = ["A doctor who hears me!", "Quick and thorough!", "I felt looked after", "Honestly life-changing!", "No waiting room", "Trusted"]
faqs = [
["Do I need a referral to book?", "No. You can book any general appointment directly online or by phone. Specialist visits may need a note from one of our GPs, which we arrange for you."],
["Does my insurance cover Clinova?", "We work with most major insurers and offer direct billing. If your plan is not listed, we provide itemised receipts for reimbursement."],
["How do you protect my medical records?", "Records are encrypted, stored in certified data centres and only visible to the clinicians treating you. You can download or delete your data any time."],
["Can I speak to a doctor online first?", "Yes. Video consults run from 8am to 9pm, and the doctor can book any tests you need before your in-person visit."],
["What does the yearly check-up include?", "Blood work, heart and blood pressure screening, body composition, a lifestyle review and a 30-minute results consult with your doctor."]
]
doctors = [
{ name: "Dr. Selin Hart", role: "General Practitioner", image: "https://images.unsplash.com/photo-1643297654416-05795d62e39c?auto=format&fit=crop&w=900&q=80", alt: "Smiling doctor in a white coat holding a stethoscope", slug: "selin-hart" },
{ name: "Dr. Marcus Oyelaran", role: "Cardiologist", image: "https://images.unsplash.com/photo-1758691463582-11aea602cd4a?auto=format&fit=crop&w=900&q=80", alt: "Smiling doctor with glasses and stethoscope standing with arms crossed", slug: "marcus-oyelaran" },
{ name: "Lucía Ferreira", role: "Nutritionist", image: "https://images.unsplash.com/photo-1623854767648-e7bb8009f0db?auto=format&fit=crop&w=900&q=80", alt: "Smiling clinician in a white coat with a stethoscope outdoors", slug: "lucia-ferreira" },
{ name: "Dr. Arjun Mehta", role: "Pediatrician", image: "https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?auto=format&fit=crop&w=900&q=80", alt: "Doctor in glasses and a white coat with arms crossed against a grey wall", slug: "arjun-mehta" }
]
footer_links = [
[["Check-ups", "services.html#checkups"], ["Telehealth", "services.html#telehealth"], ["Vaccination", "services.html#vaccination"], ["Lab tests", "services.html#labs"]],
[["About", "index.html#approach"], ["Doctors", "doctors.html"], ["Programs", "health-programs.html"], ["Blog", "blog.html"]],
[["Membership", "membership.html"], ["Contact", "contact.html"], ["FAQs", "index.html#faq"], ["Book a visit", "contact.html"]]
]
%>
<% nav_links.each do |label, href| %>
<% end %>
<% nav_links.each do |label, href| %>
<% end %>
<% approach.split(" ").each_with_index do |word, index| %>
<% end %>
<% pillars.each_with_index do |(label, src, alt), index| %>
<% unless index == pillars.size - 1 %>
<% end %>
<% end %>
<!-- block:start features -->
<section id="values" class="px-5 pb-24 md:px-[80px] md:pb-32" data-values>
<div class="grid gap-12 lg:grid-cols-2 lg:gap-16">
<div class="flex flex-col">
<p class="text-[11px] uppercase tracking-[0.15em] text-ash">Core values</p>
<h2 class="mt-6 max-w-[14ch] font-display text-4xl font-medium leading-[1.05] md:text-5xl">Principles that put every patient first</h2>
<a href="services.html" class="mt-8 w-fit rounded-full bg-mist px-7 py-4 text-sm font-medium shadow-sm transition hover:bg-navy hover:text-white">Learn More</a>
<div class="mt-auto hidden gap-12 pt-16 lg:flex" role="tablist" aria-label="Core values">
<% values.each_with_index do |value, index| %>
<button type="button" role="tab" data-value-tab="<%= index %>" aria-selected="<%= index.zero? %>" class="group text-left">
<span class="block h-28 w-28 overflow-hidden rounded-xl ring-2 ring-transparent ring-offset-2 transition group-aria-selected:ring-navy">
<img src="<%= value[:image].sub("w=1400", "w=300") %>" alt="" class="h-full w-full object-cover">
</span>
<span class="mt-3 flex items-center gap-2 text-sm text-ash group-aria-selected:text-navy"><i class="fa-solid <%= value[:icon] %> text-xs"></i> <%= value[:title] %></span>
</button>
<% end %>
</div>
</div>
<div>
<div class="relative overflow-hidden rounded-2xl aspect-[576/396]">
<% values.each_with_index do |value, index| %>
<img data-value-image src="<%= value[:image] %>" alt="<%= value[:alt] %>" loading="lazy" class="absolute inset-0 h-full w-full object-cover transition-opacity duration-500 <%= 'opacity-0' unless index.zero? %>">
<% end %>
<div class="absolute right-4 top-4 rounded-xl bg-white/25 px-4 py-3 text-sm text-white backdrop-blur-md">
<p>Wellness score</p>
<p class="mt-1 tracking-[-0.2em] opacity-90" aria-hidden="true">||||||||||||||||</p>
</div>
<div class="absolute bottom-4 left-4 rounded-xl bg-navy/40 px-4 py-3 text-sm leading-relaxed text-white backdrop-blur-md">
<p>Blood pressure: 118/76</p>
<p>Heart rate: Normal</p>
</div>
</div>
<% values.each_with_index do |value, index| %>
<div data-value-panel role="tabpanel" class="mt-8" <%= 'hidden' unless index.zero? %>>
<h3 class="flex items-center gap-3 font-display text-2xl font-medium"><i class="fa-solid <%= value[:icon] %> text-sm"></i> <%= value[:title] %></h3>
<p class="mt-4 max-w-[52ch] leading-relaxed text-navy/70"><%= value[:text] %></p>
</div>
<% end %>
<div class="mt-8 flex gap-3 border-t border-navy/10 pt-6">
<button type="button" data-value-prev class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-mist shadow-sm transition hover:bg-navy hover:text-white" aria-label="Previous value"><i class="fa-solid fa-arrow-left-long"></i></button>
<button type="button" data-value-next class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-mist shadow-sm transition hover:bg-navy hover:text-white" aria-label="Next value"><i class="fa-solid fa-arrow-right-long"></i></button>
</div>
</div>
</div>
</section>
<!-- block:end features -->
<script>
document.querySelectorAll("[data-menu-toggle]").forEach((button) => {
const menu = document.getElementById(button.getAttribute("aria-controls"));
if (!menu) return;
button.addEventListener("click", () => {
const open = button.getAttribute("aria-expanded") === "true";
button.setAttribute("aria-expanded", String(!open));
menu.classList.toggle("hidden", open);
});
});
document.querySelectorAll("details").forEach((item) => {
const summary = item.querySelector("summary");
item.addEventListener("toggle", () => summary?.setAttribute("aria-expanded", String(item.open)));
});
document.querySelectorAll("[data-word-reveal]").forEach((paragraph) => {
const words = [...paragraph.querySelectorAll("[data-word]")];
if (navigator.webdriver || matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const paint = () => {
const rect = paragraph.getBoundingClientRect();
const progress = Math.min(1, Math.max(0, (innerHeight * 0.85 - rect.top) / (rect.height + innerHeight * 0.35)));
const lit = Math.round(words.length * progress);
words.forEach((word, index) => {
word.classList.toggle("text-navy", index < Math.max(lit, 17));
word.classList.toggle("text-ash", index >= Math.max(lit, 17));
});
};
addEventListener("scroll", paint, { passive: true });
paint();
});
document.querySelectorAll("[data-values]").forEach((section) => {
const images = [...section.querySelectorAll("[data-value-image]")];
const panels = [...section.querySelectorAll("[data-value-panel]")];
const tabs = [...section.querySelectorAll("[data-value-tab]")];
let index = 0;
const show = (next) => {
index = (next + panels.length) % panels.length;
images.forEach((image, i) => image.classList.toggle("opacity-0", i !== index));
panels.forEach((panel, i) => { panel.hidden = i !== index; });
tabs.forEach((tab, i) => tab.setAttribute("aria-selected", String(i === index)));
};
tabs.forEach((tab) => tab.addEventListener("click", () => show(Number(tab.dataset.valueTab))));
section.querySelector("[data-value-prev]")?.addEventListener("click", () => show(index - 1));
section.querySelector("[data-value-next]")?.addEventListener("click", () => show(index + 1));
});
document.querySelectorAll("[data-carousel]").forEach((carousel) => {
const track = carousel.querySelector("[data-carousel-track]");
const slides = [...track.children];
let index = 0;
const perView = () => Math.max(1, Math.round(track.clientWidth / slides[0].clientWidth));
const maxIndex = () => Math.max(0, slides.length - perView());
const render = () => { track.style.transform = `translateX(-${index * slides[0].clientWidth}px)`; };
const go = (next) => { const max = maxIndex(); index = next > max ? 0 : next < 0 ? max : next; render(); };
carousel.querySelector("[data-carousel-prev]")?.addEventListener("click", () => go(index - 1));
carousel.querySelector("[data-carousel-next]")?.addEventListener("click", () => go(index + 1));
addEventListener("resize", () => go(Math.min(index, maxIndex())));
});
document.querySelectorAll("[data-callback]").forEach((form) => {
form.addEventListener("submit", (event) => {
event.preventDefault();
const note = form.parentElement.querySelector("[data-callback-note]");
if (note) note.hidden = false;
form.reset();
});
});
(() => {
const counters = document.querySelectorAll("[data-count-to]");
if (!counters.length || navigator.webdriver || matchMedia("(prefers-reduced-motion: reduce)").matches || !("IntersectionObserver" in window)) return;
const observer = new IntersectionObserver((entries) => {
entries.forEach(({ isIntersecting, target }) => {
if (!isIntersecting) return;
observer.unobserve(target);
const end = Number(target.dataset.countTo);
const suffix = target.dataset.countSuffix || "";
const start = performance.now();
const tick = (now) => {
const progress = Math.min((now - start) / 1200, 1);
target.textContent = Math.round(end * progress).toLocaleString() + suffix;
if (progress < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
});
});
counters.forEach((counter) => observer.observe(counter));
})();
(() => {
const items = document.querySelectorAll("[data-reveal]");
const skip = navigator.webdriver || !("IntersectionObserver" in window) || matchMedia("(prefers-reduced-motion: reduce)").matches;
if (!items.length || skip) return;
document.documentElement.classList.add("reveal-ready");
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
entry.target.classList.add("is-visible");
observer.unobserve(entry.target);
});
}, { rootMargin: "0px 0px -10% 0px" });
items.forEach((item) => observer.observe(item));
})();
</script>
</body>
</html>
From this template
Health & Fitness
Clinova
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