Free
Navbar
Kinwell Navbar
A navbar block extracted from the Kinwell template, available in Tailwind CSS and Bootstrap.
0
2
kinwell.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>Kinwell Navbar | Tailwind CSS UI Block</title>
<meta name="description" content="A navbar block extracted from the Kinwell template, available in Tailwind CSS and Bootstrap.">
<meta name="keywords" content="Kinwell, Tailwind CSS template, HTML website template, health template, telehealth app, men's and women's health, online doctor, wellness app landing page, responsive health 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="Kinwell | Tailwind CSS Telehealth App Template">
<meta property="og:description" content="A bold, editorial Tailwind CSS health template for telehealth apps and wellness brands with oversized type, app screen mockups, treatment programs, membership plans, and an online shop.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="Kinwell template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="Kinwell | Tailwind CSS Telehealth App Template">
<meta name="twitter:description" content="A bold, editorial Tailwind CSS health template for telehealth apps and wellness brands with oversized type, app screen mockups, treatment programs, membership plans, and an online shop.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="Kinwell template preview">
<script src="https://cdn.tailwindcss.com"></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:wdth,wght@62..125,400..900&family=DM+Serif+Display&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
ink: '#221f1d',
cobalt: '#000f96',
magenta: '#c9006f',
pine: '#03603e',
teal: '#035066',
sand: '#b3ad7a',
mint: '#67b387',
brick: '#c14b4b',
lemon: '#e4f05d'
},
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
wide: ['Archivo', 'ui-sans-serif', 'sans-serif'],
serif: ['"DM Serif Display"', 'Georgia', '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; }
[hidden] { display: none !important; }
.font-wide { font-stretch: 125%; }
.font-black-wide { font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 125%; letter-spacing: -0.04em; line-height: .82; }
.care-gradient { background: linear-gradient(90deg, #3b33e0, #7d3ad2 45%, #e1449c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.health-gradient { background: linear-gradient(90deg, #03603e, #035066); -webkit-background-clip: text; background-clip: text; color: transparent; }
.phone { border-radius: 2.4rem; border: 9px solid #111; background: #f6f6f6; box-shadow: 0 40px 80px -30px rgba(0,0,0,.45); overflow: hidden; }
.phone-notch { width: 34%; height: 1.1rem; border-radius: 999px; background: #111; }
.glass-tile { background: rgba(255,255,255,.14); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12); }
.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; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
</style>
</head>
<body class="bg-[#3f3f3f] font-sans text-ink antialiased overflow-x-hidden">
<%
photo = ->(id, width = 900) { "https://images.unsplash.com/#{id}?auto=format&fit=crop&w=#{width}&q=80" }
concerns = [["Mental health", "mental-health"], ["Hair loss", "hair-loss"], ["Intimate health", "intimate-health"], ["Heart health", "heart-health"], ["Metabolic health", "metabolic-health"], ["Weight care", "weight-care"]]
tiles = [
["photo-1590417154498-ec4c5d293e0e", "Woman stretching her arms overhead against a cloudy sky", "", "treatments.html#mental-health"],
["photo-1645066928295-2506defde470", "Doctor in a white coat holding a tablet", "", "care.html"],
["photo-1666902752583-c2e9b6174927", "Two capsules resting on a reflective blue surface", "Introducing Clarity", "shop.html"],
["photo-1628595351029-c2bf17511435", "Glowing DNA double helix on a deep blue background", "", "treatments.html#heart-health"],
["photo-1722970651094-90f4d9b10089", "Sculpted porous white head in profile", "", "treatments.html#metabolic-health"],
["photo-1548733865-2ff7802d2b3f", "Woman with closed eyes and hands in her hair in black and white", "Your hair care guided start", "treatments.html#hair-loss"],
["photo-1715408050105-e6c1134b8064", "Man sitting against a wall striped with light and shadow", "", "plans.html"],
["photo-1594824476967-48c8b964273f", "Clinician in teal scrubs with arms crossed", "", "care.html"],
["photo-1659353888906-adb3e0041693", "Doctor in a white coat smiling in a bright clinic", "", "contact.html"]
]
lessons = [
["Welcome to your healthy ageing start", "Overview · 2 mins", "photo-1645066928295-2506defde470", "bg-pine", true],
["Ageing and your skin", "Chapter 1 · 5 mins", "photo-1594824476967-48c8b964273f", "bg-brick", false],
["What sleep does for you", "Chapter 2 · 7 mins", "photo-1715408050105-e6c1134b8064", "bg-teal", false]
]
care_team = [["Hair loss", "Dr. Owen Hale", "photo-1645066928295-2506defde470"], ["Skin clinic", "Dr. Amani Reyes", "photo-1594824476967-48c8b964273f"]]
modes = [["chat", "Chat", "fa-comment", "Dr. Amani Reyes", "Most people notice some dryness in the first four weeks. It settles, so keep going."], ["call", "Call", "fa-phone", "Dr. Owen Hale", "Calling your care team now. Average wait today: under two minutes."], ["video", "Video", "fa-video", "Dr. Amani Reyes", "Your video visit starts at 4:30 pm. We'll send a reminder ten minutes before."]]
socials = [["twitter", "Twitter", "https://twitter.com/"], ["instagram", "Instagram", "https://www.instagram.com/"], ["linkedin-in", "LinkedIn", "https://www.linkedin.com/"]]
%>
<!-- block:start navbar -->
<header id="top" class="absolute inset-x-0 z-40 mx-auto max-w-[1428px]">
<nav class="flex items-center justify-between px-5 py-6 md:px-12 md:py-10" aria-label="Main">
<a href="index.html" aria-current="page" class="font-serif text-2xl tracking-tight">Kin<span class="text-magenta">&</span>well</a>
<ul class="hidden items-center gap-8 text-sm lg:flex">
<% [["Treatments", "treatments.html"], ["Plans", "plans.html"], ["Care", "care.html"], ["Shop", "shop.html"], ["Contact", "contact.html"]].each do |label, href| %>
<li><a href="<%= href %>" class="text-ink/70 transition hover:text-ink"><%= label %></a></li>
<% end %>
</ul>
<div class="flex items-center gap-2">
<a href="plans.html" class="inline-flex items-center gap-2 rounded-full bg-white px-5 py-3 text-sm font-medium shadow-[0_10px_30px_-10px_rgba(0,0,0,.25)] transition hover:bg-ink hover:text-white"><i class="fa-brands fa-apple"></i> Get the app</a>
<button type="button" data-menu-toggle aria-controls="mobile-menu" aria-expanded="false" class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-ink text-white lg:hidden" aria-label="Open menu"><i class="fa-solid fa-bars"></i></button>
</div>
</nav>
<div id="mobile-menu" class="hidden mx-5 rounded-3xl bg-ink p-6 text-white shadow-xl lg:hidden">
<ul class="space-y-1 font-black-wide text-4xl uppercase">
<% [["Home", "index.html"], ["Treatments", "treatments.html"], ["Plans", "plans.html"], ["Care", "care.html"], ["Shop", "shop.html"], ["Contact", "contact.html"]].each_with_index do |(label, href), index| %>
<li><a href="<%= href %>" aria-current="<%= index.zero? ? 'page' : 'false' %>" class="block py-1 <%= index.zero? ? 'text-lemon' : 'hover:text-lemon' %>"><%= label %></a></li>
<% end %>
</ul>
</div>
</header>
<!-- block:end navbar -->
<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);
});
});
(() => {
const read = () => { try { return Number(localStorage.getItem("kinwell-cart") ?? 1); } catch (e) { return 1; } };
const write = (value) => { try { localStorage.setItem("kinwell-cart", String(value)); } catch (e) {} };
const paint = () => document.querySelectorAll("[data-cart-count]").forEach((el) => { el.textContent = read(); });
window.kinwellCart = { read, write, paint };
paint();
document.addEventListener("click", (event) => {
const add = event.target.closest("[data-add-cart]");
if (!add) return;
write(read() + 1);
paint();
const label = add.textContent;
add.textContent = "Added";
setTimeout(() => { add.textContent = label; }, 1200);
});
})();
document.querySelectorAll("[data-lessons]").forEach((section) => {
const tabs = [...section.querySelectorAll("[data-lesson-tab]")];
const panels = [...section.querySelectorAll("[data-lesson-panel]")];
tabs.forEach((tab, index) => tab.addEventListener("click", () => {
tabs.forEach((other) => other.setAttribute("aria-selected", String(other === tab)));
panels.forEach((panel, i) => { panel.hidden = i !== index; });
}));
section.querySelectorAll("[data-lesson]").forEach((lesson) => lesson.addEventListener("click", () => {
const done = lesson.getAttribute("aria-pressed") !== "true";
lesson.setAttribute("aria-pressed", String(done));
const icon = lesson.querySelector("[data-lesson-icon]");
if (!icon) return;
icon.classList.toggle("fa-circle-check", done);
icon.classList.toggle("text-green-600", done);
icon.classList.toggle("fa-rotate-right", !done);
}));
});
document.querySelectorAll("[data-modes]").forEach((section) => {
const buttons = [...section.querySelectorAll("[data-mode]")];
buttons.forEach((button) => button.addEventListener("click", () => {
buttons.forEach((other) => other.setAttribute("aria-selected", String(other === button)));
section.querySelectorAll("[data-mode-panel]").forEach((panel) => { panel.hidden = panel.dataset.modePanel !== button.dataset.mode; });
}));
});
document.querySelectorAll("[data-product]").forEach((product) => {
const toggle = product.querySelector("[data-subscribe]");
const price = product.querySelector("[data-price]");
const save = product.querySelector("[data-save]");
toggle?.addEventListener("click", () => {
const on = toggle.getAttribute("aria-pressed") !== "true";
toggle.setAttribute("aria-pressed", String(on));
toggle.textContent = on ? "Subscribed" : "Subscribe";
if (price) price.textContent = on ? "$17.85" : "$21.00";
if (save) save.textContent = on ? "15% off applied" : "15% off";
});
});
document.querySelectorAll("[data-contact-form]").forEach((form) => {
form.addEventListener("submit", (event) => {
event.preventDefault();
const note = form.querySelector("[data-form-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 ring = target.closest("section")?.querySelector("[data-ring]");
const start = performance.now();
const tick = (now) => {
const progress = Math.min((now - start) / 1200, 1);
const value = Math.round(end * progress);
target.textContent = value + suffix;
if (ring) ring.setAttribute("stroke-dashoffset", String(276.5 * (1 - value / 100)));
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
Kinwell
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