Component:
Header SaaS Minimal
Colors:
Description:
This carefully crafted Header component is perfect for SaaS 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: Header
@industry: SaaS
@style: Minimal
@category: Navigation, Page Section
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-400: #9ca3af;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
/* Spacing */
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-8: 2rem;
/* Typography */
--text-base: 1rem;
--text-xl: 1.25rem;
/* Other */
--transition-duration: 200ms;
--max-width: 80rem; /* 7xl */
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Component Styles */
.header-section {
position: relative;
background-color: var(--color-white);
}
.header-container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--spacing-4);
}
.header-nav {
display: flex;
height: 4rem;
align-items: center;
justify-content: space-between;
}
/* Logo */
.logo-link {
display: flex;
align-items: center;
text-decoration: none;
}
.logo-icon {
height: 2rem;
width: auto;
color: var(--color-blue-600);
}
.logo-text {
margin-left: var(--spacing-2);
font-size: var(--text-xl);
font-weight: 600;
color: var(--color-gray-900);
}
/* Desktop Navigation */
.desktop-nav {
display: none;
}
.nav-link {
font-size: var(--text-base);
font-weight: 500;
color: var(--color-gray-600);
text-decoration: none;
transition: color var(--transition-duration);
}
.nav-link:hover {
color: var(--color-gray-900);
}
/* Desktop CTA */
.desktop-cta {
display: none;
}
.cta-login {
font-size: var(--text-base);
font-weight: 500;
color: var(--color-gray-600);
text-decoration: none;
transition: color var(--transition-duration);
}
.cta-login:hover {
color: var(--color-gray-900);
}
.cta-trial {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem var(--spacing-4);
border-radius: 0.375rem;
background-color: var(--color-blue-600);
color: var(--color-white);
font-size: var(--text-base);
font-weight: 500;
text-decoration: none;
transition: background-color var(--transition-duration);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.cta-trial:hover {
background-color: var(--color-blue-700);
}
.cta-trial:focus {
outline: none;
ring: 2px solid var(--color-blue-500);
ring-offset: 2px;
}
/* Mobile Menu Button */
.mobile-menu-wrapper {
display: block;
}
.mobile-menu-btn {
display: flex;
padding: var(--spacing-2);
border-radius: 0.375rem;
color: var(--color-gray-400);
transition: all var(--transition-duration);
border: none;
background: none;
cursor: pointer;
}
.mobile-menu-btn:hover {
background-color: var(--color-gray-100);
color: var(--color-gray-500);
}
.mobile-menu-btn:focus {
outline: none;
ring: 2px solid var(--color-blue-500);
ring-inset: true;
}
.menu-icon {
height: 1.5rem;
width: 1.5rem;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.hidden {
display: none;
}
.block {
display: block;
}
/* Mobile Menu */
.mobile-menu {
display: block;
background-color: var(--color-white);
}
.mobile-menu.active {
display: block;
}
.mobile-nav-links {
padding: var(--spacing-2) var(--spacing-4) 0.75rem;
}
.mobile-nav-link {
display: block;
padding: var(--spacing-2) var(--spacing-3);
border-radius: 0.375rem;
font-size: var(--text-base);
font-weight: 500;
color: var(--color-gray-600);
text-decoration: none;
transition: all var(--transition-duration);
}
.mobile-nav-link:hover {
background-color: var(--color-gray-50);
color: var(--color-gray-900);
}
.mobile-cta {
border-top: 1px solid var(--color-gray-200);
padding: var(--spacing-4) var(--spacing-4) 0.75rem;
}
.mobile-cta-trial {
display: block;
padding: var(--spacing-2) var(--spacing-3);
border-radius: 0.375rem;
background-color: var(--color-blue-600);
color: var(--color-white);
font-size: var(--text-base);
font-weight: 500;
text-decoration: none;
transition: background-color var(--transition-duration);
}
.mobile-cta-trial:hover {
background-color: var(--color-blue-700);
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.header-container {
padding: 0 var(--spacing-8);
}
}
@media (min-width: 768px) {
.mobile-menu-wrapper {
display: none;
}
.mobile-menu-btn {
display: none;
}
.mobile-menu {
display: none !important;
}
.desktop-nav {
display: flex;
gap: var(--spacing-8);
}
.desktop-cta {
display: flex;
align-items: center;
gap: var(--spacing-4);
}
}
</style>
<section class="header-section" x-data="{ mobileMenuOpen: false }">
<div class="header-container">
<div class="header-nav">
<!-- Logo -->
<div class="logo">
<a href="#" class="logo-link" aria-label="Homepage">
<svg class="logo-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="logo-text">CloudFlow</span>
</a>
</div>
<!-- Desktop Navigation -->
<nav class="desktop-nav" aria-label="Main navigation">
<a href="#features" class="nav-link">Features</a>
<a href="#pricing" class="nav-link">Pricing</a>
<a href="#about" class="nav-link">About</a>
<a href="#contact" class="nav-link">Contact</a>
</nav>
<!-- Desktop CTA Buttons -->
<div class="desktop-cta">
<a href="#login" class="cta-login">Log in</a>
<a href="#signup" class="cta-trial">Start Free Trial</a>
</div>
<!-- Mobile menu button -->
<div class="mobile-menu-wrapper">
<button type="button"
class="mobile-menu-btn"
aria-controls="mobile-menu"
aria-expanded="false"
@click="mobileMenuOpen = !mobileMenuOpen">
<span class="sr-only">Open main menu</span>
<!-- Icon when menu is closed -->
<svg class="menu-icon" :class="{'hidden': mobileMenuOpen, 'block': !mobileMenuOpen }" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<!-- Icon when menu is open -->
<svg class="menu-icon" :class="{'block': mobileMenuOpen, 'hidden': !mobileMenuOpen }" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="mobile-menu" id="mobile-menu" x-show="mobileMenuOpen"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-1">
<div class="mobile-nav-links">
<a href="#features" class="mobile-nav-link">Features</a>
<a href="#pricing" class="mobile-nav-link">Pricing</a>
<a href="#about" class="mobile-nav-link">About</a>
<a href="#contact" class="mobile-nav-link">Contact</a>
</div>
<div class="mobile-cta">
<div class="mobile-cta-links">
<a href="#login" class="mobile-nav-link">Log in</a>
<a href="#signup" class="mobile-cta-trial">Start Free Trial</a>
</div>
</div>
</div>
</section>
<!-- Alpine.js for mobile menu functionality -->
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('header', () => ({
mobileMenuOpen: false,
toggleMenu() {
this.mobileMenuOpen = !this.mobileMenuOpen;
}
}));
});
</script>
<!--
@type: Header
@industry: SaaS
@style: Minimal
@category: Navigation, Page Section
@framework: Tailwind
@license: Free
-->
<section class="relative bg-white" x-data="{ mobileMenuOpen: false }">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex h-16 items-center justify-between">
<!-- Logo -->
<div class="flex-shrink-0">
<a href="#" class="flex items-center" aria-label="Homepage">
<svg class="h-8 w-auto text-blue-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="ml-2 text-xl font-semibold text-gray-900">CloudFlow</span>
</a>
</div>
<!-- Desktop Navigation -->
<nav class="hidden md:flex md:space-x-8" aria-label="Main navigation">
<a href="#features" class="text-base font-medium text-gray-600 hover:text-gray-900">Features</a>
<a href="#pricing" class="text-base font-medium text-gray-600 hover:text-gray-900">Pricing</a>
<a href="#about" class="text-base font-medium text-gray-600 hover:text-gray-900">About</a>
<a href="#contact" class="text-base font-medium text-gray-600 hover:text-gray-900">Contact</a>
</nav>
<!-- Desktop CTA Buttons -->
<div class="hidden md:flex md:items-center md:space-x-4">
<a href="#login" class="text-base font-medium text-gray-600 hover:text-gray-900">
Log in
</a>
<a href="#signup" class="inline-flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Start Free Trial
</a>
</div>
<!-- Mobile menu button -->
<div class="flex md:hidden">
<button type="button"
class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
aria-controls="mobile-menu"
aria-expanded="false"
@click="mobileMenuOpen = !mobileMenuOpen">
<span class="sr-only">Open main menu</span>
<!-- Icon when menu is closed -->
<svg class="block h-6 w-6" :class="{'hidden': mobileMenuOpen, 'block': !mobileMenuOpen }" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<!-- Icon when menu is open -->
<svg class="h-6 w-6" :class="{'block': mobileMenuOpen, 'hidden': !mobileMenuOpen }" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="md:hidden" id="mobile-menu" x-show="mobileMenuOpen" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-1">
<div class="space-y-1 px-4 pb-3 pt-2">
<a href="#features" class="block rounded-md px-3 py-2 text-base font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900">Features</a>
<a href="#pricing" class="block rounded-md px-3 py-2 text-base font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900">Pricing</a>
<a href="#about" class="block rounded-md px-3 py-2 text-base font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900">About</a>
<a href="#contact" class="block rounded-md px-3 py-2 text-base font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900">Contact</a>
</div>
<div class="border-t border-gray-200 pb-3 pt-4">
<div class="space-y-1 px-4">
<a href="#login" class="block rounded-md px-3 py-2 text-base font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900">
Log in
</a>
<a href="#signup" class="block rounded-md bg-blue-600 px-3 py-2 text-base font-medium text-white hover:bg-blue-700">
Start Free Trial
</a>
</div>
</div>
</div>
</section>
<!-- Alpine.js for mobile menu functionality -->
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('header', () => ({
mobileMenuOpen: false,
toggleMenu() {
this.mobileMenuOpen = !this.mobileMenuOpen;
}
}));
});
</script>
This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Only 42 early bird spots left 40% offUnlock for $29
(one-time payment)Early bird discount. Regular price $49
Premium components
Get access to all pro Tailwind CSS 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