Hero
Simple Centered
/* This example requires Tailwind CSS v2.0+ */
import { Fragment } from "react";
import { Popover, Transition } from "@headlessui/react";
import { MenuIcon, XIcon } from "@heroicons/react/outline";
const navigation = [
{ name: "Product", href: "#" },
{ name: "Features", href: "#" },
{ name: "Marketplace", href: "#" },
{ name: "Company", href: "#" },
];
export default function Example() {
return (
<div className="relative bg-gray-50 overflow-hidden">
<div
className="hidden sm:block sm:absolute sm:inset-y-0 sm:h-full sm:w-full"
aria-hidden="true"
>
<div className="relative h-full max-w-7xl mx-auto">
<svg
className="absolute right-full transform translate-y-1/4 translate-x-1/4 lg:translate-x-1/2"
width={404}
height={784}
fill="none"
viewBox="0 0 404 784"
>
<defs>
<pattern
id="f210dbf6-a58d-4871-961e-36d5016a0f49"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-gray-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
width={404}
height={784}
fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)"
/>
</svg>
<svg
className="absolute left-full transform -translate-y-3/4 -translate-x-1/4 md:-translate-y-1/2 lg:-translate-x-1/2"
width={404}
height={784}
fill="none"
viewBox="0 0 404 784"
>
<defs>
<pattern
id="5d0dd344-b041-4d26-bec4-8d33ea57ec9b"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-gray-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
width={404}
height={784}
fill="url(#5d0dd344-b041-4d26-bec4-8d33ea57ec9b)"
/>
</svg>
</div>
</div>
<div className="relative pt-6 pb-16 sm:pb-24">
<Popover>
{({ open }) => (
<>
<div className="max-w-7xl mx-auto px-4 sm:px-6">
<nav
className="relative flex items-center justify-between sm:h-10 md:justify-center"
aria-label="Global"
>
<div className="flex items-center flex-1 md:absolute md:inset-y-0 md:left-0">
<div className="flex items-center justify-between w-full md:w-auto">
<a href="#">
<span className="sr-only">Loesen</span>
<img
className="h-8 w-auto sm:h-10"
src="/images/loesen-logo.svg"
alt=""
/>
</a>
<div className="-mr-2 flex items-center md:hidden">
<Popover.Button className="bg-gray-50 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-red-500">
<span className="sr-only">Open main menu</span>
<MenuIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
</div>
<div className="hidden md:flex md:space-x-10">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className="font-medium text-gray-500 hover:text-gray-900"
>
{item.name}
</a>
))}
</div>
<div className="hidden md:absolute md:flex md:items-center md:justify-end md:inset-y-0 md:right-0">
<span className="inline-flex rounded-md shadow">
<a
href="#"
className="inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50"
>
Log in
</a>
</span>
</div>
</nav>
</div>
<Transition
show={open}
as={Fragment}
enter="duration-150 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-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="px-5 pt-4 flex items-center justify-between">
<div>
<img
className="h-8 w-auto"
src="/images/loesen-logo.svg"
alt=""
/>
</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-red-500">
<span className="sr-only">Close menu</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
<div className="px-2 pt-2 pb-3">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
>
{item.name}
</a>
))}
</div>
<a
href="#"
className="block w-full px-5 py-3 text-center font-medium text-blue-600 bg-gray-50 hover:bg-gray-100"
>
Log in
</a>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<main className="mt-16 mx-auto max-w-7xl px-4 sm:mt-24">
<div className="text-center">
<h1 className="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
<span className="block xl:inline">Data to enrich your</span>{" "}
<span className="block text-blue-600 xl:inline">
online business
</span>
</h1>
<p className="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui
lorem cupidatat commodo. Elit sunt amet fugiat veniam ocasdcaecat
fugiat aliqua.
</p>
<div className="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
<div className="rounded-md shadow">
<a
href="#"
className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10"
>
Get started
</a>
</div>
<div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
<a
href="#"
className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"
>
Live demo
</a>
</div>
</div>
</div>
</main>
</div>
</div>
);
}
Card With Background Image
/* This example requires Tailwind CSS v2.0+ */
import { Fragment } from "react";
import { Popover, Transition } from "@headlessui/react";
import {
AnnotationIcon,
ChatAlt2Icon,
InboxIcon,
MenuIcon,
QuestionMarkCircleIcon,
XIcon,
} from "@heroicons/react/outline";
import { ChevronDownIcon } from "@heroicons/react/solid";
const solutions = [
{
name: "Inbox",
description:
"Get a better understanding of where your traffic is coming from.",
href: "#",
icon: InboxIcon,
},
{
name: "Messaging",
description: "Speak directly to your customers in a more meaningful way.",
href: "#",
icon: AnnotationIcon,
},
{
name: "Live Chat",
description: "Your customers' data will be safe and secure.",
href: "#",
icon: ChatAlt2Icon,
},
{
name: "Knowledge Base",
description: "Connect with third-party tools that you're already using.",
href: "#",
icon: QuestionMarkCircleIcon,
},
];
const navigation = [
{ name: "Pricing", href: "#" },
{ name: "Partners", href: "#" },
{ name: "Company", href: "#" },
];
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
export default function Example() {
return (
<div className="min-h-screen bg-white">
<header>
<Popover className="relative bg-white">
{({ open }) => (
<>
<div className="flex justify-between items-center max-w-7xl mx-auto px-4 py-6 sm:px-6 md:justify-start md:space-x-10 lg:px-8">
<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=""
/>
</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-600 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>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className="text-base font-medium text-gray-500 hover:text-gray-900"
>
{item.name}
</a>
))}
</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 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">
<div className="flex items-center justify-between">
<div>
<img
className="h-8 w-auto"
src="/images/loesen-logo.svg"
alt="Loesen"
/>
</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-600 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">
{navigation.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-gray-900">
Sign in
</a>
</p>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</header>
<main>
<div>
{/* Hero card */}
<div className="relative">
<div className="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100" />
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div className="relative shadow-xl sm:rounded-2xl sm:overflow-hidden">
<div className="absolute inset-0">
<img
className="h-full w-full object-cover"
src="https://images.unsplash.com/photo-1521737852567-6949f3f9f2b5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2830&q=80&sat=-100"
alt="People working on laptops"
/>
<div className="absolute inset-0 bg-blue-700 mix-blend-multiply" />
</div>
<div className="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
<h1 className="text-center text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
<span className="block text-white">
Take control of your
</span>
<span className="block text-blue-200">
customer support
</span>
</h1>
<p className="mt-6 max-w-lg mx-auto text-center text-xl text-blue-200 sm:max-w-3xl">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure
qui lorem cupidatat commodo. Elit sunt amet fugiat veniam
occaecat fugiat aliqua.
</p>
<div className="mt-10 max-w-sm mx-auto sm:max-w-none sm:flex sm:justify-center">
<div className="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5">
<a
href="#"
className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-blue-700 bg-white hover:bg-blue-50 sm:px-8"
>
Get started
</a>
<a
href="#"
className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-500 bg-opacity-60 hover:bg-opacity-70 sm:px-8"
>
Live demo
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Logo cloud */}
<div className="bg-gray-100">
<div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
<p className="text-center text-sm font-semibold uppercase text-gray-500 tracking-wide">
Trusted by over 5 very average small businesses
</p>
<div className="mt-6 grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-5">
<div className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
<img
className="h-12"
src="https://tailwindui.com/img/logos/tuple-logo-gray-400.svg"
alt="Tuple"
/>
</div>
<div className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
<img
className="h-12"
src="https://tailwindui.com/img/logos/mirage-logo-gray-400.svg"
alt="Mirage"
/>
</div>
<div className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
<img
className="h-12"
src="https://tailwindui.com/img/logos/statickit-logo-gray-400.svg"
alt="StaticKit"
/>
</div>
<div className="col-span-1 flex justify-center md:col-span-2 md:col-start-2 lg:col-span-1">
<img
className="h-12"
src="https://tailwindui.com/img/logos/transistor-logo-gray-400.svg"
alt="Transistor"
/>
</div>
<div className="col-span-2 flex justify-center md:col-span-2 md:col-start-4 lg:col-span-1">
<img
className="h-12"
src="https://tailwindui.com/img/logos/workcation-logo-gray-400.svg"
alt="Workcation"
/>
</div>
</div>
</div>
</div>
</div>
{/* More main page content here... */}
</main>
</div>
);
}
Dark With Illustration
/*
This example requires Tailwind CSS v2.0+
This example requires some changes to your config:
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/forms'),
]
}
*/
import { Fragment } from 'react';
import { Popover, Transition } from '@headlessui/react';
import { MenuIcon, XIcon } from '@heroicons/react/outline';
import { ChevronRightIcon } from '@heroicons/react/solid';
const navigation = [
{ name: 'Product', href: '#' },
{ name: 'Features', href: '#' },
{ name: 'Marketplace', href: '#' },
{ name: 'Company', href: '#' },
];
export default function Example() {
return (
<div className='min-h-screen'>
<div className='relative overflow-hidden'>
<Popover as='header' className='relative'>
{({ open }) => (
<>
<div className='bg-gray-900 pt-6'>
<nav
className='relative max-w-7xl mx-auto flex items-center justify-between px-4 sm:px-6'
aria-label='Global'
>
<div className='flex items-center flex-1'>
<div className='flex items-center justify-between w-full md:w-auto'>
<a href='#'>
<span className='sr-only'>Loesen</span>
<img className='h-8 w-auto sm:h-10' src='/images/loesen-logo.svg' alt='' />
</a>
<div className='-mr-2 flex items-center md:hidden'>
<Popover.Button className='bg-gray-900 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-800 focus:outline-none focus:ring-2 focus-ring-inset focus:ring-white'>
<span className='sr-only'>Open main menu</span>
<MenuIcon className='h-6 w-6' aria-hidden='true' />
</Popover.Button>
</div>
</div>
<div className='hidden space-x-8 md:flex md:ml-10'>
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className='text-base font-medium text-white hover:text-gray-300'
>
{item.name}
</a>
))}
</div>
</div>
<div className='hidden md:flex md:items-center md:space-x-6'>
<a href='#' className='text-base font-medium text-white hover:text-gray-300'>
Log in
</a>
<a
href='#'
className='inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700'
>
Start free trial
</a>
</div>
</nav>
</div>
<Transition
show={open}
as={Fragment}
enter='duration-150 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 md:hidden'
>
<div className='rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden'>
<div className='px-5 pt-4 flex items-center justify-between'>
<div>
<img className='h-8 w-auto' src='/images/loesen-logo.svg' alt='' />
</div>
<div className='-mr-2'>
<Popover.Button className='bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-600'>
<span className='sr-only'>Close menu</span>
<XIcon className='h-6 w-6' aria-hidden='true' />
</Popover.Button>
</div>
</div>
<div className='pt-5 pb-6'>
<div className='px-2 space-y-1'>
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className='block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:bg-gray-50'
>
{item.name}
</a>
))}
</div>
<div className='mt-6 px-5'>
<a
href='#'
className='block text-center w-full py-3 px-4 rounded-md shadow bg-blue-600 text-white font-medium hover:bg-blue-700'
>
Start free trial
</a>
</div>
<div className='mt-6 px-5'>
<p className='text-center text-base font-medium text-gray-500'>
Existing customer?{' '}
<a href='#' className='text-gray-900 hover:underline'>
Login
</a>
</p>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<main>
<div className='pt-10 bg-gray-900 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden'>
<div className='mx-auto max-w-7xl lg:px-8'>
<div className='lg:grid lg:grid-cols-2 lg:gap-8'>
<div className='mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 sm:text-center lg:px-0 lg:text-left lg:flex lg:items-center'>
<div className='lg:py-24'>
<a
href='#'
className='inline-flex items-center text-white bg-black rounded-full p-1 pr-2 sm:text-base lg:text-sm xl:text-base hover:text-gray-200'
>
<span className='px-3 py-0.5 text-white text-xs font-semibold leading-5 uppercase tracking-wide bg-blue-500 rounded-full'>
We're hiring
</span>
<span className='ml-4 text-sm'>Visit our careers page</span>
<ChevronRightIcon className='ml-2 w-5 h-5 text-gray-500' aria-hidden='true' />
</a>
<h1 className='mt-4 text-4xl tracking-tight font-extrabold text-white sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl'>
<span className='block'>A better way to</span>
<span className='block text-blue-400'>ship web apps</span>
</h1>
<p className='mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl'>
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui Lorem
cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.
</p>
<div className='mt-10 sm:mt-12'>
<form action='#' className='sm:max-w-xl sm:mx-auto lg:mx-0'>
<div className='sm:flex'>
<div className='min-w-0 flex-1'>
<label htmlFor='email' className='sr-only'>
Email address
</label>
<input
id='email'
type='email'
placeholder='Enter your email'
className='block w-full px-4 py-3 rounded-md border-0 text-base text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-300 focus:ring-offset-gray-900'
/>
</div>
<div className='mt-3 sm:mt-0 sm:ml-3'>
<button
type='submit'
className='block w-full py-3 px-4 rounded-md shadow bg-blue-500 text-white font-medium hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-300 focus:ring-offset-gray-900'
>
Start free trial
</button>
</div>
</div>
<p className='mt-3 text-sm text-gray-300 sm:mt-4'>
Start your free 14-day trial, no credit card necessary. By providing your
email, you agree to our{' '}
<a href='#' className='font-medium text-white'>
terms or service
</a>
.
</p>
</form>
</div>
</div>
</div>
<div className='mt-12 -mb-16 sm:-mb-48 lg:m-0 lg:relative'>
<div className='mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 lg:max-w-none lg:px-0'>
{/* Illustration taken from Lucid Illustrations: https://lucid.pixsellz.io/ */}
<img
className='w-full lg:absolute lg:inset-y-0 lg:left-0 lg:h-full lg:w-auto lg:max-w-none'
src='/images/loesen-logo.svg'
alt=''
/>
</div>
</div>
</div>
</div>
</div>
{/* More main page content here... */}
</main>
</div>
</div>
);
}
Split With Navbar
/* 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 features = [
{
name: 'Analytics',
href: '#',
description: 'Get a better understanding of where your traffic is coming from.',
icon: ChartBarIcon,
},
{
name: 'Engagement',
href: '#',
description: 'Speak directly to your customers in a more meaningful way.',
icon: CursorClickIcon,
},
{
name: 'Security',
href: '#',
description: "Your customers' data will be safe and secure.",
icon: ShieldCheckIcon,
},
{
name: 'Integrations',
href: '#',
description: "Connect with third-party tools that you're already using.",
icon: ViewGridIcon,
},
{
name: 'Automations',
href: '#',
description: 'Build strategic funnels that will drive your customers to convert',
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 (
<div className='relative bg-gray-50'>
<Popover className='relative bg-white shadow'>
{({ open }) => (
<>
<div className='max-w-7xl mx-auto px-4 sm:px-6'>
<div className='flex justify-between items-center 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='' />
</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 -ml-4 mt-3 transform z-10 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'>
{features.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 left-1/2 z-10 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((item) => (
<li key={item.id} className='text-base truncate'>
<a
href={item.href}
className='font-medium text-gray-900 hover:text-gray-700'
>
{item.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 z-10 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' />
</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'>
{features.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>
<main className='lg:relative'>
<div className='mx-auto max-w-7xl w-full pt-16 pb-20 text-center lg:py-48 lg:text-left'>
<div className='px-4 lg:w-1/2 sm:px-8 xl:pr-16'>
<h1 className='text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl lg:text-5xl xl:text-6xl'>
<span className='block xl:inline'>Data to enrich your</span>{' '}
<span className='block text-blue-600 xl:inline'>online business</span>
</h1>
<p className='mt-3 max-w-md mx-auto text-lg text-gray-500 sm:text-xl md:mt-5 md:max-w-3xl'>
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat
commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.
</p>
<div className='mt-10 sm:flex sm:justify-center lg:justify-start'>
<div className='rounded-md shadow'>
<a
href='#'
className='w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10'
>
Get started
</a>
</div>
<div className='mt-3 rounded-md shadow sm:mt-0 sm:ml-3'>
<a
href='#'
className='w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10'
>
Live demo
</a>
</div>
</div>
</div>
</div>
<div className='relative w-full h-64 sm:h-72 md:h-96 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 lg:h-full'>
<img
className='absolute inset-0 w-full h-full object-cover'
src='https://images.unsplash.com/photo-1520333789090-1afc82db536a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80'
alt=''
/>
</div>
</main>
</div>
);
}
Split With Screenshot
/*
This example requires Tailwind CSS v2.0+
This example requires some changes to your config:
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/forms'),
]
}
*/
import { ChevronRightIcon, StarIcon } from "@heroicons/react/solid";
export default function Example() {
return (
<div className="bg-white pb-8 sm:pb-12 lg:pb-12">
<div className="pt-8 overflow-hidden sm:pt-12 lg:relative lg:py-48">
<div className="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl lg:grid lg:grid-cols-2 lg:gap-24">
<div>
<div>
<img
className="h-11 w-auto"
src="/images/loesen-logo.svg"
alt="Loesen"
/>
</div>
<div className="mt-20">
<div>
<a href="#" className="inline-flex space-x-4">
<span className="rounded bg-blue-50 px-2.5 py-1 text-xs font-semibold text-blue-600 tracking-wide uppercase">
What's new
</span>
<span className="inline-flex items-center text-sm font-medium text-blue-600 space-x-1">
<span>Just shipped version 0.1.0</span>
<ChevronRightIcon className="h-5 w-5" aria-hidden="true" />
</span>
</a>
</div>
<div className="mt-6 sm:max-w-xl">
<h1 className="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
Server management for growing teams
</h1>
<p className="mt-6 text-xl text-gray-500">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure
qui lorem cupidatat commodo.
</p>
</div>
<form action="#" className="mt-12 sm:max-w-lg sm:w-full sm:flex">
<div className="min-w-0 flex-1">
<label htmlFor="hero-email" className="sr-only">
Email address
</label>
<input
id="hero-email"
type="email"
className="block w-full border border-gray-300 rounded-md px-5 py-3 text-base text-gray-900 placeholder-gray-500 shadow-sm focus:border-blue-500 focus:ring-blue-500"
placeholder="Enter your email"
/>
</div>
<div className="mt-4 sm:mt-0 sm:ml-3">
<button
type="submit"
className="block w-full rounded-md border border-transparent px-5 py-3 bg-blue-600 text-base font-medium text-white shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:px-10"
>
Notify me
</button>
</div>
</form>
<div className="mt-6">
<div className="inline-flex items-center divide-x divide-gray-300">
<div className="flex-shrink-0 flex pr-5">
<StarIcon
className="h-5 w-5 text-yellow-400"
aria-hidden="true"
/>
<StarIcon
className="h-5 w-5 text-yellow-400"
aria-hidden="true"
/>
<StarIcon
className="h-5 w-5 text-yellow-400"
aria-hidden="true"
/>
<StarIcon
className="h-5 w-5 text-yellow-400"
aria-hidden="true"
/>
<StarIcon
className="h-5 w-5 text-yellow-400"
aria-hidden="true"
/>
</div>
<div className="min-w-0 flex-1 pl-5 py-1 text-sm text-gray-500 sm:py-3">
<span className="font-medium text-gray-900">
Rated 5 stars
</span>{" "}
by over{" "}
<span className="font-medium text-blue-600">
500 beta users
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="sm:mx-auto sm:max-w-3xl sm:px-6">
<div className="py-12 sm:relative sm:mt-12 sm:py-16 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<div className="hidden sm:block">
<div className="absolute inset-y-0 left-1/2 w-screen bg-gray-50 rounded-l-3xl lg:left-80 lg:right-0 lg:w-full" />
<svg
className="absolute top-8 right-1/2 -mr-3 lg:m-0 lg:left-0"
width={404}
height={392}
fill="none"
viewBox="0 0 404 392"
>
<defs>
<pattern
id="837c3e70-6c3a-44e6-8854-cc48c737b659"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-gray-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
width={404}
height={392}
fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
/>
</svg>
</div>
<div className="relative pl-4 -mr-40 sm:mx-auto sm:max-w-3xl sm:px-0 lg:max-w-none lg:h-full lg:pl-12">
<img
className="w-full rounded-md shadow-xl ring-1 ring-black ring-opacity-5 lg:h-full lg:w-auto lg:max-w-none"
src="https://tailwindui.com/img/component-images/top-nav-with-multi-column-layout-screenshot.jpg"
alt=""
/>
</div>
</div>
</div>
</div>
</div>
);
}
With Angled Image On Right
/* This example requires Tailwind CSS v2.0+ */
import { Fragment } from 'react';
import { Popover, Transition } from '@headlessui/react';
import { MenuIcon, XIcon } from '@heroicons/react/outline';
const navigation = [
{ name: 'Product', href: '#' },
{ name: 'Features', href: '#' },
{ name: 'Marketplace', href: '#' },
{ name: 'Company', href: '#' },
];
export default function Example() {
return (
<div className='relative bg-white overflow-hidden'>
<div className='max-w-7xl mx-auto'>
<div className='relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32'>
<svg
className='hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-white transform translate-x-1/2'
fill='currentColor'
viewBox='0 0 100 100'
preserveAspectRatio='none'
aria-hidden='true'
>
<polygon points='50,0 100,0 50,100 0,100' />
</svg>
<Popover>
{({ open }) => (
<>
<div className='relative pt-6 px-4 sm:px-6 lg:px-8'>
<nav
className='relative flex items-center justify-between sm:h-10 lg:justify-start'
aria-label='Global'
>
<div className='flex items-center flex-grow flex-shrink-0 lg:flex-grow-0'>
<div className='flex items-center justify-between w-full md:w-auto'>
<a href='#'>
<span className='sr-only'>Loesen</span>
<img className='h-8 w-auto sm:h-10' src='/images/loesen-logo.svg' />
</a>
<div className='-mr-2 flex items-center 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 main menu</span>
<MenuIcon className='h-6 w-6' aria-hidden='true' />
</Popover.Button>
</div>
</div>
</div>
<div className='hidden md:block md:ml-10 md:pr-4 md:space-x-8'>
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className='font-medium text-gray-500 hover:text-gray-900'
>
{item.name}
</a>
))}
<a href='#' className='font-medium text-blue-600 hover:text-blue-500'>
Log in
</a>
</div>
</nav>
</div>
<Transition
show={open}
as={Fragment}
enter='duration-150 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-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden'>
<div className='px-5 pt-4 flex items-center justify-between'>
<div>
<img className='h-8 w-auto' src='/images/loesen-logo.svg' alt='' />
</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 main menu</span>
<XIcon className='h-6 w-6' aria-hidden='true' />
</Popover.Button>
</div>
</div>
<div className='px-2 pt-2 pb-3 space-y-1'>
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className='block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50'
>
{item.name}
</a>
))}
</div>
<a
href='#'
className='block w-full px-5 py-3 text-center font-medium text-blue-600 bg-gray-50 hover:bg-gray-100'
>
Log in
</a>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<main className='mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28'>
<div className='sm:text-center lg:text-left'>
<h1 className='text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl'>
<span className='block xl:inline'>Data to enrich your</span>{' '}
<span className='block text-blue-600 xl:inline'>online business</span>
</h1>
<p className='mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0'>
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat
commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.
</p>
<div className='mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start'>
<div className='rounded-md shadow'>
<a
href='#'
className='w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10'
>
Get started
</a>
</div>
<div className='mt-3 sm:mt-0 sm:ml-3'>
<a
href='#'
className='w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 md:py-4 md:text-lg md:px-10'
>
Live demo
</a>
</div>
</div>
</div>
</main>
</div>
</div>
<div className='lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2'>
<img
className='h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full'
src='https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80'
alt=''
/>
</div>
</div>
);
}
With App Screen Shot
/* This example requires Tailwind CSS v2.0+ */
import { Fragment } from 'react';
import { Popover, Transition } from '@headlessui/react';
import { MenuIcon, XIcon } from '@heroicons/react/outline';
const navigation = [
{ name: 'Product', href: '#' },
{ name: 'Features', href: '#' },
{ name: 'Marketplace', href: '#' },
{ name: 'Company', href: '#' },
];
export default function Example() {
return (
<div className='bg-gray-50'>
<div className='relative overflow-hidden'>
<div className='absolute inset-y-0 h-full w-full' aria-hidden='true'>
<div className='relative h-full'>
<svg
className='absolute right-full transform translate-y-1/3 translate-x-1/4 md:translate-y-1/2 sm:translate-x-1/2 lg:translate-x-full'
width={404}
height={784}
fill='none'
viewBox='0 0 404 784'
>
<defs>
<pattern
id='e229dbec-10e9-49ee-8ec3-0286ca089edf'
x={0}
y={0}
width={20}
height={20}
patternUnits='userSpaceOnUse'
>
<rect
x={0}
y={0}
width={4}
height={4}
className='text-gray-200'
fill='currentColor'
/>
</pattern>
</defs>
<rect width={404} height={784} fill='url(#e229dbec-10e9-49ee-8ec3-0286ca089edf)' />
</svg>
<svg
className='absolute left-full transform -translate-y-3/4 -translate-x-1/4 sm:-translate-x-1/2 md:-translate-y-1/2 lg:-translate-x-3/4'
width={404}
height={784}
fill='none'
viewBox='0 0 404 784'
>
<defs>
<pattern
id='d2a68204-c383-44b1-b99f-42ccff4e5365'
x={0}
y={0}
width={20}
height={20}
patternUnits='userSpaceOnUse'
>
<rect
x={0}
y={0}
width={4}
height={4}
className='text-gray-200'
fill='currentColor'
/>
</pattern>
</defs>
<rect width={404} height={784} fill='url(#d2a68204-c383-44b1-b99f-42ccff4e5365)' />
</svg>
</div>
</div>
<div className='relative pt-6 pb-16 sm:pb-24'>
<Popover>
{({ open }) => (
<>
<div className='max-w-7xl mx-auto px-4 sm:px-6'>
<nav
className='relative flex items-center justify-between sm:h-10 md:justify-center'
aria-label='Global'
>
<div className='flex items-center flex-1 md:absolute md:inset-y-0 md:left-0'>
<div className='flex items-center justify-between w-full md:w-auto'>
<a href='#'>
<span className='sr-only'>Loesen</span>
<img
className='h-8 w-auto sm:h-10'
src='/images/loesen-logo.svg'
alt=''
/>
</a>
<div className='-mr-2 flex items-center md:hidden'>
<Popover.Button className='bg-gray-50 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 main menu</span>
<MenuIcon className='h-6 w-6' aria-hidden='true' />
</Popover.Button>
</div>
</div>
</div>
<div className='hidden md:flex md:space-x-10'>
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className='font-medium text-gray-500 hover:text-gray-900'
>
{item.name}
</a>
))}
</div>
<div className='hidden md:absolute md:flex md:items-center md:justify-end md:inset-y-0 md:right-0'>
<span className='inline-flex rounded-md shadow'>
<a
href='#'
className='inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:text-blue-500'
>
Log in
</a>
</span>
</div>
</nav>
</div>
<Transition
show={open}
as={Fragment}
enter='duration-150 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-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden'>
<div className='px-5 pt-4 flex items-center justify-between'>
<div>
<img className='h-8 w-auto' src='/images/loesen-logo.svg' alt='' />
</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 main menu</span>
<XIcon className='h-6 w-6' aria-hidden='true' />
</Popover.Button>
</div>
</div>
<div className='px-2 pt-2 pb-3 space-y-1'>
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className='block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50'
>
{item.name}
</a>
))}
</div>
<a
href='#'
className='block w-full px-5 py-3 text-center font-medium text-blue-600 bg-gray-50 hover:bg-gray-100 hover:text-blue-700'
>
Log in
</a>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<div className='mt-16 mx-auto max-w-7xl px-4 sm:mt-24 sm:px-6'>
<div className='text-center'>
<h1 className='text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl'>
<span className='block'>Data to enrich your</span>
<span className='block text-blue-600'>online business</span>
</h1>
<p className='mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl'>
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat
commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.
</p>
</div>
</div>
</div>
<div className='relative'>
<div className='absolute inset-0 flex flex-col' aria-hidden='true'>
<div className='flex-1' />
<div className='flex-1 w-full bg-gray-800' />
</div>
<div className='max-w-7xl mx-auto px-4 sm:px-6'>
<img
className='relative rounded-lg shadow-lg'
src='https://tailwindui.com/img/component-images/top-nav-with-multi-column-layout-screenshot.jpg'
alt='App screenshot'
/>
</div>
</div>
</div>
<div className='bg-gray-800'>
<div className='max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8'>
<h2 className='text-center text-gray-400 text-sm font-semibold uppercase tracking-wide'>
Trusted by over 26,000 forward-thinking companies
</h2>
<div className='mt-8 grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-5'>
<div className='col-span-1 flex justify-center md:col-span-2 lg:col-span-1'>
<img
className='h-12'
src='https://tailwindui.com/img/logos/tuple-logo-gray-400.svg'
alt='Tuple'
/>
</div>
<div className='col-span-1 flex justify-center md:col-span-2 lg:col-span-1'>
<img
className='h-12'
src='https://tailwindui.com/img/logos/mirage-logo-gray-400.svg'
alt='Mirage'
/>
</div>
<div className='col-span-1 flex justify-center md:col-span-2 lg:col-span-1'>
<img
className='h-12'
src='https://tailwindui.com/img/logos/statickit-logo-gray-400.svg'
alt='StaticKit'
/>
</div>
<div className='col-span-1 flex justify-center md:col-span-3 lg:col-span-1'>
<img
className='h-12'
src='https://tailwindui.com/img/logos/transistor-logo-gray-400.svg'
alt='Transistor'
/>
</div>
<div className='col-span-2 flex justify-center md:col-span-3 lg:col-span-1'>
<img
className='h-12'
src='https://tailwindui.com/img/logos/workcation-logo-gray-400.svg'
alt='Workcation'
/>
</div>
</div>
</div>
</div>
</div>
);
}
With Sign In Form
/*
This example requires Tailwind CSS v2.0+
This example requires some changes to your config:
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/forms'),
]
}
*/
import { Fragment } from 'react';
import { Popover, Transition } from '@headlessui/react';
import { MenuIcon, XIcon } from '@heroicons/react/outline';
import { ChevronRightIcon } from '@heroicons/react/solid';
const navigation = [
{ name: 'Product', href: '#' },
{ name: 'Features', href: '#' },
{ name: 'Marketplace', href: '#' },
{ name: 'Company', href: '#' },
];
export default function Example() {
return (
<div className='relative bg-gray-800 overflow-hidden'>
<div className='hidden sm:block sm:absolute sm:inset-0' aria-hidden='true'>
<svg
className='absolute bottom-0 right-0 transform translate-x-1/2 mb-48 text-gray-700 lg:top-0 lg:mt-28 lg:mb-0 xl:transform-none xl:translate-x-0'
width={364}
height={384}
viewBox='0 0 364 384'
fill='none'
>
<defs>
<pattern
id='eab71dd9-9d7a-47bd-8044-256344ee00d0'
x={0}
y={0}
width={20}
height={20}
patternUnits='userSpaceOnUse'
>
<rect x={0} y={0} width={4} height={4} fill='currentColor' />
</pattern>
</defs>
<rect width={364} height={384} fill='url(#eab71dd9-9d7a-47bd-8044-256344ee00d0)' />
</svg>
</div>
<div className='relative pt-6 pb-16 sm:pb-24'>
<Popover>
{({ open }) => (
<>
<nav
className='relative max-w-7xl mx-auto flex items-center justify-between px-4 sm:px-6'
aria-label='Global'
>
<div className='flex items-center flex-1'>
<div className='flex items-center justify-between w-full md:w-auto'>
<a href='#'>
<span className='sr-only'>Loesen</span>
<img className='h-8 w-auto sm:h-10' src='/images/loesen-logo.svg' alt='' />
</a>
<div className='-mr-2 flex items-center md:hidden'>
<Popover.Button className='bg-gray-800 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-700 focus:outline-none focus:ring-2 focus-ring-inset focus:ring-white'>
<span className='sr-only'>Open main menu</span>
<MenuIcon className='h-6 w-6' aria-hidden='true' />
</Popover.Button>
</div>
</div>
<div className='hidden space-x-10 md:flex md:ml-10'>
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className='font-medium text-white hover:text-gray-300'
>
{item.name}
</a>
))}
</div>
</div>
<div className='hidden md:flex'>
<a
href='#'
className='inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700'
>
Log in
</a>
</div>
</nav>
<Transition
show={open}
as={Fragment}
enter='duration-150 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-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden'>
<div className='px-5 pt-4 flex items-center justify-between'>
<div>
<img className='h-8 w-auto' src='/images/loesen-logo.svg' alt='' />
</div>
<div className='-mr-2'>
<Popover.Button className='bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 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='px-2 pt-2 pb-3 space-y-1'>
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className='block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50'
>
{item.name}
</a>
))}
</div>
<a
href='#'
className='block w-full px-5 py-3 text-center font-medium text-blue-600 bg-gray-50 hover:bg-gray-100'
>
Log in
</a>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<main className='mt-16 sm:mt-24'>
<div className='mx-auto max-w-7xl'>
<div className='lg:grid lg:grid-cols-12 lg:gap-8'>
<div className='px-4 sm:px-6 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center'>
<div>
<a
href='#'
className='inline-flex items-center text-white bg-gray-900 rounded-full p-1 pr-2 sm:text-base lg:text-sm xl:text-base hover:text-gray-200'
>
<span className='px-3 py-0.5 text-white text-xs font-semibold leading-5 uppercase tracking-wide bg-blue-500 rounded-full'>
We're hiring
</span>
<span className='ml-4 text-sm'>Visit our careers page</span>
<ChevronRightIcon className='ml-2 w-5 h-5 text-gray-500' aria-hidden='true' />
</a>
<h1 className='mt-4 text-4xl tracking-tight font-extrabold text-white sm:mt-5 sm:leading-none lg:mt-6 lg:text-5xl xl:text-6xl'>
<span className='md:block'>Data to enrich your</span>{' '}
<span className='text-blue-400 md:block'>online business</span>
</h1>
<p className='mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl'>
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat
commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua ad ad non deserunt
sunt.
</p>
<p className='mt-8 text-sm text-white uppercase tracking-wide font-semibold sm:mt-10'>
Used by
</p>
<div className='mt-5 w-full sm:mx-auto sm:max-w-lg lg:ml-0'>
<div className='flex flex-wrap items-start justify-between'>
<div className='flex justify-center px-1'>
<img
className='h-9 sm:h-10'
src='https://tailwindui.com/img/logos/tuple-logo-gray-400.svg'
alt='Tuple'
/>
</div>
<div className='flex justify-center px-1'>
<img
className='h-9 sm:h-10'
src='https://tailwindui.com/img/logos/workcation-logo-gray-400.svg'
alt='Workcation'
/>
</div>
<div className='flex justify-center px-1'>
<img
className='h-9 sm:h-10'
src='https://tailwindui.com/img/logos/statickit-logo-gray-400.svg'
alt='StaticKit'
/>
</div>
</div>
</div>
</div>
</div>
<div className='mt-16 sm:mt-24 lg:mt-0 lg:col-span-6'>
<div className='bg-white sm:max-w-md sm:w-full sm:mx-auto sm:rounded-lg sm:overflow-hidden'>
<div className='px-4 py-8 sm:px-10'>
<div>
<p className='text-sm font-medium text-gray-700'>Sign in with</p>
<div className='mt-1 grid grid-cols-3 gap-3'>
<div>
<a
href='#'
className='w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50'
>
<span className='sr-only'>Sign in with Facebook</span>
<svg
className='w-5 h-5'
aria-hidden='true'
fill='currentColor'
viewBox='0 0 20 20'
>
<path
fillRule='evenodd'
d='M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z'
clipRule='evenodd'
/>
</svg>
</a>
</div>
<div>
<a
href='#'
className='w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50'
>
<span className='sr-only'>Sign in with Twitter</span>
<svg
className='w-5 h-5'
aria-hidden='true'
fill='currentColor'
viewBox='0 0 20 20'
>
<path d='M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84' />
</svg>
</a>
</div>
<div>
<a
href='#'
className='w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50'
>
<span className='sr-only'>Sign in with GitHub</span>
<svg
className='w-5 h-5'
aria-hidden='true'
fill='currentColor'
viewBox='0 0 20 20'
>
<path
fillRule='evenodd'
d='M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z'
clipRule='evenodd'
/>
</svg>
</a>
</div>
</div>
</div>
<div className='mt-6 relative'>
<div className='absolute inset-0 flex items-center' aria-hidden='true'>
<div className='w-full border-t border-gray-300' />
</div>
<div className='relative flex justify-center text-sm'>
<span className='px-2 bg-white text-gray-500'>Or</span>
</div>
</div>
<div className='mt-6'>
<form action='#' method='POST' className='space-y-6'>
<div>
<label htmlFor='name' className='sr-only'>
Full name
</label>
<input
type='text'
name='name'
id='name'
autoComplete='name'
placeholder='Full name'
required
className='block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300 rounded-md'
/>
</div>
<div>
<label htmlFor='mobile-or-email' className='sr-only'>
Mobile number or email
</label>
<input
type='text'
name='mobile-or-email'
id='mobile-or-email'
autoComplete='email'
placeholder='Mobile number or email'
required
className='block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300 rounded-md'
/>
</div>
<div>
<label htmlFor='password' className='sr-only'>
Password
</label>
<input
id='password'
name='password'
type='password'
placeholder='Password'
autoComplete='current-password'
required
className='block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300 rounded-md'
/>
</div>
<div>
<button
type='submit'
className='w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
>
Create your account
</button>
</div>
</form>
</div>
</div>
<div className='px-4 py-6 bg-gray-50 border-t-2 border-gray-200 sm:px-10'>
<p className='text-xs leading-5 text-gray-500'>
By signing up, you agree to our{' '}
<a href='#' className='font-medium text-gray-900 hover:underline'>
Terms
</a>
,{' '}
<a href='#' className='font-medium text-gray-900 hover:underline'>
Data Policy
</a>{' '}
and{' '}
<a href='#' className='font-medium text-gray-900 hover:underline'>
Cookies Policy
</a>
.
</p>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
);
}
With Sign Up And Media Content
/*
This example requires Tailwind CSS v2.0+
This example requires some changes to your config:
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/forms'),
]
}
*/
import { Fragment } from "react";
import { Popover, Transition } from "@headlessui/react";
import { MenuIcon, XIcon } from "@heroicons/react/outline";
const navigation = [
{ name: "Product", href: "#" },
{ name: "Features", href: "#" },
{ name: "Marketplace", href: "#" },
{ name: "Company", href: "#" },
];
export default function Example() {
return (
<div className="relative bg-white overflow-hidden">
<div
className="hidden lg:block lg:absolute lg:inset-0"
aria-hidden="true"
>
<svg
className="absolute top-0 left-1/2 transform translate-x-64 -translate-y-8"
width={640}
height={784}
fill="none"
viewBox="0 0 640 784"
>
<defs>
<pattern
id="9ebea6f4-a1f5-4d96-8c4e-4c2abf658047"
x={118}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-gray-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
y={72}
width={640}
height={640}
className="text-gray-50"
fill="currentColor"
/>
<rect
x={118}
width={404}
height={784}
fill="url(#9ebea6f4-a1f5-4d96-8c4e-4c2abf658047)"
/>
</svg>
</div>
<div className="relative pt-6 pb-16 sm:pb-24 lg:pb-32">
<Popover>
{({ open }) => (
<>
<nav
className="relative max-w-7xl mx-auto flex items-center justify-between px-4 sm:px-6"
aria-label="Global"
>
<div className="flex items-center flex-1">
<div className="flex items-center justify-between w-full md:w-auto">
<a href="#">
<span className="sr-only">Loesen</span>
<img
className="h-8 w-auto sm:h-10"
src="/images/loesen-logo.svg"
alt=""
/>
</a>
<div className="-mr-2 flex items-center 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 main menu</span>
<MenuIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
<div className="hidden md:block md:ml-10 md:space-x-10">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className="font-medium text-gray-500 hover:text-gray-900"
>
{item.name}
</a>
))}
</div>
</div>
<div className="hidden md:block text-right">
<span className="inline-flex rounded-md shadow-md ring-1 ring-black ring-opacity-5">
<a
href="#"
className="inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50"
>
Log in
</a>
</span>
</div>
</nav>
<Transition
show={open}
as={Fragment}
enter="duration-150 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-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="px-5 pt-4 flex items-center justify-between">
<div>
<img
className="h-8 w-auto"
src="/images/loesen-logo.svg"
alt=""
/>
</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 main menu</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
<div className="px-2 pt-2 pb-3 space-y-1">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
>
{item.name}
</a>
))}
</div>
<a
href="#"
className="block w-full px-5 py-3 text-center font-medium text-blue-600 bg-gray-50 hover:bg-gray-100"
>
Log in
</a>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<main className="mt-16 mx-auto max-w-7xl px-4 sm:mt-24 sm:px-6 lg:mt-32">
<div className="lg:grid lg:grid-cols-12 lg:gap-8">
<div className="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
<h1>
<span className="block text-sm font-semibold uppercase tracking-wide text-gray-500 sm:text-base lg:text-sm xl:text-base">
Coming soon
</span>
<span className="mt-1 block text-4xl tracking-tight font-extrabold sm:text-5xl xl:text-6xl">
<span className="block text-gray-900">
Data to enrich your
</span>
<span className="block text-blue-600">online business</span>
</span>
</h1>
<p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui
lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat
fugiat aliqua ad ad non deserunt sunt.
</p>
<div className="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
<p className="text-base font-medium text-gray-900">
Sign up to get notified when it’s ready.
</p>
<form action="#" method="POST" className="mt-3 sm:flex">
<label htmlFor="email" className="sr-only">
Email
</label>
<input
type="text"
name="email"
id="email"
className="block w-full py-3 text-base rounded-md placeholder-gray-500 shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:flex-1 border-gray-300"
placeholder="Enter your email"
/>
<button
type="submit"
className="mt-3 w-full px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-800 shadow-sm hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:flex-shrink-0 sm:inline-flex sm:items-center sm:w-auto"
>
Notify me
</button>
</form>
<p className="mt-3 text-sm text-gray-500">
We care about the protection of your data. Read our
<a href="#" className="font-medium text-gray-900 underline">
Privacy Policy
</a>
.
</p>
</div>
</div>
<div className="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
<svg
className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-8 scale-75 origin-top sm:scale-100 lg:hidden"
width={640}
height={784}
fill="none"
viewBox="0 0 640 784"
aria-hidden="true"
>
<defs>
<pattern
id="4f4f415c-a0e9-44c2-9601-6ded5a34a13e"
x={118}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-gray-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
y={72}
width={640}
height={640}
className="text-gray-50"
fill="currentColor"
/>
<rect
x={118}
width={404}
height={784}
fill="url(#4f4f415c-a0e9-44c2-9601-6ded5a34a13e)"
/>
</svg>
<div className="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
<button
type="button"
className="relative block w-full bg-white rounded-lg overflow-hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
<span className="sr-only">Watch our video to learn more</span>
<img
className="w-full"
src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
alt=""
/>
<div
className="absolute inset-0 w-full h-full flex items-center justify-center"
aria-hidden="true"
>
<svg
className="h-20 w-20 text-blue-500"
fill="currentColor"
viewBox="0 0 84 84"
>
<circle
opacity="0.9"
cx={42}
cy={42}
r={42}
fill="white"
/>
<path d="M55.5039 40.3359L37.1094 28.0729C35.7803 27.1869 34 28.1396 34 29.737V54.263C34 55.8604 35.7803 56.8131 37.1094 55.9271L55.5038 43.6641C56.6913 42.8725 56.6913 41.1275 55.5039 40.3359Z" />
</svg>
</div>
</button>
</div>
</div>
</div>
</main>
</div>
</div>
);
}