CTA
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>
);
}
Brand Panel With App Screenshot
/*
This example requires Tailwind CSS v2.0+
This example requires some changes to your config:
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/aspect-ratio'),
]
}
*/
export default function Example() {
return (
<div className="bg-white">
<div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
<div className="bg-blue-700 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4">
<div className="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
<div className="lg:self-center">
<h2 className="text-3xl font-extrabold text-white sm:text-4xl">
<span className="block">Ready to dive in?</span>
<span className="block">Start your free trial today.</span>
</h2>
<p className="mt-4 text-lg leading-6 text-blue-200">
Ac euismod vel sit maecenas id pellentesque eu sed consectetur.
Malesuada adipiscing sagittis vel nulla nec.
</p>
<a
href="#"
className="mt-8 bg-white border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center text-base font-medium text-blue-600 hover:bg-blue-50"
>
Sign up for free
</a>
</div>
</div>
<div className="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1">
<img
className="transform translate-x-6 translate-y-6 rounded-md object-cover object-left-top sm:translate-x-16 lg:translate-y-20"
src="https://tailwindui.com/img/component-images/full-width-with-sidebar.jpg"
alt="App screenshot"
/>
</div>
</div>
</div>
</div>
);
}
Brand Panel With Overlapping Image
/*
This example requires Tailwind CSS v2.0+
This example requires some changes to your config:
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/aspect-ratio'),
]
}
*/
export default function Example() {
return (
<div className="relative py-16 bg-white">
<div
className="hidden absolute top-0 inset-x-0 h-1/2 bg-gray-50 lg:block"
aria-hidden="true"
/>
<div className="max-w-7xl mx-auto bg-blue-600 lg:bg-transparent lg:px-8">
<div className="lg:grid lg:grid-cols-12">
<div className="relative z-10 lg:col-start-1 lg:row-start-1 lg:col-span-4 lg:py-16 lg:bg-transparent">
<div
className="absolute inset-x-0 h-1/2 bg-gray-50 lg:hidden"
aria-hidden="true"
/>
<div className="max-w-md mx-auto px-4 sm:max-w-3xl sm:px-6 lg:max-w-none lg:p-0">
<div className="aspect-w-10 aspect-h-6 sm:aspect-w-2 sm:aspect-h-1 lg:aspect-w-1">
<img
className="object-cover object-center rounded-3xl shadow-2xl"
src="https://images.unsplash.com/photo-1507207611509-ec012433ff52?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=934&q=80"
alt=""
/>
</div>
</div>
</div>
<div className="relative bg-blue-600 lg:col-start-3 lg:row-start-1 lg:col-span-10 lg:rounded-3xl lg:grid lg:grid-cols-10 lg:items-center">
<div
className="hidden absolute inset-0 overflow-hidden rounded-3xl lg:block"
aria-hidden="true"
>
<svg
className="absolute bottom-full left-full transform translate-y-1/3 -translate-x-2/3 xl:bottom-auto xl:top-0 xl:translate-y-0"
width={404}
height={384}
fill="none"
viewBox="0 0 404 384"
aria-hidden="true"
>
<defs>
<pattern
id="64e643ad-2176-4f86-b3d7-f2c5da3b6a6d"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-blue-500"
fill="currentColor"
/>
</pattern>
</defs>
<rect
width={404}
height={384}
fill="url(#64e643ad-2176-4f86-b3d7-f2c5da3b6a6d)"
/>
</svg>
<svg
className="absolute top-full transform -translate-y-1/3 -translate-x-1/3 xl:-translate-y-1/2"
width={404}
height={384}
fill="none"
viewBox="0 0 404 384"
aria-hidden="true"
>
<defs>
<pattern
id="64e643ad-2176-4f86-b3d7-f2c5da3b6a6d"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-blue-500"
fill="currentColor"
/>
</pattern>
</defs>
<rect
width={404}
height={384}
fill="url(#64e643ad-2176-4f86-b3d7-f2c5da3b6a6d)"
/>
</svg>
</div>
<div className="relative max-w-md mx-auto py-12 px-4 space-y-6 sm:max-w-3xl sm:py-16 sm:px-6 lg:max-w-none lg:p-0 lg:col-start-4 lg:col-span-6">
<h2
className="text-3xl font-extrabold text-white"
id="join-heading"
>
Join our team
</h2>
<p className="text-lg text-white">
Varius facilisi mauris sed sit. Non sed et duis dui leo,
vulputate id malesuada non. Cras aliquet purus dui laoreet diam
sed lacus, fames.
</p>
<a
className="block w-full py-3 px-5 text-center bg-white border border-transparent rounded-md shadow-md text-base font-medium text-blue-700 hover:bg-gray-50 sm:inline-block sm:w-auto"
href="#"
>
Explore open positions
</a>
</div>
</div>
</div>
</div>
</div>
);
}
Simple Center Branded
/* This example requires Tailwind CSS v2.0+ */
export default function Example() {
return (
<div className='bg-blue-700'>
<div className='max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8'>
<h2 className='text-3xl font-extrabold text-white sm:text-4xl'>
<span className='block'>Boost your productivity.</span>
<span className='block'>Start using Loesen today.</span>
</h2>
<p className='mt-4 text-lg leading-6 text-blue-200'>
Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing
sagittis vel nulla nec.
</p>
<a
href='#'
className='mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50 sm:w-auto'
>
Sign up for free
</a>
</div>
</div>
);
}
Simple Justified
/* This example requires Tailwind CSS v2.0+ */
export default function Example() {
return (
<div className='bg-gray-50'>
<div className='max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between'>
<h2 className='text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl'>
<span className='block'>Ready to dive in?</span>
<span className='block text-blue-600'>Start your free trial today.</span>
</h2>
<div className='mt-8 flex lg:mt-0 lg:flex-shrink-0'>
<div className='inline-flex rounded-md shadow'>
<a
href='#'
className='inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700'
>
Get started
</a>
</div>
<div className='ml-3 inline-flex rounded-md shadow'>
<a
href='#'
className='inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50'
>
Learn more
</a>
</div>
</div>
</div>
</div>
);
}
Simple Justified On Light Brand
/* This example requires Tailwind CSS v2.0+ */
export default function Example() {
return (
<div className='bg-blue-50'>
<div className='max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-24 lg:px-8 lg:flex lg:items-center lg:justify-between'>
<h2 className='text-3xl font-extrabold tracking-tight text-gray-900 md:text-4xl'>
<span className='block'>Ready to dive in?</span>
<span className='block text-blue-600'>Start your free trial today.</span>
</h2>
<div className='mt-8 flex lg:mt-0 lg:flex-shrink-0'>
<div className='inline-flex rounded-md shadow'>
<a
href='#'
className='inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700'
>
Get started
</a>
</div>
</div>
</div>
</div>
);
}
Simple Stacked
/* This example requires Tailwind CSS v2.0+ */
export default function Example() {
return (
<div className='bg-white'>
<div className='max-w-7xl mx-auto py-12 px-4 sm:px-6 md:py-16 lg:px-8 lg:py-20'>
<h2 className='text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl'>
<span className='block'>Ready to dive in?</span>
<span className='block text-blue-600'>Start your free trial today.</span>
</h2>
<div className='mt-8 flex'>
<div className='inline-flex rounded-md shadow'>
<a
href='#'
className='inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700'
>
Get started
</a>
</div>
<div className='ml-3 inline-flex'>
<a
href='#'
className='inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200'
>
Learn more
</a>
</div>
</div>
</div>
</div>
);
}
Split With Image
/* This example requires Tailwind CSS v2.0+ */
import { ExternalLinkIcon } from '@heroicons/react/solid';
export default function Example() {
return (
<div className='relative bg-gray-800'>
<div className='h-56 bg-blue-600 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/2'>
<img
className='w-full h-full object-cover'
src='https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=60&blend=6366F1&sat=-100&blend-mode=multiply'
alt=''
/>
</div>
<div className='relative max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8 lg:py-16'>
<div className='md:ml-auto md:w-1/2 md:pl-10'>
<h2 className='text-base font-semibold uppercase tracking-wider text-gray-300'>
Award winning support
</h2>
<p className='mt-2 text-white text-3xl font-extrabold tracking-tight sm:text-4xl'>
We’re here to help
</p>
<p className='mt-3 text-lg text-gray-300'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et, egestas tempus tellus etiam
sed. Quam a scelerisque amet ullamcorper eu enim et fermentum, augue. Aliquet amet
volutpat quisque ut interdum tincidunt duis.
</p>
<div className='mt-8'>
<div className='inline-flex rounded-md shadow'>
<a
href='#'
className='inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-gray-900 bg-white hover:bg-gray-50'
>
Visit the help center
<ExternalLinkIcon className='-mr-1 ml-3 h-5 w-5 text-gray-400' aria-hidden='true' />
</a>
</div>
</div>
</div>
</div>
</div>
);
}