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