Component:
Header Product Light
Colors:
Description:
This carefully crafted Header component is perfect for Product landing pages, featuring a Light 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: Product
@style: Light
@category: Navigation, Page Section
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-200: #e5e7eb;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-blue-50: #eff6ff;
--color-blue-400: #60a5fa;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-800: #1e40af;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--max-width: 80rem; /* max-w-7xl */
--transition-duration: 200ms;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Base Styles */
body {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
line-height: 1.5;
}
.hidden {
display: none !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* Header Component */
.header {
position: relative;
background-color: var(--color-gray-50);
}
.header-container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1rem;
}
@media (min-width: 640px) {
.header-container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.header-container {
padding: 0 2rem;
}
}
.header-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 0;
}
/* Logo */
.logo {
display: flex;
align-items: center;
text-decoration: none;
}
.logo svg {
height: 2rem;
width: auto;
color: var(--color-blue-600);
}
.logo-text {
margin-left: 0.75rem;
font-size: 1.25rem;
font-weight: 500;
color: var(--color-gray-800);
}
/* Desktop Navigation */
.desktop-nav {
display: none;
align-items: center;
gap: 2rem;
}
@media (min-width: 768px) {
.desktop-nav {
display: flex;
}
}
.nav-link {
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-600);
text-decoration: none;
transition: color var(--transition-duration);
}
.nav-link:hover {
color: var(--color-gray-800);
}
/* Resources Dropdown */
.dropdown {
position: relative;
}
.dropdown-button {
display: flex;
align-items: center;
font-size: 1rem;
font-weight: 500 !important;
color: var(--color-gray-600);
background: none;
border: none;
cursor: pointer;
padding: 0;
font-family: inherit;
}
.dropdown-button:hover {
color: var(--color-gray-800);
}
.dropdown-icon {
margin-left: 0.25rem;
height: 1rem;
width: 1rem;
color: var(--color-gray-500);
flex-shrink: 0; /* Megakadályozza az ikon összenyomódását */
}
.dropdown-button:hover .dropdown-icon {
color: var(--color-gray-600);
}
.dropdown-menu {
position: absolute;
left: 50%;
top: 100%;
z-index: 10;
width: 14rem;
margin-top: 0.5rem;
padding: 1rem;
background: var(--color-white);
border-radius: 0.75rem;
box-shadow: var(--shadow-lg);
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
transition: all var(--transition-duration) ease-out;
}
.dropdown-menu.show {
opacity: 1;
visibility: visible;
}
.dropdown-item {
display: block;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
text-decoration: none;
}
.dropdown-item:not(:last-child) {
margin-bottom: 0.75rem;
}
.dropdown-item:hover {
background-color: var(--color-gray-50);
}
.dropdown-item-title {
color: var(--color-gray-700);
font-weight: 500;
}
.dropdown-item-description {
font-size: 0.875rem;
color: var(--color-gray-500);
font-weight: 300;
}
/* Desktop CTA Buttons */
.desktop-cta {
display: none;
align-items: center;
gap: 1rem;
}
@media (min-width: 768px) {
.desktop-cta {
display: flex;
}
}
.cta-secondary {
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-600);
text-decoration: none;
transition: color var(--transition-duration);
}
.cta-secondary:hover {
color: var(--color-gray-800);
}
.cta-primary {
display: inline-block;
padding: 0.75rem 1.5rem;
background: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 0.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-800);
text-decoration: none;
box-shadow: var(--shadow-sm);
transition: background-color var(--transition-duration);
}
.cta-primary:hover {
background-color: var(--color-gray-50);
}
/* Mobile Menu Button */
.mobile-menu-button {
display: flex;
padding: 0.5rem;
color: var(--color-gray-600);
background: none;
border: none;
border-radius: 0.375rem;
cursor: pointer;
}
.mobile-menu-button svg {
height: 1.5rem;
width: 1.5rem;
}
.menu-icon,
.close-icon {
display: block;
}
@media (min-width: 768px) {
.mobile-menu-button {
display: none;
}
}
.mobile-menu-button:hover {
background-color: var(--color-gray-50);
color: var(--color-gray-800);
}
.mobile-menu-button:focus {
outline: 2px solid var(--color-blue-400);
outline-offset: -2px;
}
/* Mobile Menu */
.mobile-menu {
display: none;
background: var(--color-white);
margin: 0 1rem 1rem;
border-radius: 0 0 0.75rem 0.75rem;
box-shadow: var(--shadow-lg);
}
.mobile-menu.show {
display: block;
}
.mobile-menu-items {
padding: 1rem;
}
.mobile-menu-link {
display: block;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-700);
text-decoration: none;
}
.mobile-menu-link:hover {
background-color: var(--color-gray-50);
}
.mobile-dropdown {
margin: 0.25rem 0;
}
.mobile-dropdown-button {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0.75rem;
border: none;
background: none;
border-radius: 0.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-700);
cursor: pointer;
}
.mobile-dropdown-button:hover {
background-color: var(--color-gray-50);
}
.mobile-dropdown-content {
display: none;
margin-left: 0.75rem;
}
.mobile-dropdown-content.show {
display: block;
}
.mobile-menu-cta {
border-top: 1px solid var(--color-gray-200);
padding: 1rem;
}
/* Announcement Banner */
.announcement {
background-color: var(--color-blue-600);
}
.announcement-container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0.75rem 1rem;
}
@media (min-width: 640px) {
.announcement-container {
padding: 0.75rem 1.5rem;
}
}
@media (min-width: 1024px) {
.announcement-container {
padding: 0.75rem 2rem;
}
}
.announcement-content {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.announcement-message {
flex: 1;
display: flex;
align-items: center;
}
.announcement-icon {
display: flex;
padding: 0.25rem;
background-color: var(--color-blue-800);
border-radius: 0.5rem;
}
.announcement-icon svg {
height: 1.25rem;
width: 1.25rem;
color: var(--color-white);
}
.announcement-text {
margin-left: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-white);
white-space: normal;
}
@media (min-width: 640px) {
.announcement-text {
white-space: nowrap;
}
}
.announcement-cta {
order: 3;
width: 100%;
margin-top: 0.5rem;
}
@media (min-width: 640px) {
.announcement-cta {
order: 2;
width: auto;
margin-top: 0;
}
}
.announcement-button {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
background: var(--color-white);
border: none;
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-blue-600);
text-decoration: none;
box-shadow: var(--shadow-sm);
}
.announcement-button:hover {
background-color: var(--color-blue-50);
}
.announcement-close {
order: 2;
margin-right: -0.25rem;
}
@media (min-width: 640px) {
.announcement-close {
order: 3;
margin-left: 0.75rem;
margin-right: -0.5rem;
}
}
.announcement-close-button {
display: flex;
padding: 0.5rem;
background: none;
border: none;
border-radius: 0.375rem;
cursor: pointer;
}
.announcement-close-button:hover {
background-color: var(--color-blue-500);
}
.announcement-close-button:focus {
outline: none;
ring: 2px solid var(--color-white);
}
.announcement-close-button svg {
height: 1.25rem;
width: 1.25rem;
color: var(--color-white);
}
</style>
<section class="header">
<div class="header-container">
<div class="header-nav">
<!-- Logo -->
<div class="logo-wrapper">
<a href="#" class="logo" aria-label="Product 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">ProductLab</span>
</a>
</div>
<!-- Desktop Navigation -->
<nav class="desktop-nav" aria-label="Main navigation">
<a href="#products" class="nav-link">Products</a>
<a href="#solutions" class="nav-link">Solutions</a>
<!-- Resources dropdown -->
<div class="dropdown">
<button type="button" class="dropdown-button" aria-expanded="false" aria-haspopup="true">
Resources
<svg class="dropdown-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" stroke="currentColor" stroke-width="1"/>
</svg>
</button>
<div class="dropdown-menu">
<a href="#guides" class="dropdown-item">
<div class="dropdown-item-title">Guides</div>
<p class="dropdown-item-description">Learn how to maximize our platform</p>
</a>
<a href="#documentation" class="dropdown-item">
<div class="dropdown-item-title">Documentation</div>
<p class="dropdown-item-description">API references and examples</p>
</a>
<a href="#webinars" class="dropdown-item">
<div class="dropdown-item-title">Webinars</div>
<p class="dropdown-item-description">Watch tutorials and product demos</p>
</a>
</div>
</div>
<a href="#pricing" class="nav-link">Pricing</a>
</nav>
<!-- Desktop CTA Buttons -->
<div class="desktop-cta">
<a href="#login" class="cta-secondary">Sign in</a>
<a href="#register" class="cta-primary">Start free trial</a>
</div>
<!-- Mobile menu button -->
<button type="button"
class="mobile-menu-button"
aria-controls="mobile-menu"
aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Icon when menu is closed -->
<svg class="menu-icon" 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="close-icon hidden" 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>
<!-- Mobile menu -->
<div class="mobile-menu" id="mobile-menu">
<div class="mobile-menu-items">
<a href="#products" class="mobile-menu-link">Products</a>
<a href="#solutions" class="mobile-menu-link">Solutions</a>
<!-- Mobile resources dropdown -->
<div class="mobile-dropdown">
<button class="mobile-dropdown-button">
Resources
<svg class="dropdown-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" stroke="currentColor" stroke-width="1"/>
</svg>
</button>
<div class="mobile-dropdown-content">
<a href="#guides" class="mobile-menu-link">Guides</a>
<a href="#documentation" class="mobile-menu-link">Documentation</a>
<a href="#webinars" class="mobile-menu-link">Webinars</a>
</div>
</div>
<a href="#pricing" class="mobile-menu-link">Pricing</a>
</div>
<div class="mobile-menu-cta">
<a href="#login" class="mobile-menu-link">Sign in</a>
<a href="#register" class="cta-primary" style="width: 100%; text-align: center;">Start free trial</a>
</div>
</div>
<!-- Announcement banner -->
<div class="announcement">
<div class="announcement-container">
<div class="announcement-content">
<div class="announcement-message">
<span class="announcement-icon">
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
</svg>
</span>
<p class="announcement-text">
New features available! Check out our latest product update.
</p>
</div>
<div class="announcement-cta">
<a href="#announcement" class="announcement-button">
Learn more
</a>
</div>
<div class="announcement-close">
<button type="button" class="announcement-close-button">
<span class="sr-only">Dismiss</span>
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
<script>
// Dropdown functionality
document.addEventListener('DOMContentLoaded', function() {
// Desktop dropdown
const dropdownButton = document.querySelector('.dropdown-button');
const dropdownMenu = document.querySelector('.dropdown-menu');
let dropdownTimeout;
function showDropdown() {
clearTimeout(dropdownTimeout);
dropdownMenu.classList.add('show');
dropdownButton.setAttribute('aria-expanded', 'true');
}
function hideDropdown() {
dropdownTimeout = setTimeout(() => {
dropdownMenu.classList.remove('show');
dropdownButton.setAttribute('aria-expanded', 'false');
}, 200);
}
dropdownButton.parentElement.addEventListener('mouseenter', showDropdown);
dropdownButton.parentElement.addEventListener('mouseleave', hideDropdown);
// Mobile menu
const mobileMenuButton = document.querySelector('.mobile-menu-button');
const mobileMenu = document.querySelector('.mobile-menu');
const menuIcon = document.querySelector('.menu-icon');
const closeIcon = document.querySelector('.close-icon');
mobileMenuButton.addEventListener('click', () => {
const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
mobileMenu.classList.toggle('show');
menuIcon.classList.toggle('hidden');
closeIcon.classList.toggle('hidden');
});
// Mobile dropdown
const mobileDropdownButton = document.querySelector('.mobile-dropdown-button');
const mobileDropdownContent = document.querySelector('.mobile-dropdown-content');
mobileDropdownButton.addEventListener('click', () => {
const isExpanded = mobileDropdownButton.getAttribute('aria-expanded') === 'true';
mobileDropdownButton.setAttribute('aria-expanded', !isExpanded);
mobileDropdownContent.classList.toggle('show');
});
// Announcement banner close
const announcementCloseButton = document.querySelector('.announcement-close-button');
const announcement = document.querySelector('.announcement');
announcementCloseButton.addEventListener('click', () => {
announcement.style.display = 'none';
});
});
</script>
<!--
@type: Header
@industry: Product
@style: Light
@category: Navigation, Page Section
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-50 relative" x-data="{ mobileMenuOpen: false, dropdownOpen: false }">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between py-6">
<!-- Logo -->
<div class="flex-shrink-0 flex items-center">
<a href="#" class="flex items-center" aria-label="Product homepage">
<!-- Product logo SVG -->
<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-3 text-xl font-medium text-gray-800">ProductLab</span>
</a>
</div>
<!-- Desktop Navigation -->
<nav class="hidden md:flex items-center space-x-8" aria-label="Main navigation">
<a href="#products" class="text-base font-medium text-gray-600 hover:text-gray-800 transition-colors">Products</a>
<a href="#solutions" class="text-base font-medium text-gray-600 hover:text-gray-800 transition-colors">Solutions</a>
<!-- Resources dropdown -->
<div class="relative" @mouseenter="dropdownOpen = true" @mouseleave="dropdownOpen = false">
<button type="button" class="text-base font-medium text-gray-600 hover:text-gray-800 transition-colors flex items-center group" aria-expanded="false" aria-haspopup="true">
Resources
<svg class="ml-1 h-4 w-4 text-gray-500 group-hover:text-gray-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" stroke="currentColor" stroke-width="1"/>
</svg>
</button>
<!-- Dropdown menu -->
<div x-show="dropdownOpen"
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"
class="absolute left-1/2 z-10 mt-2 w-56 -translate-x-1/2 transform rounded-xl bg-white p-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
style="display: none;">
<div class="space-y-3">
<a href="#guides" class="block rounded-lg px-3 py-2 text-base text-gray-700 hover:bg-gray-50">
<div class="font-medium">Guides</div>
<p class="text-sm text-gray-500 font-light">Learn how to maximize our platform</p>
</a>
<a href="#documentation" class="block rounded-lg px-3 py-2 text-base text-gray-700 hover:bg-gray-50">
<div class="font-medium">Documentation</div>
<p class="text-sm text-gray-500 font-light">API references and examples</p>
</a>
<a href="#webinars" class="block rounded-lg px-3 py-2 text-base text-gray-700 hover:bg-gray-50">
<div class="font-medium">Webinars</div>
<p class="text-sm text-gray-500 font-light">Watch tutorials and product demos</p>
</a>
</div>
</div>
</div>
<a href="#pricing" class="text-base font-medium text-gray-600 hover:text-gray-800 transition-colors">Pricing</a>
</nav>
<!-- Desktop CTA Buttons -->
<div class="hidden md:flex items-center space-x-4">
<a href="#login" class="text-base font-medium text-gray-600 hover:text-gray-800 transition-colors">
Sign in
</a>
<a href="#register" class="bg-white font-medium border border-gray-200 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-50 shadow-sm transition-colors">
Start free trial
</a>
</div>
<!-- Mobile menu button -->
<div class="md:hidden">
<button type="button"
class="inline-flex items-center justify-center rounded-md p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-400"
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="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="bg-white shadow-lg rounded-b-xl mx-4 mb-4">
<div class="space-y-1 px-4 py-4">
<a href="#products" class="block rounded-lg px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50">Products</a>
<a href="#solutions" class="block rounded-lg px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50">Solutions</a>
<!-- Mobile resources dropdown -->
<div x-data="{ open: false }">
<button @click="open = !open" class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50" aria-expanded="false">
Resources
<svg class="ml-1 h-4 w-4 text-gray-500 group-hover:text-gray-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" stroke="currentColor" stroke-width="1"/>
</svg>
</button>
<div x-show="open" class="ml-3 space-y-1">
<a href="#guides" class="block rounded-lg px-3 py-2 text-base font-medium text-gray-600 hover:bg-gray-50">Guides</a>
<a href="#documentation" class="block rounded-lg px-3 py-2 text-base font-medium text-gray-600 hover:bg-gray-50">Documentation</a>
<a href="#webinars" class="block rounded-lg px-3 py-2 text-base font-medium text-gray-600 hover:bg-gray-50">Webinars</a>
</div>
</div>
<a href="#pricing" class="block rounded-lg px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50">Pricing</a>
</div>
<div class="border-t border-gray-200 px-4 py-4 space-y-3">
<a href="#login" class="block rounded-lg px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50">
Sign in
</a>
<a href="#register" class="block w-full text-center bg-white font-medium border border-gray-200 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-50 shadow-sm transition-colors">
Start free trial
</a>
</div>
</div>
</div>
<!-- Announcement banner -->
<div class="bg-blue-600">
<div class="max-w-7xl mx-auto py-3 px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between flex-wrap">
<div class="flex-1 flex items-center">
<span class="flex p-1 rounded-lg bg-blue-800">
<svg class="h-5 w-5 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
</svg>
</span>
<p class="ml-3 text-sm font-medium text-white truncate sm:whitespace-nowrap whitespace-normal">
New features available! Check out our latest product update.
</p>
</div>
<div class="order-3 mt-2 w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:w-auto">
<a href="#announcement" class="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-blue-600 bg-white hover:bg-blue-50">
Learn more
</a>
</div>
<div class="order-2 flex-shrink-0 sm:order-3 sm:ml-3">
<button type="button" class="-mr-1 flex p-2 rounded-md hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Alpine.js for dropdown and mobile menu functionality -->
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></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