<!--
@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>
