Headers
Centered With Bottom Border
/* This example requires Tailwind CSS v2.0+ */
import { Fragment } from 'react'
import { Popover, Transition } from '@headlessui/react'
import {
BookmarkAltIcon,
CalendarIcon,
ChartBarIcon,
CursorClickIcon,
MenuIcon,
PhoneIcon,
PlayIcon,
RefreshIcon,
ShieldCheckIcon,
SupportIcon,
ViewGridIcon,
XIcon,
} from '@heroicons/react/outline'
import { ChevronDownIcon } from '@heroicons/react/solid'
const solutions = [
{
name: 'Analytics',
description: 'Get a better understanding of where your traffic is coming from.',
href: '#',
icon: ChartBarIcon,
},
{
name: 'Engagement',
description: 'Speak directly to your customers in a more meaningful way.',
href: '#',
icon: CursorClickIcon,
},
{ name: 'Security', description: "Your customers' data will be safe and secure.", href: '#', icon: ShieldCheckIcon },
{
name: 'Integrations',
description: "Connect with third-party tools that you're already using.",
href: '#',
icon: ViewGridIcon,
},
{
name: 'Automations',
description: 'Build strategic funnels that will drive your customers to convert',
href: '#',
icon: RefreshIcon,
},
]
const callsToAction = [
{ name: 'Watch Demo', href: '#', icon: PlayIcon },
{ name: 'Contact Sales', href: '#', icon: PhoneIcon },
]
const resources = [
{
name: 'Help Center',
description: 'Get all of your questions answered in our forums or contact support.',
href: '#',
icon: SupportIcon,
},
{
name: 'Guides',
description: 'Learn how to maximize our platform to get the most out of it.',
href: '#',
icon: BookmarkAltIcon,
},
{
name: 'Events',
description: 'See what meet-ups and other events we might be planning near you.',
href: '#',
icon: CalendarIcon,
},
{ name: 'Security', description: 'Understand how we take your privacy seriously.', href: '#', icon: ShieldCheckIcon },
]
const recentPosts = [
{ id: 1, name: 'Boost your conversion rate', href: '#' },
{ id: 2, name: 'How to use search engine optimization to drive traffic to your site', href: '#' },
{ id: 3, name: 'Improve your customer experience', href: '#' },
]
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Example() {
return (
<Popover className="relative bg-white">
{({ open }) => (
<>
<div className="max-w-7xl mx-auto px-4 sm:px-6">
<div className="flex justify-between items-center border-b-2 border-gray-100 py-6 md:justify-start md:space-x-10">
<div className="flex justify-start lg:w-0 lg:flex-1">
<a href="#">
<span className="sr-only">Loesen</span>
<img
className="h-8 w-auto sm:h-10"
src="/images/loesen-logo.svg"
alt="Loesen SA"
/>
</a>
</div>
<div className="-mr-2 -my-2 md:hidden">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
<span className="sr-only">Open menu</span>
<MenuIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
<Popover.Group as="nav" className="hidden md:flex space-x-10">
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={classNames(
open ? 'text-gray-900' : 'text-gray-500',
'group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
)}
>
<span>Solutions</span>
<ChevronDownIcon
className={classNames(
open ? 'text-gray-600' : 'text-gray-400',
'ml-2 h-5 w-5 group-hover:text-gray-500'
)}
aria-hidden="true"
/>
</Popover.Button>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel
static
className="absolute z-10 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2"
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50"
>
<item.icon className="flex-shrink-0 h-6 w-6 text-blue-600" aria-hidden="true" />
<div className="ml-4">
<p className="text-base font-medium text-gray-900">{item.name}</p>
<p className="mt-1 text-sm text-gray-500">{item.description}</p>
</div>
</a>
))}
</div>
<div className="px-5 py-5 bg-gray-50 space-y-6 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8">
{callsToAction.map((item) => (
<div key={item.name} className="flow-root">
<a
href={item.href}
className="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 hover:bg-gray-100"
>
<item.icon className="flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
<span className="ml-3">{item.name}</span>
</a>
</div>
))}
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
Pricing
</a>
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
Docs
</a>
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={classNames(
open ? 'text-gray-900' : 'text-gray-500',
'group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
)}
>
<span>More</span>
<ChevronDownIcon
className={classNames(
open ? 'text-gray-600' : 'text-gray-400',
'ml-2 h-5 w-5 group-hover:text-gray-500'
)}
aria-hidden="true"
/>
</Popover.Button>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel
static
className="absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0"
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
{resources.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50"
>
<item.icon className="flex-shrink-0 h-6 w-6 text-blue-600" aria-hidden="true" />
<div className="ml-4">
<p className="text-base font-medium text-gray-900">{item.name}</p>
<p className="mt-1 text-sm text-gray-500">{item.description}</p>
</div>
</a>
))}
</div>
<div className="px-5 py-5 bg-gray-50 sm:px-8 sm:py-8">
<div>
<h3 className="text-sm tracking-wide font-medium text-gray-500 uppercase">
Recent Posts
</h3>
<ul className="mt-4 space-y-4">
{recentPosts.map((post) => (
<li key={post.id} className="text-base truncate">
<a href={post.href} className="font-medium text-gray-900 hover:text-gray-700">
{post.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-5 text-sm">
<a href="#" className="font-medium text-blue-600 hover:text-blue-500">
{' '}
View all posts <span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</Popover.Group>
<div className="hidden md:flex items-center justify-end md:flex-1 lg:w-0">
<a href="#" className="whitespace-nowrap text-base font-medium text-gray-500 hover:text-gray-900">
Sign in
</a>
<a
href="#"
className="ml-8 whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700"
>
Sign up
</a>
</div>
</div>
</div>
<Transition
show={open}
as={Fragment}
enter="duration-200 ease-out"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="duration-100 ease-in"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Popover.Panel
focus
static
className="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden"
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50">
<div className="pt-5 pb-6 px-5">
<div className="flex items-center justify-between">
<div>
<img
className="h-8 w-auto"
src="/images/loesen-logo.svg"
alt="Loesen SA"
/>
</div>
<div className="-mr-2">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
<span className="sr-only">Close menu</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
<div className="mt-6">
<nav className="grid gap-y-8">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 flex items-center rounded-md hover:bg-gray-50"
>
<item.icon className="flex-shrink-0 h-6 w-6 text-blue-600" aria-hidden="true" />
<span className="ml-3 text-base font-medium text-gray-900">{item.name}</span>
</a>
))}
</nav>
</div>
</div>
<div className="py-6 px-5 space-y-6">
<div className="grid grid-cols-2 gap-y-4 gap-x-8">
<a href="#" className="text-base font-medium text-gray-900 hover:text-gray-700">
Pricing
</a>
<a href="#" className="text-base font-medium text-gray-900 hover:text-gray-700">
Docs
</a>
{resources.map((item) => (
<a
key={item.name}
href={item.href}
className="text-base font-medium text-gray-900 hover:text-gray-700"
>
{item.name}
</a>
))}
</div>
<div>
<a
href="#"
className="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700"
>
Sign up
</a>
<p className="mt-6 text-center text-base font-medium text-gray-500">
Existing customer?{' '}
<a href="#" className="text-blue-600 hover:text-blue-500">
Sign in
</a>
</p>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
)
}
Simple Branded With Stacked Links
/* This example requires Tailwind CSS v2.0+ */
const navigation = [
{ name: 'Solutions', href: '#' },
{ name: 'Pricing', href: '#' },
{ name: 'Docs', href: '#' },
{ name: 'Company', href: '#' },
]
export default function Example() {
return (
<header className="bg-blue-600">
<nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" aria-label="Top">
<div className="w-full py-6 flex items-center justify-between border-b border-blue-500 lg:border-none">
<div className="flex items-center">
<a href="#">
<span className="sr-only">Loesen</span>
<img
className="h-10 w-auto"
src="/images/loesen-logo.svg"
alt="Loesen SA"
/>
</a>
<div className="hidden ml-10 space-x-8 lg:block">
{navigation.map((link) => (
<a key={link.name} href={link.href} className="text-base font-medium text-white hover:text-blue-50">
{link.name}
</a>
))}
</div>
</div>
<div className="ml-10 space-x-4">
<a
href="#"
className="inline-block bg-blue-500 py-2 px-4 border border-transparent rounded-md text-base font-medium text-white hover:bg-opacity-75"
>
Sign in
</a>
<a
href="#"
className="inline-block bg-white py-2 px-4 border border-transparent rounded-md text-base font-medium text-blue-600 hover:bg-blue-50"
>
Sign up
</a>
</div>
</div>
<div className="py-4 flex flex-wrap justify-center space-x-6 lg:hidden">
{navigation.map((link) => (
<a key={link.name} href={link.href} className="text-base font-medium text-white hover:text-blue-50">
{link.name}
</a>
))}
</div>
</nav>
</header>
)
}
Simple Links Centered
/* This example requires Tailwind CSS v2.0+ */
import { Fragment } from "react";
import { Popover, Transition } from "@headlessui/react";
import {
ChartBarIcon,
CursorClickIcon,
DocumentReportIcon,
MenuIcon,
RefreshIcon,
ShieldCheckIcon,
ViewGridIcon,
XIcon,
} from "@heroicons/react/outline";
import { ChevronDownIcon } from "@heroicons/react/solid";
const solutions = [
{
name: "Analytics",
description:
"Get a better understanding of where your traffic is coming from.",
href: "#",
icon: ChartBarIcon,
},
{
name: "Engagement",
description: "Speak directly to your customers in a more meaningful way.",
href: "#",
icon: CursorClickIcon,
},
{
name: "Security",
description: "Your customers' data will be safe and secure.",
href: "#",
icon: ShieldCheckIcon,
},
{
name: "Integrations",
description: "Connect with third-party tools that you're already using.",
href: "#",
icon: ViewGridIcon,
},
{
name: "Automations",
description:
"Build strategic funnels that will drive your customers to convert",
href: "#",
icon: RefreshIcon,
},
{
name: "Reports",
description:
"Get detailed reports that will help you make more informed decisions ",
href: "#",
icon: DocumentReportIcon,
},
];
const resources = [
{
name: "Help Center",
description:
"Get all of your questions answered in our forums or contact support.",
href: "#",
},
{
name: "Guides",
description:
"Learn how to maximize our platform to get the most out of it.",
href: "#",
},
{
name: "Events",
description:
"See what meet-ups and other events we might be planning near you.",
href: "#",
},
{
name: "Security",
description: "Understand how we take your privacy seriously.",
href: "#",
},
];
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
export default function Example() {
return (
<Popover className="relative bg-white">
{({ open }) => (
<>
<div className="flex justify-between items-center px-4 py-6 sm:px-6 md:justify-start md:space-x-10">
<div className="flex justify-start lg:w-0 lg:flex-1">
<a href="#">
<span className="sr-only">Loesen</span>
<img
className="h-8 w-auto sm:h-10"
src="/images/loesen-logo.svg"
alt="Loesen SA"
/>
</a>
</div>
<div className="-mr-2 -my-2 md:hidden">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
<span className="sr-only">Open menu</span>
<MenuIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
<Popover.Group as="nav" className="hidden md:flex space-x-10">
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={classNames(
open ? "text-gray-900" : "text-gray-500",
"group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
)}
>
<span>Solutions</span>
<ChevronDownIcon
className={classNames(
open ? "text-gray-600" : "text-gray-400",
"ml-2 h-5 w-5 group-hover:text-gray-500"
)}
aria-hidden="true"
/>
</Popover.Button>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel
static
className="absolute z-10 -ml-4 mt-3 transform w-screen max-w-md lg:max-w-2xl lg:ml-0 lg:left-1/2 lg:-translate-x-1/2"
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50"
>
<div className="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
<item.icon
className="h-6 w-6"
aria-hidden="true"
/>
</div>
<div className="ml-4">
<p className="text-base font-medium text-gray-900">
{item.name}
</p>
<p className="mt-1 text-sm text-gray-500">
{item.description}
</p>
</div>
</a>
))}
</div>
<div className="p-5 bg-gray-50 sm:p-8">
<a
href="#"
className="-m-3 p-3 flow-root rounded-md hover:bg-gray-100"
>
<div className="flex items-center">
<div className="text-base font-medium text-gray-900">
Enterprise
</div>
<span className="ml-3 inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-blue-100 text-blue-800">
New
</span>
</div>
<p className="mt-1 text-sm text-gray-500">
Empower your entire team with even more advanced
tools.
</p>
</a>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<a
href="#"
className="text-base font-medium text-gray-500 hover:text-gray-900"
>
Pricing
</a>
<a
href="#"
className="text-base font-medium text-gray-500 hover:text-gray-900"
>
Docs
</a>
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={classNames(
open ? "text-gray-900" : "text-gray-500",
"group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
)}
>
<span>More</span>
<ChevronDownIcon
className={classNames(
open ? "text-gray-600" : "text-gray-400",
"ml-2 h-5 w-5 group-hover:text-gray-500"
)}
aria-hidden="true"
/>
</Popover.Button>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel
static
className="absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-xs sm:px-0"
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
{resources.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 block rounded-md hover:bg-gray-50"
>
<p className="text-base font-medium text-gray-900">
{item.name}
</p>
<p className="mt-1 text-sm text-gray-500">
{item.description}
</p>
</a>
))}
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</Popover.Group>
<div className="hidden md:flex items-center justify-end md:flex-1 lg:w-0">
<a
href="#"
className="whitespace-nowrap text-base font-medium text-gray-500 hover:text-gray-900"
>
Sign in
</a>
<a
href="#"
className="ml-8 whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700"
>
Sign up
</a>
</div>
</div>
<Transition
show={open}
as={Fragment}
enter="duration-200 ease-out"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="duration-100 ease-in"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Popover.Panel
focus
static
className="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden"
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50">
<div className="pt-5 pb-6 px-5">
<div className="flex items-center justify-between">
<div>
<img
className="h-8 w-auto"
src="/images/loesen-logo.svg"
alt="Loesen SA"
/>
</div>
<div className="-mr-2">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
<span className="sr-only">Close menu</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
<div className="mt-6">
<nav className="grid grid-cols-1 gap-7">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 flex items-center rounded-lg hover:bg-gray-50"
>
<div className="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white">
<item.icon className="h-6 w-6" aria-hidden="true" />
</div>
<div className="ml-4 text-base font-medium text-gray-900">
{item.name}
</div>
</a>
))}
</nav>
</div>
</div>
<div className="py-6 px-5">
<div className="grid grid-cols-2 gap-4">
<a
href="#"
className="text-base font-medium text-gray-900 hover:text-gray-700"
>
Pricing
</a>
<a
href="#"
className="text-base font-medium text-gray-900 hover:text-gray-700"
>
Docs
</a>
<a
href="#"
className="text-base font-medium text-gray-900 hover:text-gray-700"
>
Enterprise
</a>
{resources.map((item) => (
<a
key={item.name}
href={item.href}
className="text-base font-medium text-gray-900 hover:text-gray-700"
>
{item.name}
</a>
))}
</div>
<div className="mt-6">
<a
href="#"
className="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700"
>
Sign up
</a>
<p className="mt-6 text-center text-base font-medium text-gray-500">
Existing customer?{" "}
<a
href="#"
className="text-blue-600 hover:text-blue-500"
>
Sign in
</a>
</p>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
);
}
Simple Links On Left
/* This example requires Tailwind CSS v2.0+ */
import { Fragment } from 'react'
import { Popover, Transition } from '@headlessui/react'
import {
ChartBarIcon,
CursorClickIcon,
DocumentReportIcon,
MenuIcon,
RefreshIcon,
ShieldCheckIcon,
ViewGridIcon,
XIcon,
} from '@heroicons/react/outline'
import { ChevronDownIcon } from '@heroicons/react/solid'
const solutions = [
{
name: 'Analytics',
description: 'Get a better understanding of where your traffic is coming from.',
href: '#',
icon: ChartBarIcon,
},
{
name: 'Engagement',
description: 'Speak directly to your customers in a more meaningful way.',
href: '#',
icon: CursorClickIcon,
},
{ name: 'Security', description: "Your customers' data will be safe and secure.", href: '#', icon: ShieldCheckIcon },
{
name: 'Integrations',
description: "Connect with third-party tools that you're already using.",
href: '#',
icon: ViewGridIcon,
},
{
name: 'Automations',
description: 'Build strategic funnels that will drive your customers to convert',
href: '#',
icon: RefreshIcon,
},
{
name: 'Reports',
description: 'Get detailed reports that will help you make more informed decisions ',
href: '#',
icon: DocumentReportIcon,
},
]
const resources = [
{
name: 'Help Center',
description: 'Get all of your questions answered in our forums or contact support.',
href: '#',
},
{ name: 'Guides', description: 'Learn how to maximize our platform to get the most out of it.', href: '#' },
{ name: 'Events', description: 'See what meet-ups and other events we might be planning near you.', href: '#' },
{ name: 'Security', description: 'Understand how we take your privacy seriously.', href: '#' },
]
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Example() {
return (
<Popover className="relative bg-white">
{({ open }) => (
<>
<div className="flex justify-between items-center px-4 py-6 sm:px-6 md:justify-start md:space-x-10">
<div>
<a href="#" className="flex">
<span className="sr-only">Loesen</span>
<img
className="h-8 w-auto sm:h-10"
src="/images/loesen-logo.svg"
alt="Loesen SA"
/>
</a>
</div>
<div className="-mr-2 -my-2 md:hidden">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
<span className="sr-only">Open menu</span>
<MenuIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
<div className="hidden md:flex-1 md:flex md:items-center md:justify-between">
<Popover.Group as="nav" className="flex space-x-10">
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={classNames(
open ? 'text-gray-900' : 'text-gray-500',
'group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
)}
>
<span>Solutions</span>
<ChevronDownIcon
className={classNames(
open ? 'text-gray-600' : 'text-gray-400',
'ml-2 h-5 w-5 group-hover:text-gray-500'
)}
aria-hidden="true"
/>
</Popover.Button>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel
static
className="absolute z-10 -ml-4 mt-3 transform w-screen max-w-md lg:max-w-3xl"
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50"
>
<div className="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
<item.icon className="h-6 w-6" aria-hidden="true" />
</div>
<div className="ml-4">
<p className="text-base font-medium text-gray-900">{item.name}</p>
<p className="mt-1 text-sm text-gray-500">{item.description}</p>
</div>
</a>
))}
</div>
<div className="p-5 bg-gray-50 sm:p-8">
<a href="#" className="-m-3 p-3 flow-root rounded-md hover:bg-gray-100">
<div className="flex items-center">
<div className="text-base font-medium text-gray-900">Enterprise</div>
<span className="ml-3 inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-blue-100 text-blue-800">
New
</span>
</div>
<p className="mt-1 text-sm text-gray-500">
Empower your entire team with even more advanced tools.
</p>
</a>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
Pricing
</a>
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
Docs
</a>
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={classNames(
open ? 'text-gray-900' : 'text-gray-500',
'group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
)}
>
<span>More</span>
<ChevronDownIcon
className={classNames(
open ? 'text-gray-600' : 'text-gray-400',
'ml-2 h-5 w-5 group-hover:text-gray-500'
)}
aria-hidden="true"
/>
</Popover.Button>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel
static
className="absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-xs sm:px-0"
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
{resources.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 block rounded-md hover:bg-gray-50"
>
<p className="text-base font-medium text-gray-900">{item.name}</p>
<p className="mt-1 text-sm text-gray-500">{item.description}</p>
</a>
))}
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</Popover.Group>
<div className="flex items-center md:ml-12">
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
Sign in
</a>
<a
href="#"
className="ml-8 inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700"
>
Sign up
</a>
</div>
</div>
</div>
<Transition
show={open}
as={Fragment}
enter="duration-200 ease-out"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="duration-100 ease-in"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Popover.Panel
focus
static
className="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden"
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50">
<div className="pt-5 pb-6 px-5">
<div className="flex items-center justify-between">
<div>
<img
className="h-8 w-auto"
src="/images/loesen-logo.svg"
alt="Loesen SA"
/>
</div>
<div className="-mr-2">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
<span className="sr-only">Close menu</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
<div className="mt-6">
<nav className="grid gap-6">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 flex items-center rounded-lg hover:bg-gray-50"
>
<div className="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white">
<item.icon className="h-6 w-6" aria-hidden="true" />
</div>
<div className="ml-4 text-base font-medium text-gray-900">{item.name}</div>
</a>
))}
</nav>
</div>
</div>
<div className="py-6 px-5">
<div className="grid grid-cols-2 gap-4">
<a href="#" className="text-base font-medium text-gray-900 hover:text-gray-700">
Pricing
</a>
<a href="#" className="text-base font-medium text-gray-900 hover:text-gray-700">
Docs
</a>
<a href="#" className="text-base font-medium text-gray-900 hover:text-gray-700">
Enterprise
</a>
{resources.map((item) => (
<a
key={item.name}
href={item.href}
className="text-base font-medium text-gray-900 hover:text-gray-700"
>
{item.name}
</a>
))}
</div>
<div className="mt-6">
<a
href="#"
className="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700"
>
Sign up
</a>
<p className="mt-6 text-center text-base font-medium text-gray-500">
Existing customer?{' '}
<a href="#" className="text-blue-600 hover:text-blue-500">
Sign in
</a>
</p>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
)
}
With Full Width Flyouts
/* This example requires Tailwind CSS v2.0+ */
import { Fragment } from 'react'
import { Popover, Transition } from '@headlessui/react'
import {
BookmarkAltIcon,
BriefcaseIcon,
ChartBarIcon,
CheckCircleIcon,
CursorClickIcon,
DesktopComputerIcon,
GlobeAltIcon,
InformationCircleIcon,
MenuIcon,
NewspaperIcon,
OfficeBuildingIcon,
PhoneIcon,
PlayIcon,
ShieldCheckIcon,
UserGroupIcon,
ViewGridIcon,
XIcon,
} from '@heroicons/react/outline'
import { ChevronDownIcon } from '@heroicons/react/solid'
const solutions = [
{
name: 'Analytics',
description: 'Get a better understanding of where your traffic is coming from.',
href: '#',
icon: ChartBarIcon,
},
{
name: 'Engagement',
description: 'Speak directly to your customers in a more meaningful way.',
href: '#',
icon: CursorClickIcon,
},
{ name: 'Security', description: "Your customers' data will be safe and secure.", href: '#', icon: ShieldCheckIcon },
{
name: 'Integrations',
description: "Connect with third-party tools that you're already using.",
href: '#',
icon: ViewGridIcon,
},
]
const callsToAction = [
{ name: 'Watch Demo', href: '#', icon: PlayIcon },
{ name: 'View All Products', href: '#', icon: CheckCircleIcon },
{ name: 'Contact Sales', href: '#', icon: PhoneIcon },
]
const company = [
{ name: 'About', href: '#', icon: InformationCircleIcon },
{ name: 'Customers', href: '#', icon: OfficeBuildingIcon },
{ name: 'Press', href: '#', icon: NewspaperIcon },
{ name: 'Careers', href: '#', icon: BriefcaseIcon },
{ name: 'Privacy', href: '#', icon: ShieldCheckIcon },
]
const resources = [
{ name: 'Community', href: '#', icon: UserGroupIcon },
{ name: 'Partners', href: '#', icon: GlobeAltIcon },
{ name: 'Guides', href: '#', icon: BookmarkAltIcon },
{ name: 'Webinars', href: '#', icon: DesktopComputerIcon },
]
const blogPosts = [
{
id: 1,
name: 'Boost your conversion rate',
href: '#',
preview: 'Eget ullamcorper ac ut vulputate fames nec mattis pellentesque elementum. Viverra tempor id mus.',
imageUrl:
'https://images.unsplash.com/photo-1558478551-1a378f63328e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2849&q=80',
},
{
id: 2,
name: 'How to use search engine optimization to drive traffic to your site',
href: '#',
preview: 'Eget ullamcorper ac ut vulputate fames nec mattis pellentesque elementum. Viverra tempor id mus.',
imageUrl:
'https://images.unsplash.com/1/apple-gear-looking-pretty.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80',
},
]
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Example() {
return (
<Popover className="relative bg-white">
{({ open }) => (
<>
<div className="absolute inset-0 shadow z-30 pointer-events-none" aria-hidden="true" />
<div className="relative z-20">
<div className="max-w-7xl mx-auto flex justify-between items-center px-4 py-5 sm:px-6 sm:py-4 lg:px-8 md:justify-start md:space-x-10">
<div>
<a href="#" className="flex">
<span className="sr-only">Loesen</span>
<img
className="h-8 w-auto sm:h-10"
src="/images/loesen-logo.svg"
alt="Loesen SA"
/>
</a>
</div>
<div className="-mr-2 -my-2 md:hidden">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
<span className="sr-only">Open menu</span>
<MenuIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
<div className="hidden md:flex-1 md:flex md:items-center md:justify-between">
<Popover.Group as="nav" className="flex space-x-10">
<Popover>
{({ open }) => (
<>
<Popover.Button
className={classNames(
open ? 'text-gray-900' : 'text-gray-500',
'group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
)}
>
<span>Solutions</span>
<ChevronDownIcon
className={classNames(
open ? 'text-gray-600' : 'text-gray-400',
'ml-2 h-5 w-5 group-hover:text-gray-500'
)}
aria-hidden="true"
/>
</Popover.Button>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 -translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-1"
>
<Popover.Panel
static
className="hidden md:block absolute z-10 top-full inset-x-0 transform shadow-lg bg-white"
>
<div className="max-w-7xl mx-auto grid gap-y-6 px-4 py-6 sm:grid-cols-2 sm:gap-8 sm:px-6 sm:py-8 lg:grid-cols-4 lg:px-8 lg:py-12 xl:py-16">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50"
>
<div className="flex md:h-full lg:flex-col">
<div className="flex-shrink-0">
<span className="inline-flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
<item.icon className="h-6 w-6" aria-hidden="true" />
</span>
</div>
<div className="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
<div>
<p className="text-base font-medium text-gray-900">{item.name}</p>
<p className="mt-1 text-sm text-gray-500">{item.description}</p>
</div>
<p className="mt-2 text-sm font-medium text-blue-600 lg:mt-4">
Learn more <span aria-hidden="true">→</span>
</p>
</div>
</div>
</a>
))}
</div>
<div className="bg-gray-50">
<div className="max-w-7xl mx-auto space-y-6 px-4 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-6 lg:px-8">
{callsToAction.map((item) => (
<div key={item.name} className="flow-root">
<a
href={item.href}
className="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 hover:bg-gray-100"
>
<item.icon className="flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
<span className="ml-3">{item.name}</span>
</a>
</div>
))}
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
Pricing
</a>
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
Docs
</a>
<Popover>
{({ open }) => (
<>
<Popover.Button
className={classNames(
open ? 'text-gray-900' : 'text-gray-500',
'group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
)}
>
<span>More</span>
<ChevronDownIcon
className={classNames(
open ? 'text-gray-600' : 'text-gray-400',
'ml-2 h-5 w-5 group-hover:text-gray-500'
)}
aria-hidden="true"
/>
</Popover.Button>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 -translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-1"
>
<Popover.Panel
static
className="hidden md:block absolute z-10 top-full inset-x-0 transform shadow-lg"
>
<div className="absolute inset-0 flex">
<div className="bg-white w-1/2" />
<div className="bg-gray-50 w-1/2" />
</div>
<div className="relative max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2">
<nav className="grid gap-y-10 px-4 py-8 bg-white sm:grid-cols-2 sm:gap-x-8 sm:py-12 sm:px-6 lg:px-8 xl:pr-12">
<div>
<h3 className="text-sm font-medium tracking-wide text-gray-500 uppercase">Company</h3>
<ul className="mt-5 space-y-6">
{company.map((item) => (
<li key={item.name} className="flow-root">
<a
href={item.href}
className="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 hover:bg-gray-50"
>
<item.icon
className="flex-shrink-0 h-6 w-6 text-gray-400"
aria-hidden="true"
/>
<span className="ml-4">{item.name}</span>
</a>
</li>
))}
</ul>
</div>
<div>
<h3 className="text-sm font-medium tracking-wide text-gray-500 uppercase">
Resources
</h3>
<ul className="mt-5 space-y-6">
{resources.map((item) => (
<li key={item.name} className="flow-root">
<a
href={item.href}
className="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 hover:bg-gray-50"
>
<item.icon
className="flex-shrink-0 h-6 w-6 text-gray-400"
aria-hidden="true"
/>
<span className="ml-4">{item.name}</span>
</a>
</li>
))}
</ul>
</div>
</nav>
<div className="bg-gray-50 px-4 py-8 sm:py-12 sm:px-6 lg:px-8 xl:pl-12">
<div>
<h3 className="text-sm font-medium tracking-wide text-gray-500 uppercase">
From the blog
</h3>
<ul className="mt-6 space-y-6">
{blogPosts.map((post) => (
<li key={post.id} className="flow-root">
<a href={post.href} className="-m-3 p-3 flex rounded-lg hover:bg-gray-100">
<div className="hidden sm:block flex-shrink-0">
<img
className="w-32 h-20 object-cover rounded-md"
src={post.imageUrl}
alt=""
/>
</div>
<div className="w-0 flex-1 sm:ml-8">
<h4 className="text-base font-medium text-gray-900 truncate">
{post.name}
</h4>
<p className="mt-1 text-sm text-gray-500">{post.preview}</p>
</div>
</a>
</li>
))}
</ul>
</div>
<div className="mt-6 text-sm font-medium">
<a href="#" className="text-blue-600 hover:text-blue-500">
{' '}
View all posts <span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</Popover.Group>
<div className="flex items-center md:ml-12">
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
Sign in
</a>
<a
href="#"
className="ml-8 inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700"
>
Sign up
</a>
</div>
</div>
</div>
</div>
<Transition
show={open}
as={Fragment}
enter="duration-200 ease-out"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="duration-100 ease-in"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Popover.Panel
focus
static
className="absolute z-30 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden"
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50">
<div className="pt-5 pb-6 px-5 sm:pb-8">
<div className="flex items-center justify-between">
<div>
<img
className="h-8 w-auto"
src="/images/loesen-logo.svg"
alt="Loesen SA"
/>
</div>
<div className="-mr-2">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
<span className="sr-only">Close menu</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
<div className="mt-6 sm:mt-8">
<nav>
<div className="grid gap-7 sm:grid-cols-2 sm:gap-y-8 sm:gap-x-4">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50"
>
<div className="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
<item.icon className="h-6 w-6" aria-hidden="true" />
</div>
<div className="ml-4 text-base font-medium text-gray-900">{item.name}</div>
</a>
))}
</div>
<div className="mt-8 text-base">
<a href="#" className="font-medium text-blue-600 hover:text-blue-500">
{' '}
View all products <span aria-hidden="true">→</span>
</a>
</div>
</nav>
</div>
</div>
<div className="py-6 px-5">
<div className="grid grid-cols-2 gap-4">
<a href="#" className="rounded-md text-base font-medium text-gray-900 hover:text-gray-700">
Pricing
</a>
<a href="#" className="rounded-md text-base font-medium text-gray-900 hover:text-gray-700">
Docs
</a>
<a href="#" className="rounded-md text-base font-medium text-gray-900 hover:text-gray-700">
Company
</a>
<a href="#" className="rounded-md text-base font-medium text-gray-900 hover:text-gray-700">
Resources
</a>
<a href="#" className="rounded-md text-base font-medium text-gray-900 hover:text-gray-700">
Blog
</a>
<a href="#" className="rounded-md text-base font-medium text-gray-900 hover:text-gray-700">
Contact Sales
</a>
</div>
<div className="mt-6">
<a
href="#"
className="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700"
>
Sign up
</a>
<p className="mt-6 text-center text-base font-medium text-gray-500">
Existing customer?{' '}
<a href="#" className="text-blue-600 hover:text-blue-500">
Sign in
</a>
</p>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
)
}