Component:
Header Software Minimal
Colors:
Description:
This carefully crafted Header component is perfect for Software 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: Software
@style: Minimal
@category: Navigation, Page Section
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-400: #9ca3af;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-indigo-50: #eef2ff;
--color-indigo-400: #818cf8;
--color-indigo-500: #6366f1;
--color-indigo-600: #4f46e5;
--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);
}
* {
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";
}
.header {
position: relative;
background-color: var(--color-white);
border-bottom: 1px solid var(--color-gray-100);
}
.header-container {
max-width: 80rem;
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-content {
display: flex;
height: 5rem;
align-items: center;
justify-content: space-between;
}
.logo {
flex-shrink: 0;
}
.logo a {
display: flex;
align-items: center;
text-decoration: none;
}
.logo svg {
height: 2rem;
width: auto;
color: var(--color-indigo-500);
}
.logo span {
margin-left: 0.75rem;
font-size: 1.25rem;
font-weight: 500;
color: var(--color-gray-900);
}
.desktop-nav {
display: none;
}
@media (min-width: 768px) {
.desktop-nav {
display: flex;
gap: 2.5rem;
}
}
.nav-link {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-gray-600);
text-decoration: none;
transition: color 0.2s;
}
.nav-link:hover {
color: var(--color-gray-900);
}
.solutions-dropdown {
position: relative;
}
.dropdown-button {
display: inline-flex;
align-items: center;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-gray-600);
background: none;
border: none;
cursor: pointer;
transition: color 0.2s;
}
.dropdown-button:hover {
color: var(--color-gray-900);
}
.dropdown-button svg {
margin-left: 0.25rem;
height: 1rem;
width: 1rem;
color: var(--color-gray-400);
}
.dropdown-button:hover svg {
color: var(--color-gray-600);
}
.dropdown-menu {
display: none;
position: absolute;
left: 50%;
top: 100%;
z-index: 10;
width: 20rem;
max-width: 20rem;
transform: translateX(-50%);
margin-top: 0.75rem;
padding: 0 0.5rem;
}
.solutions-dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-content {
background-color: var(--color-white);
border-radius: 0.5rem;
box-shadow: var(--shadow-lg);
overflow: hidden;
border: 1px solid var(--color-gray-100);
}
.dropdown-items {
display: grid;
gap: 0.25rem;
padding: 1rem;
}
.dropdown-item {
display: flex;
align-items: flex-start;
padding: 0.75rem;
border-radius: 0.5rem;
text-decoration: none;
}
.dropdown-item:hover {
background-color: var(--color-gray-50);
}
.dropdown-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.375rem;
background-color: var(--color-indigo-50);
color: var(--color-indigo-500);
flex-shrink: 0;
}
.dropdown-icon svg {
width: 1.5rem;
height: 1.5rem;
}
.dropdown-text {
margin-left: 1rem;
}
.dropdown-title {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-gray-900);
}
.dropdown-description {
margin-top: 0.25rem;
font-size: 0.75rem;
color: var(--color-gray-500);
}
.desktop-cta {
display: none;
}
@media (min-width: 768px) {
.desktop-cta {
display: flex;
align-items: center;
gap: 1.5rem;
}
}
.sign-in {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-gray-600);
text-decoration: none;
transition: color 0.2s;
}
.sign-in:hover {
color: var(--color-gray-900);
}
.get-started {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-white);
background-color: var(--color-indigo-500);
border-radius: 0.375rem;
text-decoration: none;
box-shadow: var(--shadow-sm);
transition: background-color 0.2s;
}
.get-started:hover {
background-color: var(--color-indigo-600);
}
.get-started:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-400);
}
.mobile-menu-button {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
color: var(--color-gray-400);
border-radius: 0.375rem;
border: none;
background: none;
cursor: pointer;
}
@media (min-width: 768px) {
.mobile-menu-button {
display: none;
}
}
.mobile-menu-button:hover {
background-color: var(--color-gray-50);
color: var(--color-gray-500);
}
.mobile-menu-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-400);
}
.mobile-menu-button svg {
width: 1.5rem;
height: 1.5rem;
}
.mobile-menu {
display: none;
background-color: var(--color-white);
}
.mobile-menu.active {
display: block;
}
@media (min-width: 768px) {
.mobile-menu {
display: none !important;
}
}
.mobile-nav {
padding: 0.5rem 1rem 0.75rem;
}
.mobile-nav-link {
display: block;
padding: 0.5rem 0.75rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-600);
text-decoration: none;
border-radius: 0.375rem;
}
.mobile-nav-link:hover {
background-color: var(--color-gray-50);
color: var(--color-gray-900);
}
.mobile-solutions {
width: 100%;
text-align: left;
padding: 0.5rem 0.75rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-600);
border: none;
background: none;
border-radius: 0.375rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.mobile-solutions:hover {
background-color: var(--color-gray-50);
color: var(--color-gray-900);
}
.mobile-solutions svg {
width: 1.25rem;
height: 1.25rem;
color: var(--color-gray-400);
}
.mobile-dropdown {
display: none;
margin-top: 0.5rem;
padding-left: 1rem;
}
.mobile-dropdown.active {
display: block;
}
.mobile-dropdown-link {
display: block;
padding: 0.5rem 0.75rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-500);
text-decoration: none;
border-radius: 0.375rem;
}
.mobile-dropdown-link:hover {
background-color: var(--color-gray-50);
color: var(--color-gray-900);
}
.mobile-cta {
border-top: 1px solid var(--color-gray-200);
padding: 0.75rem 1rem;
}
.mobile-cta-container {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 0 1rem;
}
.mobile-sign-in {
display: block;
padding: 0.5rem 0.75rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-600);
text-decoration: none;
border-radius: 0.375rem;
}
.mobile-sign-in:hover {
background-color: var(--color-gray-50);
color: var(--color-gray-900);
}
.mobile-get-started {
display: block;
width: 100%;
padding: 0.5rem 0.75rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-white);
text-decoration: none;
text-align: center;
background-color: var(--color-indigo-500);
border-radius: 0.375rem;
}
.mobile-get-started:hover {
background-color: var(--color-indigo-600);
}
</style>
<section class="header">
<div class="header-container">
<div class="header-content">
<!-- Logo -->
<div class="logo">
<a href="#" aria-label="Homepage">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 2L4.094 6.938C3.432 7.294 3 7.978 3 8.72V15.28C3 16.022 3.432 16.706 4.094 17.062L13 22L21.906 17.062C22.568 16.706 23 16.022 23 15.28V8.72C23 7.978 22.568 7.294 21.906 6.938L13 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 7L13 12L23 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 12V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>DevStack</span>
</a>
</div>
<!-- Desktop Navigation -->
<nav class="desktop-nav" aria-label="Main navigation">
<a href="#products" class="nav-link">Products</a>
<!-- Solutions dropdown -->
<div class="solutions-dropdown">
<button type="button" class="dropdown-button" aria-expanded="false">
<span>Solutions</span>
<svg 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" />
</svg>
</button>
<!-- Dropdown menu -->
<div class="dropdown-menu">
<div class="dropdown-content">
<div class="dropdown-items">
<a href="#enterprise" class="dropdown-item">
<div class="dropdown-icon">
<svg 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 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" />
</svg>
</div>
<div class="dropdown-text">
<p class="dropdown-title">Enterprise</p>
<p class="dropdown-description">Solutions for large organizations</p>
</div>
</a>
<a href="#startups" class="dropdown-item">
<div class="dropdown-icon">
<svg 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 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
</svg>
</div>
<div class="dropdown-text">
<p class="dropdown-title">Startups</p>
<p class="dropdown-description">Flexible tools for growing teams</p>
</div>
</a>
</div>
</div>
</div>
</div>
<a href="#documentation" class="nav-link">Documentation</a>
<a href="#pricing" class="nav-link">Pricing</a>
</nav>
<!-- Desktop CTA Buttons -->
<div class="desktop-cta">
<a href="#login" class="sign-in">Sign in</a>
<a href="#signup" class="get-started">Get started</a>
</div>
<!-- Mobile menu button -->
<button type="button"
class="mobile-menu-button"
aria-controls="mobile-menu"
aria-expanded="false">
<!-- 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" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" style="display: none;">
<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">
<nav class="mobile-nav">
<a href="#products" class="mobile-nav-link">Products</a>
<!-- Mobile solutions dropdown -->
<div class="mobile-solutions-container">
<button class="mobile-solutions">
Solutions
<svg 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" />
</svg>
</button>
<div class="mobile-dropdown">
<a href="#enterprise" class="mobile-dropdown-link">Enterprise</a>
<a href="#startups" class="mobile-dropdown-link">Startups</a>
</div>
</div>
<a href="#documentation" class="mobile-nav-link">Documentation</a>
<a href="#pricing" class="mobile-nav-link">Pricing</a>
</nav>
<div class="mobile-cta">
<div class="mobile-cta-container">
<a href="#login" class="mobile-sign-in">Sign in</a>
<a href="#signup" class="mobile-get-started">Get started</a>
</div>
</div>
</div>
</section>
<script>
// Mobile menu functionality
document.addEventListener('DOMContentLoaded', function() {
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');
const mobileSolutionsButton = document.querySelector('.mobile-solutions');
const mobileDropdown = document.querySelector('.mobile-dropdown');
let isMenuOpen = false;
let isSolutionsOpen = false;
mobileMenuButton.addEventListener('click', () => {
isMenuOpen = !isMenuOpen;
mobileMenu.classList.toggle('active');
menuIcon.style.display = isMenuOpen ? 'none' : 'block';
closeIcon.style.display = isMenuOpen ? 'block' : 'none';
mobileMenuButton.setAttribute('aria-expanded', isMenuOpen);
});
mobileSolutionsButton.addEventListener('click', () => {
isSolutionsOpen = !isSolutionsOpen;
mobileDropdown.classList.toggle('active');
});
});
</script>
<!--
@type: Header
@industry: Software
@style: Minimal
@category: Navigation, Page Section
@framework: Tailwind
@license: Free
-->
<section class="relative bg-white border-b border-gray-100" x-data="{ mobileMenuOpen: false, solutionsOpen: false }">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex h-20 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-indigo-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 2L4.094 6.938C3.432 7.294 3 7.978 3 8.72V15.28C3 16.022 3.432 16.706 4.094 17.062L13 22L21.906 17.062C22.568 16.706 23 16.022 23 15.28V8.72C23 7.978 22.568 7.294 21.906 6.938L13 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 7L13 12L23 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 12V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="ml-3 text-xl font-medium text-gray-900">DevStack</span>
</a>
</div>
<!-- Desktop Navigation -->
<nav class="hidden md:flex md:space-x-10" aria-label="Main navigation">
<a href="#products" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors duration-200">Products</a>
<!-- Solutions dropdown -->
<div class="relative leading-none" @mouseenter="solutionsOpen = true" @mouseleave="solutionsOpen = false">
<button type="button" class="group inline-flex items-center text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors duration-200" aria-expanded="false">
<span>Solutions</span>
<svg class="ml-1 h-4 w-4 text-gray-400 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" />
</svg>
</button>
<!-- Dropdown menu -->
<div x-show="solutionsOpen"
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-3 w-screen max-w-xs -translate-x-1/2 transform px-2"
style="display: none;">
<div class="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
<div class="relative grid gap-1 bg-white p-4">
<a href="#enterprise" class="flex items-start rounded-lg p-3 hover:bg-gray-50">
<div class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-50 text-indigo-500">
<svg class="h-6 w-6" 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 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" />
</svg>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-900">Enterprise</p>
<p class="mt-1 text-xs text-gray-500">Solutions for large organizations</p>
</div>
</a>
<a href="#startups" class="flex items-start rounded-lg p-3 hover:bg-gray-50">
<div class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-50 text-indigo-500">
<svg class="h-6 w-6" 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 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
</svg>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-900">Startups</p>
<p class="mt-1 text-xs text-gray-500">Flexible tools for growing teams</p>
</div>
</a>
</div>
</div>
</div>
</div>
<a href="#documentation" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors duration-200">Documentation</a>
<a href="#pricing" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors duration-200">Pricing</a>
</nav>
<!-- Desktop CTA Buttons -->
<div class="hidden md:flex md:items-center md:space-x-6">
<a href="#login" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors duration-200">
Sign in
</a>
<a href="#signup" class="inline-flex items-center justify-center rounded-md bg-indigo-500 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2">
Get started
</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-50 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-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"
style="display: none;">
<div class="space-y-1 px-4 pb-3 pt-2">
<a href="#products" class="block rounded-md px-3 py-2 text-base font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900">Products</a>
<!-- Mobile solutions dropdown -->
<div x-data="{ open: false }">
<button @click="open = !open" class="flex w-full items-center justify-between rounded-md px-3 py-2 text-base font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900">
Solutions
<svg class="h-5 w-5 text-gray-400" 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" />
</svg>
</button>
<div x-show="open" class="mt-2 space-y-2 pl-4">
<a href="#enterprise" class="block rounded-md px-3 py-2 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900">Enterprise</a>
<a href="#startups" class="block rounded-md px-3 py-2 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900">Startups</a>
</div>
</div>
<a href="#documentation" class="block rounded-md px-3 py-2 text-base font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900">Documentation</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>
</div>
<div class="border-t border-gray-200 pb-3 pt-4">
<div class="space-y-3 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">
Sign in
</a>
<a href="#signup" class="block w-full rounded-md bg-indigo-500 px-3 py-2 text-center text-base font-medium text-white hover:bg-indigo-600">
Get started
</a>
</div>
</div>
</div>
</section>
<!-- Alpine.js for 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