Pricing
With Four Tiers And FeatureList
/*
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 {
BookmarkAltIcon,
CalendarIcon,
ChartBarIcon,
CheckIcon as CheckIconOutline,
CursorClickIcon,
MenuIcon,
PhoneIcon,
PlayIcon,
RefreshIcon,
ShieldCheckIcon,
SupportIcon,
ViewGridIcon,
XIcon,
} from "@heroicons/react/outline";
import {
CheckIcon as CheckIconSolid,
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 = [
{
id: 1,
name: "Help Center",
description:
"Get all of your questions answered in our forums or contact support.",
href: "#",
icon: SupportIcon,
},
{
id: 2,
name: "Guides",
description:
"Learn how to maximize our platform to get the most out of it.",
href: "#",
icon: BookmarkAltIcon,
},
{
id: 3,
name: "Events",
description:
"See what meet-ups and other events we might be planning near you.",
href: "#",
icon: CalendarIcon,
},
{
id: 4,
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: "#" },
];
const tiers = [
{
name: "Hobby",
href: "#",
priceMonthly: 12,
description: "All the basics for starting a new business",
features: [
"Potenti felis, in cras at at ligula nunc.",
"Orci neque eget pellentesque.",
],
},
{
name: "Freelancer",
href: "#",
priceMonthly: 24,
description: "All the basics for starting a new business",
features: [
"Potenti felis, in cras at at ligula nunc. ",
"Orci neque eget pellentesque.",
"Donec mauris sit in eu tincidunt etiam.",
],
},
{
name: "Startup",
href: "#",
priceMonthly: 32,
description: "All the basics for starting a new business",
features: [
"Potenti felis, in cras at at ligula nunc. ",
"Orci neque eget pellentesque.",
"Donec mauris sit in eu tincidunt etiam.",
"Faucibus volutpat magna.",
],
},
{
name: "Enterprise",
href: "#",
priceMonthly: 48,
description: "All the basics for starting a new business",
features: [
"Potenti felis, in cras at at ligula nunc. ",
"Orci neque eget pellentesque.",
"Donec mauris sit in eu tincidunt etiam.",
"Faucibus volutpat magna.",
"Id sed tellus in varius quisque.",
"Risus egestas faucibus.",
"Risus cursus ullamcorper.",
],
},
];
const features = [
{
name: "Invite team members",
description:
"Tempor tellus in aliquet eu et sit nulla tellus. Suspendisse est, molestie blandit quis ac. Lacus.",
},
{
name: "Notifications",
description:
"Ornare donec rhoncus vitae nisl velit, neque, mauris dictum duis. Nibh urna non parturient.",
},
{
name: "List view",
description:
"Etiam cras augue ornare pretium sit malesuada morbi orci, venenatis. Dictum lacus.",
},
{
name: "Boards",
description:
"Interdum quam pulvinar turpis tortor, egestas quis diam amet, natoque. Mauris sagittis.",
},
{
name: "Keyboard shortcuts",
description:
"Ullamcorper in ipsum ac feugiat. Senectus at aliquam vulputate mollis nec. In at risus odio.",
},
{
name: "Reporting",
description:
"Magna a vel sagittis aliquam eu amet. Et lorem auctor quam nunc odio. Sed bibendum.",
},
{
name: "Calendars",
description:
"Sed mi, dapibus turpis orci posuere integer. A porta viverra posuere adipiscing turpis.",
},
{
name: "Mobile app",
description:
"Quisque sapien nunc nisl eros. Facilisis sagittis maecenas id dignissim tristique proin sed.",
},
];
const logos = [
{
name: "Tuple",
url: "https://tailwindui.com/img/logos/tuple-logo-purple-200.svg",
},
{
name: "Mirage",
url: "https://tailwindui.com/img/logos/mirage-logo-purple-200.svg",
},
{
name: "StaticKit",
url: "https://tailwindui.com/img/logos/statickit-logo-purple-200.svg",
},
{
name: "Transistor",
url: "https://tailwindui.com/img/logos/transistor-logo-purple-200.svg",
},
{
name: "Workcation",
url: "https://tailwindui.com/img/logos/workcation-logo-purple-200.svg",
},
];
const faqs = [
{
id: 1,
question: "How do you make holy water?",
answer:
"You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 2,
question: "What's the best thing about Switzerland?",
answer:
"I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 3,
question: "What do you call someone with no body and no nose?",
answer:
"Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 4,
question: "Why do you never see elephants hiding in trees?",
answer:
"Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
];
const footerNavigation = {
solutions: [
{ name: "Marketing", href: "#" },
{ name: "Analytics", href: "#" },
{ name: "Commerce", href: "#" },
{ name: "Insights", href: "#" },
],
support: [
{ name: "Pricing", href: "#" },
{ name: "Documentation", href: "#" },
{ name: "Guides", href: "#" },
{ name: "API Status", href: "#" },
],
company: [
{ name: "About", href: "#" },
{ name: "Blog", href: "#" },
{ name: "Jobs", href: "#" },
{ name: "Press", href: "#" },
{ name: "Partners", href: "#" },
],
legal: [
{ name: "Claim", href: "#" },
{ name: "Privacy", href: "#" },
{ name: "Terms", href: "#" },
],
social: [
{
name: "Facebook",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.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.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Instagram",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Twitter",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.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.072 4.072 0 012.8 9.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 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
),
},
{
name: "GitHub",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.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 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 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.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Dribbble",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
clipRule="evenodd"
/>
</svg>
),
},
],
};
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
export default function Example() {
return (
<div className="bg-white">
<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 border-gray-200 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-purple-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-purple-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-purple-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-purple-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.id}
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-purple-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-purple-600 hover:text-purple-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 space-x-8 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="whitespace-nowrap bg-purple-100 border border-transparent rounded-md py-2 px-4 inline-flex items-center justify-center text-base font-medium text-purple-600 hover:bg-purple-200"
>
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 z-10 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden"
>
<div className="rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y-2 divide-gray-50">
<div className="pt-5 pb-6 px-5 space-y-6">
<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-purple-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-purple-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>
<a
href="#"
className="text-base font-medium text-gray-900 hover:text-gray-700"
>
Blog
</a>
<a
href="#"
className="text-base font-medium text-gray-900 hover:text-gray-700"
>
Contact Sales
</a>
{resources.map((item) => (
<a
key={item.id}
href={item.href}
className="text-base font-medium text-gray-900 hover:text-gray-700"
>
{item.name}
</a>
))}
</div>
<div className="space-y-6">
<a
href="#"
className="w-full bg-purple-600 border border-transparent rounded-md py-2 px-4 flex items-center justify-center text-base font-medium text-white hover:bg-purple-700"
>
Sign up
</a>
<p className="text-center text-base font-medium text-gray-500">
Existing customer?{" "}
<a
href="#"
className="text-purple-600 hover:text-purple-500"
>
Sign in
</a>
</p>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
{/* Pricing with four tiers and toggle */}
<div className="bg-gradient-to-b from-white to-gray-50">
<div className="max-w-7xl mx-auto pt-24 px-4 sm:px-6 lg:px-8">
<div className="sm:flex sm:flex-col sm:align-center">
<h1 className="text-5xl font-extrabold text-gray-900 sm:text-center">
Pricing Plans
</h1>
<p className="mt-5 text-xl text-gray-500 sm:text-center">
Start building for free, then add a site plan to go live. Account
plans unlock additional features.
</p>
<div className="relative mt-6 bg-gray-100 rounded-lg p-0.5 flex self-center sm:mt-8">
<button
type="button"
className="relative bg-white border-gray-200 rounded-md shadow-sm py-2 w-1/2 text-sm font-medium text-gray-900 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-purple-500 focus:z-10 sm:w-auto sm:px-8"
>
Monthly billing
</button>
<button
type="button"
className="ml-0.5 relative border border-transparent rounded-md py-2 w-1/2 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-purple-500 focus:z-10 sm:w-auto sm:px-8"
>
Yearly billing
</button>
</div>
</div>
<div className="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0 xl:grid-cols-4">
{tiers.map((tier) => (
<div
key={tier.name}
className="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200"
>
<div className="p-6">
<h2 className="text-lg leading-6 font-medium text-gray-900">
{tier.name}
</h2>
<p className="mt-4 text-sm text-gray-500">
{tier.description}
</p>
<p className="mt-8">
<span className="text-4xl font-extrabold text-gray-900">
{tier.priceMonthly}
</span>{" "}
<span className="text-base font-medium text-gray-500">
/mo
</span>
</p>
<a
href={tier.href}
className="mt-8 block w-full bg-purple-600 border border-transparent rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-purple-700"
>
Buy {tier.name}
</a>
</div>
<div className="pt-6 pb-8 px-6">
<h3 className="text-xs font-medium text-gray-900 tracking-wide uppercase">
What's included
</h3>
<ul className="mt-6 space-y-4">
{tier.features.map((feature) => (
<li key={feature} className="flex space-x-3">
<CheckIconSolid
className="flex-shrink-0 h-5 w-5 text-green-500"
aria-hidden="true"
/>
<span className="text-sm text-gray-500">{feature}</span>
</li>
))}
</ul>
</div>
</div>
))}
</div>
</div>
{/* Feature list */}
<div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8">
<div className="max-w-3xl mx-auto text-center">
<h2 className="text-3xl font-extrabold text-gray-900">
All-in-one platform
</h2>
<p className="mt-4 text-lg text-gray-500">
Ac euismod vel sit maecenas id pellentesque eu sed consectetur.
Malesuada adipiscing sagittis vel nulla nec.
</p>
</div>
<dl className="mt-12 space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 lg:grid-cols-4 lg:gap-x-8">
{features.map((feature) => (
<div key={feature.name} className="relative">
<dt>
<CheckIconOutline
className="absolute h-6 w-6 text-green-500"
aria-hidden="true"
/>
<p className="ml-9 text-lg leading-6 font-medium text-gray-900">
{feature.name}
</p>
</dt>
<dd className="mt-2 ml-9 flex text-base text-gray-500 lg:py-0 lg:pb-4">
{feature.description}
</dd>
</div>
))}
</dl>
</div>
</div>
{/* Logo cloud on brand */}
<div className="bg-purple-600">
<div className="max-w-7xl mx-auto py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
<div className="lg:space-y-10">
<h2 className="text-3xl font-extrabold text-white">
The world's most innovative companies use Loesen
</h2>
<div className="mt-8 flow-root lg:mt-0">
<div className="-mt-4 -ml-8 flex flex-wrap justify-between lg:-ml-4">
{logos.map((logo) => (
<div
key={logo.name}
className="mt-4 ml-8 flex flex-grow flex-shrink-0 lg:flex-grow-0 lg:ml-4"
>
<img className="h-12" src={logo.url} alt={logo.name} />
</div>
))}
</div>
</div>
</div>
</div>
</div>
{/* FAQ offset */}
<div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-20 lg:px-8">
<div className="lg:grid lg:grid-cols-3 lg:gap-8">
<div className="space-y-4">
<h2 className="text-3xl font-extrabold text-gray-900">
Frequently asked questions
</h2>
<p className="text-lg text-gray-500">
Can’t find the answer you’re looking for? Reach out to our{" "}
<a
href="#"
className="font-medium text-purple-600 hover:text-purple-500"
>
customer support
</a>{" "}
team.
</p>
</div>
<div className="mt-12 lg:mt-0 lg:col-span-2">
<dl className="space-y-12">
{faqs.map((faq) => (
<div key={faq.id}>
<dt className="text-lg leading-6 font-medium text-gray-900">
{faq.question}
</dt>
<dd className="mt-2 text-base text-gray-500">{faq.answer}</dd>
</div>
))}
</dl>
</div>
</div>
</div>
{/* Footer 4-column with newsletter and localization dark */}
<footer className="bg-gray-900">
<div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<h2 className="sr-only">Footer</h2>
<div className="pb-8 xl:grid xl:grid-cols-5 xl:gap-8">
<div className="grid grid-cols-2 gap-8 xl:col-span-4">
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Solutions
</h3>
<ul className="mt-4 space-y-4">
{footerNavigation.solutions.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-base text-gray-300 hover:text-white"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Support
</h3>
<ul className="mt-4 space-y-4">
{footerNavigation.support.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-base text-gray-300 hover:text-white"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Company
</h3>
<ul className="mt-4 space-y-4">
{footerNavigation.company.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-base text-gray-300 hover:text-white"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Legal
</h3>
<ul className="mt-4 space-y-4">
{footerNavigation.legal.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-base text-gray-300 hover:text-white"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
<div className="mt-12 xl:mt-0">
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Language & Currency
</h3>
<form className="mt-4 space-y-4 sm:max-w-xs">
<fieldset className="w-full">
<label htmlFor="language" className="sr-only">
Language
</label>
<div className="relative">
<select
id="language"
name="language"
className="block w-full bg-none bg-gray-800 border border-transparent text-base text-white focus:ring-white focus:border-white sm:text-sm rounded-md"
defaultValue="English"
>
<option>English</option>
<option>French</option>
<option>German</option>
<option>Japanese</option>
<option>Spanish</option>
</select>
<div className="pointer-events-none absolute inset-y-0 right-0 px-2 flex items-center">
<ChevronDownIcon
className="h-4 w-4 text-white"
aria-hidden="true"
/>
</div>
</div>
</fieldset>
<fieldset className="w-full">
<label htmlFor="currency" className="sr-only">
Currency
</label>
<div className="mt-1.5 relative">
<select
id="currency"
name="currency"
className="block w-full bg-none bg-gray-800 border border-transparent text-base text-white focus:ring-white focus:border-white sm:text-sm rounded-md"
defaultValue="AUD"
>
<option>ARS</option>
<option>AUD</option>
<option>CAD</option>
<option>CHF</option>
<option>EUR</option>
<option>GBP</option>
<option>JPY</option>
<option>USD</option>
</select>
<div className="pointer-events-none absolute inset-y-0 right-0 px-2 flex items-center">
<ChevronDownIcon
className="h-4 w-4 text-white"
aria-hidden="true"
/>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div className="border-t border-gray-700 pt-8 space-y-4 lg:space-y-0 lg:flex lg:items-center lg:justify-between xl:mt-0">
<div className="space-y-2">
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Subscribe to our newsletter
</h3>
<p className="text-base text-gray-300">
The latest news, articles, and resources, sent to your inbox
weekly.
</p>
</div>
<form className="sm:flex sm:max-w-md">
<label htmlFor="email-address" className="sr-only">
Email address
</label>
<input
type="email"
name="email-address"
id="email-address"
autoComplete="email"
required
className="min-w-0 w-full bg-white border border-transparent py-2 px-4 placeholder-gray-500 focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white focus:border-white sm:max-w-xs rounded-md"
placeholder="Enter your email"
/>
<div className="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0">
<button
type="submit"
className="w-full bg-purple-600 border border-transparent rounded-md py-2 px-4 flex items-center justify-center text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-purple-500"
>
Subscribe
</button>
</div>
</form>
</div>
<div className="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
<div className="flex space-x-6 md:order-2">
{footerNavigation.social.map((item) => (
<a
key={item.name}
href="#"
className="text-gray-400 hover:text-gray-300"
>
<span className="sr-only">{item.name}</span>
<item.icon className="h-6 w-6" aria-hidden="true" />
</a>
))}
</div>
<p className="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
© 2020 Loesen, Inc. All rights reserved.
</p>
</div>
</div>
</footer>
</div>
);
}
With Split Brand Panel
/*
This example requires Tailwind CSS v2.0+
This example requires some changes to your config:
// tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
// ...
theme: {
extend: {
colors: {
cyan: colors.cyan,
}
}
},
plugins: [
// ...
require('@tailwindcss/forms'),
]
}
*/
import { Fragment } from "react";
import { Popover, Transition } from "@headlessui/react";
import {
BookmarkAltIcon,
CalendarIcon,
ChartBarIcon,
CheckIcon,
CursorClickIcon,
MenuIcon,
PhoneIcon,
PlayIcon,
PlusIcon,
RefreshIcon,
ShieldCheckIcon,
SupportIcon,
UsersIcon,
ViewBoardsIcon,
ViewGridIcon,
ViewListIcon,
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: "#" },
];
const features = [
{
name: "List view",
description:
"Nunc a, lacinia sed risus neque, arcu, rhoncus. Id mauris justo facilisis aliquam platea vestibulum condimentum morbi.",
icon: ViewListIcon,
},
{
name: "Boards",
description:
"Purus lobortis volutpat posuere id integer nunc tellus. Non mauris malesuada feugiat massa mi pellentesque cum est. Pharetra a varius urna rhoncus, tempor rutrum.",
icon: ViewBoardsIcon,
},
{
name: "Calendar",
description:
"Purus lobortis volutpat posuere id integer nunc tellus. Non mauris malesuada feugiat massa mi pellentesque cum est. Pharetra a varius urna rhoncus, tempor rutrum.",
icon: CalendarIcon,
},
{
name: "Teams",
description:
"Tincidunt sollicitudin interdum nunc sit risus at bibendum vitae. Urna, quam ut sit justo non, consectetur et varius.",
icon: UsersIcon,
},
];
const checklist = [
"Unlimited projects",
"No per user fees",
"Unlimited storage",
"24/7 support",
"Cancel any time",
"14 days free",
];
const logos = [
{
name: "Workcation",
url: "https://tailwindui.com/img/logos/workcation-logo-cyan-900.svg",
},
{
name: "Tuple",
url: "https://tailwindui.com/img/logos/tuple-logo-cyan-900.svg",
},
{
name: "Level",
url: "https://tailwindui.com/img/logos/level-logo-cyan-900.svg",
},
];
const faqs = [
{
id: 1,
question: "What's the best thing about Switzerland?",
answer:
"I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 2,
question: "How do you make holy water?",
answer:
"You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 3,
question: "Why do you never see elephants hiding in trees?",
answer:
"Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 4,
question: "What do you call someone with no body and no nose?",
answer:
"Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 5,
question: "Why can't you hear a pterodactyl go to the bathroom?",
answer:
"Because the pee is silent. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 6,
question: "Why did the invisible man turn down the job offer?",
answer:
"He couldn't see himself doing it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
];
const footerNavigation = {
solutions: [
{ name: "Marketing", href: "#" },
{ name: "Analytics", href: "#" },
{ name: "Commerce", href: "#" },
{ name: "Insights", href: "#" },
],
support: [
{ name: "Pricing", href: "#" },
{ name: "Documentation", href: "#" },
{ name: "Guides", href: "#" },
{ name: "API Status", href: "#" },
],
company: [
{ name: "About", href: "#" },
{ name: "Blog", href: "#" },
{ name: "Jobs", href: "#" },
{ name: "Press", href: "#" },
{ name: "Partners", href: "#" },
],
legal: [
{ name: "Claim", href: "#" },
{ name: "Privacy", href: "#" },
{ name: "Terms", href: "#" },
],
social: [
{
name: "Facebook",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.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.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Instagram",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Twitter",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.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.072 4.072 0 012.8 9.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 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
),
},
{
name: "GitHub",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.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 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 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.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Dribbble",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
clipRule="evenodd"
/>
</svg>
),
},
],
};
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
export default function Example() {
return (
<div className="bg-white">
<div className="bg-gray-50">
<Popover className="relative">
{({ 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-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-cyan-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-gray-50 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-cyan-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-cyan-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-gray-50 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-cyan-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="#"
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-cyan-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-800"
>
{post.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-5 text-sm">
<a
href="#"
className="font-medium text-cyan-700 hover:text-cyan-600"
>
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 space-x-8 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="whitespace-nowrap bg-cyan-600 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex items-center justify-center text-base font-medium text-white hover:bg-cyan-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 z-10 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden"
>
<div className="rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 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-cyan-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-cyan-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>
<a
href="#"
className="text-base font-medium text-gray-900 hover:text-gray-700"
>
Blog
</a>
<a
href="#"
className="text-base font-medium text-gray-900 hover:text-gray-700"
>
Contact Sales
</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-cyan-600 hover:bg-cyan-700"
>
Sign up
</a>
<p className="mt-6 text-center text-base font-medium text-gray-500">
Existing customer?{" "}
<a
href="#"
className="text-cyan-600 hover:text-cyan-500"
>
Sign in
</a>
</p>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
{/* Header section */}
<div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
<div className="text-center">
<h1 className="text-base font-semibold text-cyan-600 uppercase tracking-wide">
Pricing
</h1>
<p className="mt-1 text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
Take control of your team.
</p>
<p className="max-w-xl mx-auto mt-5 text-xl text-gray-500">
Start building for free, then add a site plan to go live. Account
plans unlock additional features.
</p>
</div>
</div>
</div>
{/* Split brand panel */}
<div className="relative bg-white">
<div className="absolute inset-0" aria-hidden="true">
<div className="absolute inset-y-0 right-0 w-1/2 bg-gradient-to-r from-cyan-600 to-green-400" />
</div>
<div className="relative max-w-7xl mx-auto lg:grid lg:grid-cols-2 lg:px-8">
<div className="bg-white py-16 px-4 sm:py-24 sm:px-6 lg:px-0 lg:pr-8">
<div className="max-w-lg mx-auto lg:mx-0">
<h2 className="text-base font-semibold tracking-wide text-cyan-600 uppercase">
Full-featured
</h2>
<p className="mt-2 text-2xl font-extrabold text-gray-900 sm:text-3xl">
Everything you need to talk with your customers
</p>
<dl className="mt-12 space-y-10">
{features.map((feature) => (
<div key={feature.name} className="relative">
<dt>
<div className="absolute h-12 w-12 bg-gradient-to-r from-cyan-600 to-green-400 rounded-md flex items-center justify-center">
<feature.icon
className="h-6 w-6 text-white"
aria-hidden="true"
/>
</div>
<p className="ml-16 text-lg leading-6 font-medium text-gray-900">
{feature.name}
</p>
</dt>
<dd className="mt-2 ml-16 text-base text-gray-500">
{feature.description}
</dd>
</div>
))}
</dl>
</div>
</div>
<div className="bg-gradient-to-r from-cyan-600 to-green-400 py-16 px-4 sm:py-24 sm:px-6 lg:bg-none lg:flex lg:items-center lg:justify-end lg:px-0 lg:pl-8">
<div className="max-w-lg mx-auto w-full space-y-8 lg:mx-0">
<div>
<h2 className="sr-only">Price</h2>
<p className="relative grid grid-cols-2">
<span className="flex flex-col text-center">
<span className="text-5xl font-extrabold text-white tracking-tight">
$99
</span>
<span className="mt-2 text-base font-medium text-cyan-100">
Setup fee
</span>
<span className="sr-only">plus</span>
</span>
<span
className="pointer-events-none absolute h-12 w-full flex items-center justify-center"
aria-hidden="true"
>
<PlusIcon
className="h-6 w-6 text-cyan-200"
aria-hidden="true"
/>
</span>
<span>
<span className="flex flex-col text-center">
<span className="text-5xl font-extrabold text-white tracking-tight">
$4
</span>
<span className="mt-2 text-base font-medium text-cyan-100">
Per month
</span>
</span>
</span>
</p>
</div>
<ul className="rounded overflow-hidden grid gap-px sm:grid-cols-2">
{checklist.map((item) => (
<li
key={item}
className="bg-cyan-700 bg-opacity-50 py-4 px-4 flex items-center text-base text-white"
>
<CheckIcon
className="h-6 w-6 text-cyan-200"
aria-hidden="true"
/>
<span className="ml-3">{item}</span>
</li>
))}
</ul>
<a
href="#"
className="w-full bg-white border border-transparent rounded-md py-4 px-8 flex items-center justify-center text-lg leading-6 font-medium text-cyan-700 hover:bg-cyan-50 md:px-10"
>
Get started today
</a>
<a
href="#"
className="block text-center text-base font-medium text-cyan-100 hover:text-white"
>
Try Loesen Lite for free
</a>
</div>
</div>
</div>
</div>
{/* Logo cloud */}
<div className="bg-cyan-100 bg-opacity-25">
<div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
<div className="lg:grid lg:grid-cols-2 lg:gap-8">
<h2 className="max-w-md mx-auto text-3xl font-extrabold text-cyan-900 text-center lg:max-w-xl lg:text-left">
The world's most innovative companies use Loesen
</h2>
<div className="mt-8 flow-root lg:mt-0 self-center">
<div className="-mt-4 -ml-8 flex flex-wrap justify-between lg:-ml-4">
{logos.map((logo) => (
<div
key={logo.name}
className="mt-4 ml-8 flex flex-grow flex-shrink-0 justify-center lg:flex-grow-0 lg:ml-4"
>
<img className="h-12" src={logo.url} alt={logo.name} />
</div>
))}
</div>
</div>
</div>
</div>
</div>
{/* FAQs */}
<div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
<h2 className="text-3xl font-extrabold text-gray-900 text-center">
Frequently asked questions
</h2>
<div className="mt-12">
<dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-x-8 md:gap-y-12 lg:grid-cols-3">
{faqs.map((item) => (
<div key={item.id}>
<dt className="text-lg leading-6 font-medium text-gray-900">
{item.question}
</dt>
<dd className="mt-2 text-base text-gray-500">{item.answer}</dd>
</div>
))}
</dl>
</div>
</div>
{/* CTA section */}
<div className="bg-gradient-to-r from-cyan-600 to-green-400">
<div className="max-w-2xl mx-auto py-16 px-4 text-center 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 text-cyan-900">
Start using Loesen today.
</span>
</h2>
<p className="mt-4 text-lg leading-6 text-cyan-100">
Ac euismod vel sit maecenas id pellentesque eu sed consectetur.
Malesuada adipiscing sagittis vel nulla nec.
</p>
<a
href="#"
className="mt-8 w-full bg-cyan-50 border border-transparent rounded-md py-3 px-5 inline-flex items-center justify-center text-base font-medium text-cyan-700 hover:bg-cyan-100 sm:w-auto"
>
Sign up for free
</a>
</div>
</div>
{/* Footer 4-column with newsletter and localization dark */}
<footer className="bg-gray-900">
<div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<h2 className="sr-only">Footer</h2>
<div className="pb-8 xl:grid xl:grid-cols-5 xl:gap-8">
<div className="grid grid-cols-2 gap-8 xl:col-span-4">
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Solutions
</h3>
<ul className="mt-4 space-y-4">
{footerNavigation.solutions.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-base text-gray-300 hover:text-white"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Support
</h3>
<ul className="mt-4 space-y-4">
{footerNavigation.support.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-base text-gray-300 hover:text-white"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Company
</h3>
<ul className="mt-4 space-y-4">
{footerNavigation.company.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-base text-gray-300 hover:text-white"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Legal
</h3>
<ul className="mt-4 space-y-4">
{footerNavigation.legal.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-base text-gray-300 hover:text-white"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
<div className="mt-12 xl:mt-0">
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Language & Currency
</h3>
<form className="mt-4 space-y-4 sm:max-w-xs">
<fieldset className="w-full">
<label htmlFor="language" className="sr-only">
Language
</label>
<div className="relative">
<select
id="language"
name="language"
className="block w-full bg-none bg-gray-800 border border-transparent text-base text-white focus:ring-white focus:border-white sm:text-sm rounded-md"
defaultValue="English"
>
<option>English</option>
<option>French</option>
<option>German</option>
<option>Japanese</option>
<option>Spanish</option>
</select>
<div className="pointer-events-none absolute inset-y-0 right-0 px-2 flex items-center">
<ChevronDownIcon
className="h-4 w-4 text-white"
aria-hidden="true"
/>
</div>
</div>
</fieldset>
<fieldset className="w-full">
<label htmlFor="currency" className="sr-only">
Currency
</label>
<div className="mt-1.5 relative">
<select
id="currency"
name="currency"
className="block w-full bg-none bg-gray-800 border border-transparent text-base text-white focus:ring-white focus:border-white sm:text-sm rounded-md"
defaultValue="AUD"
>
<option>ARS</option>
<option>AUD</option>
<option>CAD</option>
<option>CHF</option>
<option>EUR</option>
<option>GBP</option>
<option>JPY</option>
<option>USD</option>
</select>
<div className="pointer-events-none absolute inset-y-0 right-0 px-2 flex items-center">
<ChevronDownIcon
className="h-4 w-4 text-white"
aria-hidden="true"
/>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div className="border-t border-gray-700 pt-8 space-y-4 lg:space-y-0 lg:flex lg:items-center lg:justify-between xl:mt-0">
<div className="space-y-2">
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Subscribe to our newsletter
</h3>
<p className="text-base text-gray-300">
The latest news, articles, and resources, sent to your inbox
weekly.
</p>
</div>
<form className="sm:flex sm:max-w-md">
<label htmlFor="email-address" className="sr-only">
Email address
</label>
<input
type="email"
name="email-address"
id="email-address"
autoComplete="email"
required
className="min-w-0 w-full bg-white border border-transparent py-2 px-4 placeholder-gray-500 focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-white focus:border-white focus:placeholder-gray-400 sm:max-w-xs rounded-md"
placeholder="Enter your email"
/>
<div className="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0">
<button
type="submit"
className="w-full bg-gray-700 border border-transparent rounded-md py-2 px-4 flex items-center justify-center text-base font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-white"
>
Subscribe
</button>
</div>
</form>
</div>
<div className="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
<div className="flex space-x-6 md:order-2">
{footerNavigation.social.map((item) => (
<a
key={item.name}
href={item.href}
className="text-gray-400 hover:text-gray-300"
>
<span className="sr-only">{item.name}</span>
<item.icon className="h-6 w-6" aria-hidden="true" />
</a>
))}
</div>
<p className="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
© 2020 Loesen, Inc. All rights reserved.
</p>
</div>
</div>
</footer>
</div>
);
}
With Three Tiers And Feature Comparison
/* This example requires Tailwind CSS v2.0+ */
import { CheckIcon, XIcon } from '@heroicons/react/solid'
const navigation = [
{ name: 'Solutions', href: '#' },
{ name: 'Pricing', href: '#' },
{ name: 'Docs', href: '#' },
{ name: 'Company', href: '#' },
]
const plans = [
{
title: 'Starter',
featured: false,
description: 'All your essential business finances, taken care of.',
priceMonthly: 5,
priceYearly: 56,
mainFeatures: [
{ id: 1, value: 'Basic invoicing' },
{ id: 2, value: 'Easy to use accounting' },
{ id: 3, value: 'Mutli-accounts' },
],
},
{
title: 'Scale',
featured: true,
description: 'The best financial services for your thriving business.',
priceMonthly: 19,
priceYearly: 220,
mainFeatures: [
{ id: 1, value: 'Advanced invoicing' },
{ id: 2, value: 'Easy to use accounting' },
{ id: 3, value: 'Mutli-accounts' },
{ id: 4, value: 'Tax planning toolkit' },
{ id: 5, value: 'VAT & VATMOSS filing' },
{ id: 6, value: 'Free bank transfers' },
],
},
{
title: 'Growth',
featured: false,
description: 'Convenient features to take your business to the next level.',
priceMonthly: 12,
priceYearly: 140,
mainFeatures: [
{ id: 1, value: 'Basic invoicing' },
{ id: 2, value: 'Easy to use accounting' },
{ id: 3, value: 'Mutli-accounts' },
{ id: 4, value: 'Tax planning toolkit' },
],
},
]
const features = [
{
title: 'Tax Savings',
tiers: [
{ title: 'starter', value: true },
{ title: 'popular', featured: true, value: true },
{ title: 'intermediate', value: true },
],
},
{
title: 'Easy to use accounting',
tiers: [
{ title: 'starter', value: true },
{ title: 'popular', featured: true, value: true },
{ title: 'intermediate', value: true },
],
},
{
title: 'Multi-accounts',
tiers: [
{ title: 'starter', value: '3 accounts' },
{ title: 'popular', featured: true, value: 'Unlimited accounts' },
{ title: 'intermediate', value: '7 accounts' },
],
},
{
title: 'Invoicing',
tiers: [
{ title: 'starter', value: '3 invoices' },
{ title: 'popular', featured: true, value: 'Unlimited invoices' },
{ title: 'intermediate', value: '10 invoices' },
],
},
{
title: 'Exclusive offers',
tiers: [
{ title: 'starter', value: false },
{ title: 'popular', featured: true, value: true },
{ title: 'intermediate', value: true },
],
},
{
title: '6 months free advisor',
tiers: [
{ title: 'starter', value: false },
{ title: 'popular', featured: true, value: true },
{ title: 'intermediate', value: true },
],
},
{
title: 'Mobile and web access',
tiers: [
{ title: 'starter', value: false },
{ title: 'popular', featured: true, value: true },
{ title: 'intermediate', value: false },
],
},
]
const perks = [
{
title: '24/7 customer support',
tiers: [
{ title: 'starter', value: true },
{ title: 'popular', featured: true, value: true },
{ title: 'intermediate', value: true },
],
},
{
title: 'Instant notifications',
tiers: [
{ title: 'starter', value: true },
{ title: 'popular', featured: true, value: true },
{ title: 'intermediate', value: true },
],
},
{
title: 'Budgeting tools',
tiers: [
{ title: 'starter', value: true },
{ title: 'popular', featured: true, value: true },
{ title: 'intermediate', value: true },
],
},
{
title: 'Digital receipts',
tiers: [
{ title: 'starter', value: true },
{ title: 'popular', featured: true, value: true },
{ title: 'intermediate', value: true },
],
},
{
title: 'Pots to separate money',
tiers: [
{ title: 'starter', value: false },
{ title: 'popular', featured: true, value: true },
{ title: 'intermediate', value: true },
],
},
{
title: 'Free bank transfers',
tiers: [
{ title: 'starter', value: false },
{ title: 'popular', featured: true, value: true },
{ title: 'intermediate', value: false },
],
},
{
title: 'Business debit card',
tiers: [
{ title: 'starter', value: false },
{ title: 'popular', featured: true, value: true },
{ title: 'intermediate', value: false },
],
},
]
const faqs = [
{
id: 1,
question: "What's the best thing about Switzerland?",
answer:
"I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
// More questions...
]
const footerNavigation = {
solutions: [
{ name: 'Marketing', href: '#' },
{ name: 'Analytics', href: '#' },
{ name: 'Commerce', href: '#' },
{ name: 'Insights', href: '#' },
],
support: [
{ name: 'Pricing', href: '#' },
{ name: 'Documentation', href: '#' },
{ name: 'Guides', href: '#' },
{ name: 'API Status', href: '#' },
],
company: [
{ name: 'About', href: '#' },
{ name: 'Blog', href: '#' },
{ name: 'Jobs', href: '#' },
{ name: 'Press', href: '#' },
{ name: 'Partners', href: '#' },
],
legal: [
{ name: 'Claim', href: '#' },
{ name: 'Privacy', href: '#' },
{ name: 'Terms', href: '#' },
],
social: [
{
name: 'Facebook',
href: '#',
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.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.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: 'Instagram',
href: '#',
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: 'Twitter',
href: '#',
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.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.072 4.072 0 012.8 9.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 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
),
},
{
name: 'GitHub',
href: '#',
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.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 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 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.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: 'Dribbble',
href: '#',
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
clipRule="evenodd"
/>
</svg>
),
},
],
}
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Example() {
return (
<div className="bg-gray-50">
<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="https://tailwindui.com/img/logos/Loesen-mark.svg?color=white"
alt=""
/>
</a>
<div className="hidden ml-10 space-x-8 lg:block">
{navigation.map((item) => (
<a key={item.name} href={item.href} className="text-base font-medium text-white hover:text-blue-50">
{item.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"
>
<span className="md:hidden">Sign up</span>
<span className="hidden md:inline lg:hidden">Create account</span>
<span className="hidden lg:inline">Create an account</span>
</a>
</div>
</div>
<div className="mt-4 flex justify-center space-x-6 lg:hidden">
{navigation.map((item) => (
<a key={item.name} href={item.href} className="text-base font-medium text-white hover:text-blue-50">
{item.name}
</a>
))}
</div>
</nav>
</header>
<main>
{/* Pricing section */}
<div>
<div className="relative bg-blue-600">
{/* Overlapping background */}
<div aria-hidden="true" className="hidden absolute bg-gray-50 w-full h-6 bottom-0 lg:block" />
<div className="relative max-w-2xl mx-auto pt-16 px-4 text-center sm:pt-32 sm:px-6 lg:max-w-7xl lg:px-8">
<h1 className="text-4xl font-extrabold tracking-tight text-white sm:text-6xl">
<span className="block lg:inline">Simple pricing,</span>
<span className="block lg:inline">no commitment.</span>
</h1>
<p className="mt-4 text-xl text-blue-100">
Everything you need, nothing you don't. Pick a plan that best suits your business.
</p>
</div>
<h2 className="sr-only">Plans</h2>
{/* Toggle */}
<div className="relative mt-12 flex justify-center sm:mt-16">
<div className="bg-blue-700 p-0.5 rounded-lg flex">
<button
type="button"
className="relative bg-white py-2 px-6 border-blue-700 rounded-md shadow-sm text-sm font-medium text-blue-700 whitespace-nowrap hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-700 focus:ring-white focus:z-10"
>
Monthly billing
</button>
<button
type="button"
className="ml-0.5 relative py-2 px-6 border border-transparent rounded-md text-sm font-medium text-blue-200 whitespace-nowrap hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-700 focus:ring-white focus:z-10"
>
Yearly billing
</button>
</div>
</div>
{/* Cards */}
<div className="relative mt-8 max-w-2xl mx-auto px-4 pb-8 sm:mt-12 sm:px-6 lg:max-w-7xl lg:px-8 lg:pb-0">
{/* Decorative background */}
<div
aria-hidden="true"
className="hidden absolute top-4 bottom-6 left-8 right-8 inset-0 bg-blue-700 rounded-tl-lg rounded-tr-lg lg:block"
/>
<div className="relative space-y-6 lg:space-y-0 lg:grid lg:grid-cols-3">
{plans.map((plan) => (
<div
key={plan.title}
className={classNames(
plan.featured ? 'bg-white ring-2 ring-blue-700 shadow-md' : 'bg-blue-700 lg:bg-transparent',
'pt-6 px-6 pb-3 rounded-lg lg:px-8 lg:pt-12'
)}
>
<div>
<h3
className={classNames(
plan.featured ? 'text-blue-600' : 'text-white',
'text-sm font-semibold uppercase tracking-wide'
)}
>
{plan.title}
</h3>
<div className="flex flex-col items-start sm:flex-row sm:items-center sm:justify-between lg:flex-col lg:items-start">
<div className="mt-3 flex items-center">
<p
className={classNames(
plan.featured ? 'text-blue-600' : 'text-white',
'text-4xl font-extrabold tracking-tight'
)}
>
{plan.priceMonthly}
</p>
<div className="ml-4">
<p className={classNames(plan.featured ? 'text-gray-700' : 'text-white', 'text-sm')}>
USD / mo
</p>
<p className={classNames(plan.featured ? 'text-gray-500' : 'text-blue-200', 'text-sm')}>
Billed yearly ({plan.priceYearly})
</p>
</div>
</div>
<a
href="#"
className={classNames(
plan.featured
? 'bg-blue-600 text-white hover:bg-blue-700'
: 'bg-white text-blue-600 hover:bg-blue-50',
'mt-6 w-full inline-block py-2 px-8 border border-transparent rounded-md shadow-sm text-center text-sm font-medium sm:mt-0 sm:w-auto lg:mt-6 lg:w-full'
)}
>
Buy {plan.title}
</a>
</div>
</div>
<h4 className="sr-only">Features</h4>
<ul
className={classNames(
plan.featured
? 'border-gray-200 divide-gray-200'
: 'border-blue-500 divide-blue-500 divide-opacity-75',
'mt-7 border-t divide-y lg:border-t-0'
)}
>
{plan.mainFeatures.map((mainFeature) => (
<li key={mainFeature.id} className="py-3 flex items-center">
<CheckIcon
className={classNames(
plan.featured ? 'text-blue-500' : 'text-blue-200',
'w-5 h-5 flex-shrink-0'
)}
aria-hidden="true"
/>
<span
className={classNames(
plan.featured ? 'text-gray-600' : 'text-white',
'ml-4 text-sm font-medium'
)}
>
{mainFeature.value}
</span>
</li>
))}
</ul>
</div>
))}
</div>
</div>
</div>
{/* Feature comparison */}
<section aria-labelledby="mobile-comparison-heading" className="lg:hidden">
<h2 id="mobile-comparison-heading" className="sr-only">
Feature comparison
</h2>
<div className="mt-16 max-w-2xl mx-auto px-4 space-y-16 sm:px-6">
{plans.map((plan, planIndex) => (
<div key={plan.title} className="border-t border-gray-200">
<div
className={classNames(
plan.featured ? 'border-blue-600' : 'border-transparent',
'-mt-px pt-6 border-t-2 sm:w-1/2'
)}
>
<h3
className={classNames(plan.featured ? 'text-blue-600' : 'text-gray-900', 'text-sm font-bold')}
>
{plan.title}
</h3>
<p className="mt-2 text-sm text-gray-500">{plan.description}</p>
</div>
<h4 className="mt-10 text-sm font-bold text-gray-900">Catered for business</h4>
<div className="mt-6 relative">
{/* Fake card background */}
<div aria-hidden="true" className="hidden absolute inset-0 pointer-events-none sm:block">
<div
className={classNames(
plan.featured ? 'shadow-md' : 'shadow',
'absolute right-0 w-1/2 h-full bg-white rounded-lg'
)}
/>
</div>
<div
className={classNames(
plan.featured ? 'ring-2 ring-blue-600 shadow-md' : 'ring-1 ring-black ring-opacity-5 shadow',
'relative py-3 px-4 bg-white rounded-lg sm:p-0 sm:bg-transparent sm:rounded-none sm:ring-0 sm:shadow-none'
)}
>
<dl className="divide-y divide-gray-200">
{features.map((feature) => (
<div
key={feature.title}
className="py-3 flex items-center justify-between sm:grid sm:grid-cols-2"
>
<dt className="pr-4 text-sm font-medium text-gray-600">{feature.title}</dt>
<dd className="flex items-center justify-end sm:px-4 sm:justify-center">
{typeof feature.tiers[planIndex].value === 'string' ? (
<span
className={classNames(
feature.tiers[planIndex].featured ? 'text-blue-600' : 'text-gray-900',
'text-sm font-medium'
)}
>
{feature.tiers[planIndex].value}
</span>
) : (
<>
{feature.tiers[planIndex].value === true ? (
<CheckIcon className="mx-auto h-5 w-5 text-blue-600" aria-hidden="true" />
) : (
<XIcon className="mx-auto h-5 w-5 text-gray-400" aria-hidden="true" />
)}
<span className="sr-only">
{feature.tiers[planIndex].value === true ? 'Yes' : 'No'}
</span>
</>
)}
</dd>
</div>
))}
</dl>
</div>
{/* Fake card border */}
<div aria-hidden="true" className="hidden absolute inset-0 pointer-events-none sm:block">
<div
className={classNames(
plan.featured ? 'ring-2 ring-blue-600' : 'ring-1 ring-black ring-opacity-5',
'absolute right-0 w-1/2 h-full rounded-lg'
)}
/>
</div>
</div>
<h4 className="mt-10 text-sm font-bold text-gray-900">Other perks</h4>
<div className="mt-6 relative">
{/* Fake card background */}
<div aria-hidden="true" className="hidden absolute inset-0 pointer-events-none sm:block">
<div
className={classNames(
plan.featured ? 'shadow-md' : 'shadow',
'absolute right-0 w-1/2 h-full bg-white rounded-lg'
)}
/>
</div>
<div
className={classNames(
plan.featured ? 'ring-2 ring-blue-600 shadow-md' : 'ring-1 ring-black ring-opacity-5 shadow',
'relative py-3 px-4 bg-white rounded-lg sm:p-0 sm:bg-transparent sm:rounded-none sm:ring-0 sm:shadow-none'
)}
>
<dl className="divide-y divide-gray-200">
{perks.map((perk) => (
<div key={perk.title} className="py-3 flex justify-between sm:grid sm:grid-cols-2">
<dt className="text-sm font-medium text-gray-600 sm:pr-4">{perk.title}</dt>
<dd className="text-center sm:px-4">
{perk.tiers[planIndex].value === true ? (
<CheckIcon className="mx-auto h-5 w-5 text-blue-600" aria-hidden="true" />
) : (
<XIcon className="mx-auto h-5 w-5 text-gray-400" aria-hidden="true" />
)}
<span className="sr-only">{perk.tiers[planIndex].value === true ? 'Yes' : 'No'}</span>
</dd>
</div>
))}
</dl>
</div>
{/* Fake card border */}
<div aria-hidden="true" className="hidden absolute inset-0 pointer-events-none sm:block">
<div
className={classNames(
plan.featured ? 'ring-2 ring-blue-600' : 'ring-1 ring-black ring-opacity-5',
'absolute right-0 w-1/2 h-full rounded-lg'
)}
/>
</div>
</div>
</div>
))}
</div>
</section>
<section aria-labelledby="comparison-heading" className="hidden lg:block">
<h2 id="comparison-heading" className="sr-only">
Feature comparison
</h2>
<div className="mt-24 max-w-7xl mx-auto px-8">
<div className="w-full border-t border-gray-200 flex items-stretch">
<div className="-mt-px w-1/4 py-6 pr-4 flex items-end">
<h3 className="mt-auto text-sm font-bold text-gray-900">Catered for business</h3>
</div>
{plans.map((plan, index) => (
<div
key={plan.title}
aria-hidden="true"
className={classNames(index === plans.length - 1 ? '' : 'pr-4', '-mt-px pl-4 w-1/4')}
>
<div
className={classNames(
plan.featured ? 'border-blue-600' : 'border-transparent',
'py-6 border-t-2'
)}
>
<p
className={classNames(plan.featured ? 'text-blue-600' : 'text-gray-900', 'text-sm font-bold')}
>
{plan.title}
</p>
<p className="mt-2 text-sm text-gray-500">{plan.description}</p>
</div>
</div>
))}
</div>
<div className="relative">
{/* Fake card backgrounds */}
<div className="absolute inset-0 flex items-stretch pointer-events-none" aria-hidden="true">
<div className="w-1/4 pr-4" />
<div className="w-1/4 px-4">
<div className="w-full h-full bg-white rounded-lg shadow" />
</div>
<div className="w-1/4 px-4">
<div className="w-full h-full bg-white rounded-lg shadow-md" />
</div>
<div className="w-1/4 pl-4">
<div className="w-full h-full bg-white rounded-lg shadow" />
</div>
</div>
<table className="relative w-full">
<caption className="sr-only">Business feature comparison</caption>
<thead>
<tr className="text-left">
<th scope="col">
<span className="sr-only">Feature</span>
</th>
{plans.map((plan) => (
<th key={plan.title} scope="col">
<span className="sr-only">{plan.title} plan</span>
</th>
))}
</tr>
</thead>
<tbody className="divide-y divide-gray-100">
{features.map((feature) => (
<tr key={feature.title}>
<th scope="row" className="w-1/4 py-3 pr-4 text-left text-sm font-medium text-gray-600">
{feature.title}
</th>
{feature.tiers.map((tier, index) => (
<td
key={tier.title}
className={classNames(
index === feature.tiers.length - 1 ? 'pl-4' : 'px-4',
'relative w-1/4 py-0 text-center'
)}
>
<span className="relative w-full h-full py-3">
{typeof tier.value === 'string' ? (
<span
className={classNames(
tier.featured ? 'text-blue-600' : 'text-gray-900',
'text-sm font-medium'
)}
>
{tier.value}
</span>
) : (
<>
{tier.value === true ? (
<CheckIcon className="mx-auto h-5 w-5 text-blue-600" aria-hidden="true" />
) : (
<XIcon className="mx-auto h-5 w-5 text-gray-400" aria-hidden="true" />
)}
<span className="sr-only">{tier.value === true ? 'Yes' : 'No'}</span>
</>
)}
</span>
</td>
))}
</tr>
))}
</tbody>
</table>
{/* Fake card borders */}
<div className="absolute inset-0 flex items-stretch pointer-events-none" aria-hidden="true">
<div className="w-1/4 pr-4" />
<div className="w-1/4 px-4">
<div className="w-full h-full rounded-lg ring-1 ring-black ring-opacity-5" />
</div>
<div className="w-1/4 px-4">
<div className="w-full h-full rounded-lg ring-2 ring-blue-600 ring-opacity-100" />
</div>
<div className="w-1/4 pl-4">
<div className="w-full h-full rounded-lg ring-1 ring-black ring-opacity-5" />
</div>
</div>
</div>
<h3 className="mt-10 text-sm font-bold text-gray-900">Other perks</h3>
<div className="mt-6 relative">
{/* Fake card backgrounds */}
<div className="absolute inset-0 flex items-stretch pointer-events-none" aria-hidden="true">
<div className="w-1/4 pr-4" />
<div className="w-1/4 px-4">
<div className="w-full h-full bg-white rounded-lg shadow" />
</div>
<div className="w-1/4 px-4">
<div className="w-full h-full bg-white rounded-lg shadow-md" />
</div>
<div className="w-1/4 pl-4">
<div className="w-full h-full bg-white rounded-lg shadow" />
</div>
</div>
<table className="relative w-full">
<caption className="sr-only">Perk comparison</caption>
<thead>
<tr className="text-left">
<th scope="col">
<span className="sr-only">Perk</span>
</th>
{plans.map((plan) => (
<th key={plan.title} scope="col">
<span className="sr-only">{plan.title} plan</span>
</th>
))}
</tr>
</thead>
<tbody className="divide-y divide-gray-100">
{perks.map((perk) => (
<tr key={perk.title}>
<th scope="row" className="w-1/4 py-3 pr-4 text-left text-sm font-medium text-gray-600">
{perk.title}
</th>
{perk.tiers.map((tier, index) => (
<td
key={tier.title}
className={classNames(
index === perk.tiers.length - 1 ? 'pl-4' : 'px-4',
'relative w-1/4 py-0 text-center'
)}
>
<span className="relative w-full h-full py-3">
{tier.value === true ? (
<CheckIcon className="mx-auto h-5 w-5 text-blue-600" aria-hidden="true" />
) : (
<XIcon className="mx-auto h-5 w-5 text-gray-400" aria-hidden="true" />
)}
<span className="sr-only">{tier.value === true ? 'Yes' : 'No'}</span>
</span>
</td>
))}
</tr>
))}
</tbody>
</table>
{/* Fake card borders */}
<div className="absolute inset-0 flex items-stretch pointer-events-none" aria-hidden="true">
<div className="w-1/4 pr-4" />
<div className="w-1/4 px-4">
<div className="w-full h-full rounded-lg ring-1 ring-black ring-opacity-5" />
</div>
<div className="w-1/4 px-4">
<div className="w-full h-full rounded-lg ring-2 ring-blue-600 ring-opacity-100" />
</div>
<div className="w-1/4 pl-4">
<div className="w-full h-full rounded-lg ring-1 ring-black ring-opacity-5" />
</div>
</div>
</div>
</div>
</section>
</div>
{/* Logo cloud */}
<div className="max-w-2xl mx-auto py-12 px-4 sm:px-6 lg:max-w-7xl lg:py-32 lg:px-8">
<div className="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>
{/* FAQs */}
<section aria-labelledby="faq-heading" className="bg-gray-900">
<div className="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
<div className="max-w-2xl lg:mx-auto lg:text-center">
<h2 id="faq-heading" className="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
Frequently asked questions
</h2>
<p className="mt-4 text-gray-400">
Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla
nec. Urna, sed a lectus elementum blandit et.
</p>
</div>
<div className="mt-20">
<dl className="space-y-10 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:gap-y-10">
{faqs.map((faq) => (
<div key={faq.id}>
<dt className="font-semibold text-white">{faq.question}</dt>
<dd className="mt-3 text-gray-400">{faq.answer}</dd>
</div>
))}
</dl>
</div>
</div>
</section>
{/* Footer */}
<footer aria-labelledby="footer-heading">
<h2 id="footer-heading" className="sr-only">
Footer
</h2>
<div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<div className="xl:grid xl:grid-cols-3 xl:gap-8">
<div className="space-y-8 xl:col-span-1">
<img
className="h-10"
src="/images/loesen-logo.svg"
alt="Loesen SA"
/>
<p className="text-gray-500 text-base">
Making the world a better place through constructing elegant hierarchies.
</p>
<div className="flex space-x-6">
{footerNavigation.social.map((item) => (
<a key={item.name} href={item.href} className="text-gray-400 hover:text-gray-500">
<span className="sr-only">{item.name}</span>
<item.icon className="h-6 w-6" aria-hidden="true" />
</a>
))}
</div>
</div>
<div className="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-sm font-semibold tracking-wider uppercase text-gray-900">Solutions</h3>
<ul className="mt-4 space-y-4">
{footerNavigation.solutions.map((item) => (
<li key={item.name}>
<a href={item.href} className="text-base text-gray-500 hover:text-gray-900">
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold tracking-wider uppercase text-gray-900">Support</h3>
<ul className="mt-4 space-y-4">
{footerNavigation.support.map((item) => (
<li key={item.name}>
<a href={item.href} className="text-base text-gray-500 hover:text-gray-900">
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-sm font-semibold tracking-wider uppercase text-gray-900">Company</h3>
<ul className="mt-4 space-y-4">
{footerNavigation.company.map((item) => (
<li key={item.name}>
<a href={item.href} className="text-base text-gray-500 hover:text-gray-900">
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold tracking-wider uppercase text-gray-900">Legal</h3>
<ul className="mt-4 space-y-4">
{footerNavigation.legal.map((item) => (
<li key={item.name}>
<a href={item.href} className="text-base text-gray-500 hover:text-gray-900">
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
<div className="mt-12 border-t border-gray-200 pt-8">
<p className="text-base text-gray-400 xl:text-center">© 2021 Loesen, Inc. All rights reserved.</p>
</div>
</div>
</footer>
</main>
</div>
)
}
With Three Tiers And Testimonial
/*
This example requires Tailwind CSS v2.0+
This example requires some changes to your config:
// tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
// ...
theme: {
extend: {
colors: {
rose: colors.rose,
}
}
}
}
*/
import { Fragment } from "react";
import { Popover, Transition } from "@headlessui/react";
import {
BookmarkAltIcon,
CalendarIcon,
ChartBarIcon,
CheckIcon,
CursorClickIcon,
MenuIcon,
PhoneIcon,
PlayIcon,
RefreshIcon,
ShieldCheckIcon,
SupportIcon,
ViewGridIcon,
XIcon,
} from "@heroicons/react/outline";
import { ChevronDownIcon } from "@heroicons/react/solid";
const header = {
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,
},
],
callsToAction: [
{ name: "Watch Demo", href: "#", icon: PlayIcon },
{ name: "Contact Sales", href: "#", icon: PhoneIcon },
],
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,
},
],
recentPosts: [
{ name: "Boost your conversion rate", href: "#" },
{
name: "How to use search engine optimization to drive traffic to your site",
href: "#",
},
{ name: "Improve your customer experience", href: "#" },
],
};
const pricing = {
tiers: [
{
title: "Freelancer",
price: 24,
frequency: "/month",
description: "The essentials to provide your best work for clients.",
features: [
"5 products",
"Up to 1,000 subscribers",
"Basic analytics",
"48-hour support response time",
],
cta: "Monthly billing",
mostPopular: false,
},
{
title: "Startup",
price: 32,
frequency: "/month",
description: "A plan that scales with your rapidly growing business.",
features: [
"25 products",
"Up to 10,000 subscribers",
"Advanced analytics",
"24-hour support response time",
"Marketing automations",
],
cta: "Monthly billing",
mostPopular: true,
},
{
title: "Enterprise",
price: 48,
frequency: "/month",
description: "Dedicated support and infrastructure for your company.",
features: [
"Unlimited products",
"Unlimited subscribers",
"Advanced analytics",
"1-hour, dedicated support response time",
"Marketing automations",
"Custom integrations",
],
cta: "Monthly billing",
mostPopular: false,
},
],
};
const faqs = [
{
id: 1,
question: "What's the best thing about Switzerland?",
answer:
"I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
// More questions...
];
const footer = {
solutions: [
{ name: "Marketing", href: "#" },
{ name: "Analytics", href: "#" },
{ name: "Commerce", href: "#" },
{ name: "Insights", href: "#" },
],
support: [
{ name: "Pricing", href: "#" },
{ name: "Documentation", href: "#" },
{ name: "Guides", href: "#" },
{ name: "API Status", href: "#" },
],
company: [
{ name: "About", href: "#" },
{ name: "Blog", href: "#" },
{ name: "Jobs", href: "#" },
{ name: "Press", href: "#" },
{ name: "Partners", href: "#" },
],
legal: [
{ name: "Claim", href: "#" },
{ name: "Privacy", href: "#" },
{ name: "Terms", href: "#" },
],
social: [
{
name: "Facebook",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.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.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Instagram",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Twitter",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.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.072 4.072 0 012.8 9.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 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
),
},
{
name: "GitHub",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.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 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 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.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Dribbble",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
clipRule="evenodd"
/>
</svg>
),
},
],
};
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
export default function Example() {
return (
<div className="bg-white">
{/* Header and Page Header */}
<div className="relative">
{/* Header */}
<Popover as="header" className="relative z-10">
{({ open }) => (
<>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center border-b border-gray-200 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="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-rose-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-rose-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">
{header.solutions.map((solution) => (
<a
key={solution.name}
href={solution.href}
className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50"
>
<solution.icon
className="flex-shrink-0 h-6 w-6 text-rose-400"
aria-hidden="true"
/>
<div className="ml-4">
<p className="text-base font-medium text-gray-900">
{solution.name}
</p>
<p className="mt-1 text-sm text-gray-500">
{solution.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">
{header.callsToAction.map((cta) => (
<div key={cta.name} className="flow-root">
<a
href={cta.href}
className="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 hover:bg-gray-100"
>
<cta.icon
className="flex-shrink-0 h-6 w-6 text-gray-400"
aria-hidden="true"
/>
<span className="ml-3">{cta.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-rose-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">
{header.resources.map((resource) => (
<a
key={resource.name}
href={resource.href}
className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50"
>
<resource.icon
className="flex-shrink-0 h-6 w-6 text-rose-400"
aria-hidden="true"
/>
<div className="ml-4">
<p className="text-base font-medium text-gray-900">
{resource.name}
</p>
<p className="mt-1 text-sm text-gray-500">
{resource.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">
{header.recentPosts.map((post) => (
<li
key={post.name}
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-rose-600 hover:text-rose-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-rose-500 hover:bg-rose-600"
>
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-rose-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">
{header.solutions.map((solution) => (
<a
key={solution.name}
href={solution.href}
className="-m-3 p-3 flex items-center rounded-md hover:bg-gray-50"
>
<solution.icon
className="flex-shrink-0 h-6 w-6 text-rose-400"
aria-hidden="true"
/>
<span className="ml-3 text-base font-medium text-gray-900">
{solution.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>
{header.resources.map((resource) => (
<a
key={resource.name}
href={resource.href}
className="text-base font-medium text-gray-900 hover:text-gray-700"
>
{resource.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-rose-500 hover:bg-rose-600"
>
Sign up
</a>
<p className="mt-6 text-center text-base font-medium text-gray-500">
Existing customer?{" "}
<a
href="#"
className="text-rose-600 hover:text-rose-500"
>
Sign in
</a>
</p>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
{/* Page Header */}
<div className="relative max-w-2xl mx-auto py-24 px-4 sm:px-6 lg:max-w-7xl lg:py-32 lg:px-8">
<div className="relative">
<h1 className="text-3xl font-extrabold text-gray-900 sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
Pricing plans for teams of all sizes
</h1>
<p className="mt-6 max-w-2xl text-xl text-gray-500">
Choose an affordable plan that's packed with the best features for
engaging your audience, creating customer loyalty, and driving
sales.
</p>
</div>
</div>
</div>
<main>
{/* Pricing Section */}
<section className="relative" aria-labelledby="pricing-heading">
<h2 id="pricing-heading" className="sr-only">
Pricing
</h2>
{/* Tiers */}
<div className="max-w-2xl mx-auto px-4 space-y-12 sm:px-6 lg:max-w-7xl lg:space-y-0 lg:px-8 lg:grid lg:grid-cols-3 lg:gap-x-8">
{pricing.tiers.map((tier) => (
<div
key={tier.title}
className="relative p-8 bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col"
>
<div className="flex-1">
<h3 className="text-xl font-semibold text-gray-900">
{tier.title}
</h3>
{tier.mostPopular ? (
<p className="absolute top-0 py-1.5 px-4 bg-rose-500 rounded-full text-xs font-semibold uppercase tracking-wide text-white transform -translate-y-1/2">
Most popular
</p>
) : null}
<p className="mt-4 flex items-baseline text-gray-900">
<span className="text-5xl font-extrabold tracking-tight">
{tier.price}
</span>
<span className="ml-1 text-xl font-semibold">
{tier.frequency}
</span>
</p>
<p className="mt-6 text-gray-500">{tier.description}</p>
{/* Feature list */}
<ul role="list" className="mt-6 space-y-6">
{tier.features.map((feature) => (
<li key={feature} className="flex">
<CheckIcon
className="flex-shrink-0 w-6 h-6 text-rose-500"
aria-hidden="true"
/>
<span className="ml-3 text-gray-500">{feature}</span>
</li>
))}
</ul>
</div>
<a
href="#"
className={classNames(
tier.mostPopular
? "bg-rose-500 text-white hover:bg-rose-600"
: "bg-rose-50 text-rose-700 hover:bg-rose-100",
"mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium"
)}
>
{tier.cta}
</a>
</div>
))}
</div>
</section>
{/* Logo Cloud */}
<section
aria-labelledby="customer-heading"
className="max-w-2xl mx-auto py-24 px-4 sm:px-6 lg:max-w-7xl lg:py-32 lg:px-8"
>
<h2 id="customer-heading" className="sr-only">
Our customers
</h2>
<div className="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>
</section>
{/* Testimonial */}
<div className="relative">
{/* Decorative background */}
<div
aria-hidden="true"
className="absolute inset-x-0 h-1/2 bg-gradient-to-b from-white to-gray-50"
/>
<div className="relative max-w-2xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
<div className="relative py-24 px-8 bg-rose-500 rounded-xl shadow-2xl overflow-hidden lg:px-16 lg:grid lg:grid-cols-2 lg:gap-x-8">
<div className="absolute inset-0 opacity-50 filter saturate-0 mix-blend-multiply">
<img
src="https://images.unsplash.com/photo-1601381718415-a05fb0a261f3?ixid=MXwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8ODl8fHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1216&q=80"
alt=""
className="w-full h-full object-cover"
/>
</div>
<div className="relative lg:col-span-1">
<img
className="h-12 w-auto"
src="https://tailwindui.com/img/logos/workcation-logo-white.svg"
alt=""
/>
<blockquote className="mt-6 text-white">
<p className="text-xl font-medium sm:text-2xl">
Loesen has completely transformed how we interact with
customers. We've seen record bookings, higher customer
satisfaction, and reduced churn.
</p>
<footer className="mt-6">
<p className="flex flex-col font-medium">
<span>Marie Chilvers</span>
<span>CEO, Workcation</span>
</p>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
{/* FAQ */}
<section
aria-labelledby="faq-heading"
className="max-w-2xl mx-auto py-24 px-4 divide-y divide-gray-200 sm:px-6 lg:max-w-7xl lg:py-32 lg:px-8"
>
<h2
id="faq-heading"
className="text-3xl font-extrabold text-gray-900"
>
Frequently asked questions
</h2>
<div className="mt-8">
<dl className="divide-y divide-gray-200">
{faqs.map((faq) => (
<div
key={faq.id}
className="pt-6 pb-8 md:grid md:grid-cols-12 md:gap-8"
>
<dt className="text-base font-medium text-gray-900 md:col-span-5">
{faq.question}
</dt>
<dd className="mt-2 md:mt-0 md:col-span-7">
<p className="text-base text-gray-500">{faq.answer}</p>
</dd>
</div>
))}
</dl>
</div>
</section>
</main>
{/* Footer */}
<footer className="bg-gray-50" aria-labelledby="footer-heading">
<h2 id="footer-heading" className="sr-only">
Footer
</h2>
<div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<div className="xl:grid xl:grid-cols-3 xl:gap-8">
<div className="space-y-8 xl:col-span-1">
<img
className="h-10"
src="/images/loesen-logo.svg"
alt="Loesen SA"
/>
<p className="text-gray-500 text-base">
Making the world a better place through constructing elegant
hierarchies.
</p>
<div className="flex space-x-6">
{footer.social.map((link) => (
<a
key={link.name}
href={link.href}
className="text-gray-400 hover:text-gray-500"
>
<span className="sr-only">{link.name}</span>
<link.icon className="h-6 w-6" aria-hidden="true" />
</a>
))}
</div>
</div>
<div className="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Solutions
</h3>
<ul className="mt-4 space-y-4">
{footer.solutions.map((link) => (
<li key={link.name}>
<a
href={link.href}
className="text-base text-gray-500 hover:text-gray-900"
>
{link.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Support
</h3>
<ul className="mt-4 space-y-4">
{footer.support.map((link) => (
<li key={link.name}>
<a
href={link.href}
className="text-base text-gray-500 hover:text-gray-900"
>
{link.name}
</a>
</li>
))}
</ul>
</div>
</div>
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Company
</h3>
<ul className="mt-4 space-y-4">
{footer.company.map((link) => (
<li key={link.name}>
<a
href={link.href}
className="text-base text-gray-500 hover:text-gray-900"
>
{link.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Legal
</h3>
<ul className="mt-4 space-y-4">
{footer.legal.map((link) => (
<li key={link.name}>
<a
href={link.href}
className="text-base text-gray-500 hover:text-gray-900"
>
{link.name}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
<div className="mt-12 border-t border-gray-200 pt-8">
<p className="text-base text-gray-400 xl:text-center">
© 2020 Loesen, Inc. All rights reserved.
</p>
</div>
</div>
</footer>
</div>
);
}
With Feature List
/* This example requires Tailwind CSS v2.0+ */
import { Fragment } from "react";
import { Popover, Transition } from "@headlessui/react";
import {
BookmarkAltIcon,
CalendarIcon,
ChartBarIcon,
CheckIcon,
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: "#" },
];
const features = [
"Vitae in pulvinar odio id utobortis in inter.",
"Sed sed id viverra viverra augue eget massa.",
"Urna, gravida amet, a, integer venenatis.",
"Lobortis sed pharetra amet vitae eleifend.",
"Ullamcorper blandit a consequat donec elit aoreet.",
"Dolor quo assumenda.",
"Esse rerum distinctio maiores maiores.",
"Eos enim officiis ratione.",
"Tempore molestiae aliquid excepturi.",
"Perspiciatis eveniet inventore eum et aliquam.",
];
const faqs = [
{
id: 1,
question: "What's the best thing about Switzerland?",
answer:
"I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 2,
question: "Why do you never see elephants hiding in trees?",
answer:
"Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 3,
question: "How do you make holy water?",
answer:
"You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 4,
question: "Why can't you hear a pterodactyl go to the bathroom?",
answer:
"Because the pee is silent. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 5,
question: "What do you call someone with no body and no nose?",
answer:
"Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 6,
question: "Why did the invisible man turn down the job offer?",
answer:
"He couldn't see himself doing it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
];
const footerNavigation = {
main: [
{ name: "About", href: "#" },
{ name: "Blog", href: "#" },
{ name: "Jobs", href: "#" },
{ name: "Press", href: "#" },
{ name: "Accessibility", href: "#" },
{ name: "Partners", href: "#" },
],
social: [
{
name: "Facebook",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.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.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Instagram",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Twitter",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.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.072 4.072 0 012.8 9.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 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
),
},
{
name: "GitHub",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.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 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 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.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Dribbble",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
clipRule="evenodd"
/>
</svg>
),
},
],
};
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
export default function Example() {
return (
<div className="bg-white">
<Popover className="relative">
{({ 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="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 -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">
{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 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 space-x-8 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="whitespace-nowrap bg-blue-100 border border-transparent rounded-md py-2 px-4 inline-flex items-center justify-center text-base font-medium text-blue-700 hover:bg-blue-200"
>
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>
<a
href="#"
className="text-base font-medium text-gray-900 hover:text-gray-700"
>
Blog
</a>
<a
href="#"
className="text-base font-medium text-gray-900 hover:text-gray-700"
>
Contact Sales
</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>
<div className="bg-gradient-to-b from-blue-50 via-white to-white">
{/* Pricing section with single price and feature list */}
<div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
<div className="pb-16 xl:flex xl:items-center xl:justify-between">
<div>
<h1 className="text-4xl font-extrabold sm:text-5xl sm:tracking-tight">
<span className="text-gray-900">Everything you need for </span>
<span className="text-blue-600">$99 a month</span>
</h1>
<p className="mt-5 text-xl text-gray-500">
Includes every feature we offer plus unlimited projects and
unlimited users.
</p>
</div>
<a
href="#"
className="mt-8 w-full bg-blue-600 border border-transparent rounded-md py-3 px-5 inline-flex items-center justify-center text-base font-medium text-white hover:bg-blue-700 sm:mt-10 sm:w-auto xl:mt-0"
>
Get started today
</a>
</div>
<div className="border-t border-gray-200 pt-16 xl:grid xl:grid-cols-3 xl:gap-x-8">
<div>
<h2 className="text-base font-semibold text-blue-600 uppercase tracking-wide">
Everything you need
</h2>
<p className="mt-2 text-3xl font-extrabold text-gray-900">
All-in-one platform
</p>
<p className="mt-4 text-lg text-gray-500">
Ac euismod vel sit maecenas id pellentesque eu sed consectetur.
Malesuada adipiscing sagittis vel nulla nec. Urna, sed a lectus
elementum blandit et.
</p>
</div>
<div className="mt-4 sm:mt-8 md:mt-10 md:grid md:grid-cols-2 md:gap-x-8 xl:mt-0 xl:col-span-2">
<ul className="divide-y divide-gray-200">
{features.slice(0, 5).map((feature, featureIdx) => (
<li
key={feature}
className={classNames(
featureIdx === 0 ? "md:py-0 md:pb-4" : "",
"py-4 flex"
)}
>
<CheckIcon
className="flex-shrink-0 h-6 w-6 text-green-500"
aria-hidden="true"
/>
<span className="ml-3 text-base text-gray-500">
{feature}
</span>
</li>
))}
</ul>
<ul className="border-t border-gray-200 divide-y divide-gray-200 md:border-t-0">
{features.slice(5).map((feature, featureIdx) => (
<li
key={feature}
className={classNames(
featureIdx === 0 ? "md:border-t-0 md:py-0 md:pb-4" : "",
"py-4 flex"
)}
>
<CheckIcon
className="flex-shrink-0 h-6 w-6 text-green-500"
aria-hidden="true"
/>
<span className="ml-3 text-base text-gray-500">
{feature}
</span>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
{/* Branded FAQ */}
<div className="bg-blue-900">
<div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
<h2 className="text-3xl font-extrabold text-white">
Frequently asked questions
</h2>
<div className="mt-6 border-t border-blue-400 border-opacity-25 pt-10">
<dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-x-8 md:gap-y-12">
{faqs.map((item) => (
<div key={item.id}>
<dt className="text-lg leading-6 font-medium text-white">
{item.question}
</dt>
<dd className="mt-2 text-base text-blue-200">
{item.answer}
</dd>
</div>
))}
</dl>
</div>
</div>
</div>
{/* CTA section */}
<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-blue-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:flex-shrink-0 lg:mt-0">
<div className="inline-flex rounded-md shadow">
<a
href="#"
className="bg-blue-600 border border-transparent rounded-md py-3 px-5 inline-flex items-center justify-center text-base font-medium text-white hover:bg-blue-700"
>
Get started
</a>
</div>
</div>
</div>
</div>
{/* Simple footer */}
<footer className="max-w-7xl mx-auto py-16 px-4 overflow-hidden sm:px-6 lg:px-8">
<nav className="-mx-5 -my-2 flex flex-wrap justify-center">
{footerNavigation.main.map((item) => (
<div key={item.name} className="py-2 px-5">
<a
href={item.href}
className="text-base text-gray-500 hover:text-gray-900"
>
{item.name}
</a>
</div>
))}
</nav>
<div className="mt-8 flex justify-center space-x-6">
{footerNavigation.social.map((item) => (
<a
key={item.name}
href={item.href}
className="text-gray-400 hover:text-gray-500"
>
<span className="sr-only">{item.name}</span>
<item.icon className="h-6 w-6" aria-hidden="true" />
</a>
))}
</div>
<p className="mt-8 text-center text-base text-gray-500">
© 2020 Loesen, Inc. All rights reserved.
</p>
</footer>
</div>
);
}
With Comparison Table
/*
This example requires Tailwind CSS v2.0+
This example requires some changes to your config:
// tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
// ...
theme: {
extend: {
colors: {
orange: colors.orange,
}
}
},
plugins: [
// ...
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
]
}
*/
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 { CheckIcon, ChevronDownIcon, MinusIcon } 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: "#" },
];
const tiers = [
{
name: "Basic",
href: "#",
priceMonthly: 9,
description: "Quis suspendisse ut fermentum neque vivamus non tellus.",
},
{
name: "Essential",
href: "#",
priceMonthly: 29,
description: "Quis eleifend a tincidunt pellentesque. A tempor in sed.",
},
{
name: "Premium",
href: "#",
priceMonthly: 59,
description:
"Orci volutpat ut sed sed neque, dui eget. Quis tristique non.",
},
];
const sections = [
{
name: "Features",
features: [
{
name: "Molestie lobortis massa.",
tiers: { Basic: true, Essential: true, Premium: true },
},
{
name: "Urna purus felis.",
tiers: { Basic: true, Essential: true, Premium: true },
},
{
name: "Tellus pulvinar sit dictum.",
tiers: { Essential: true, Premium: true },
},
{
name: "Convallis.",
tiers: { Essential: "Up to 20 users", Premium: "Up to 50 users" },
},
],
},
{
name: "Reporting",
features: [
{
name: "Adipiscing.",
tiers: { Basic: true, Essential: true, Premium: true },
},
{
name: "Eget risus integer.",
tiers: { Essential: true, Premium: true },
},
{ name: "Gravida leo urna velit.", tiers: { Premium: true } },
{
name: "Elementum ut dapibus mi feugiat cras nisl.",
tiers: { Premium: true },
},
],
},
{
name: "Support",
features: [
{
name: "Sit dignissim.",
tiers: { Basic: true, Essential: true, Premium: true },
},
{ name: "Congue at nibh et.", tiers: { Essential: true, Premium: true } },
{
name: "Volutpat feugiat mattis.",
tiers: { Essential: true, Premium: true },
},
{
name: "Tristique pellentesque ornare diam sapien.",
tiers: { Premium: true },
},
],
},
];
const faqs = [
{
id: 1,
question: "What's the best thing about Switzerland?",
answer:
"I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 2,
question: "How do you make holy water?",
answer:
"You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 3,
question: "Why do you never see elephants hiding in trees?",
answer:
"Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 4,
question: "What do you call someone with no body and no nose?",
answer:
"Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 5,
question: "Why can't you hear a pterodactyl go to the bathroom?",
answer:
"Because the pee is silent. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 6,
question: "Why did the invisible man turn down the job offer?",
answer:
"He couldn't see himself doing it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
];
const footerNavigation = {
solutions: [
{ name: "Marketing", href: "#" },
{ name: "Analytics", href: "#" },
{ name: "Commerce", href: "#" },
{ name: "Insights", href: "#" },
],
support: [
{ name: "Pricing", href: "#" },
{ name: "Documentation", href: "#" },
{ name: "Guides", href: "#" },
{ name: "API Status", href: "#" },
],
company: [
{ name: "About", href: "#" },
{ name: "Blog", href: "#" },
{ name: "Jobs", href: "#" },
{ name: "Press", href: "#" },
{ name: "Partners", href: "#" },
],
legal: [
{ name: "Claim", href: "#" },
{ name: "Privacy", href: "#" },
{ name: "Terms", href: "#" },
],
social: [
{
name: "Facebook",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.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.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Instagram",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Twitter",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.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.072 4.072 0 012.8 9.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 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
),
},
{
name: "GitHub",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.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 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 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.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Dribbble",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
clipRule="evenodd"
/>
</svg>
),
},
],
};
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
export default function Example() {
return (
<div className="bg-white">
<div className="bg-blue-900">
{/* Header */}
<Popover className="relative">
{({ open }) => (
<>
<div className="max-w-7xl mx-auto px-4 sm:px-6">
<div className="flex justify-between items-center border-b border-blue-400 border-opacity-25 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-blue-900 rounded-md p-2 inline-flex items-center justify-center text-blue-300 hover:text-white hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
<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-white" : "text-blue-300",
"group bg-blue-900 rounded-md inline-flex items-center text-base font-medium hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-white"
)}
>
<span>Solutions</span>
<ChevronDownIcon
className={classNames(
open ? "text-white" : "text-blue-300",
"ml-2 h-5 w-5 group-hover:text-white"
)}
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 px-2 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 bg-white py-6 px-5 grid gap-6 sm:gap-8 sm:p-8">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 rounded-lg p-3 flex items-start 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 rounded-md p-3 flex items-center 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-blue-300 hover:text-white"
>
Pricing
</a>
<a
href="#"
className="text-base font-medium text-blue-300 hover:text-white"
>
Docs
</a>
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={classNames(
open ? "text-white" : "text-blue-300",
"group bg-blue-900 rounded-md inline-flex items-center text-base font-medium hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-900 focus:ring-white"
)}
>
<span>More</span>
<ChevronDownIcon
className={classNames(
open ? "text-white" : "text-blue-300",
"ml-2 h-5 w-5 group-hover:text-white"
)}
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 bg-white py-6 px-5 grid gap-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 space-x-8 md:flex-1 lg:w-0">
<a
href="#"
className="whitespace-nowrap text-base font-medium text-blue-300 hover:text-white"
>
Sign in
</a>
<a
href="#"
className="whitespace-nowrap bg-white border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex items-center justify-center text-base font-medium text-blue-600 hover:bg-blue-50"
>
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 z-10 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden"
>
<div className="rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y-2 divide-gray-50">
<div className="pt-5 pb-6 px-5 space-y-6">
<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>
<a
href="#"
className="text-base font-medium text-gray-900 hover:text-gray-700"
>
Blog
</a>
<a
href="#"
className="text-base font-medium text-gray-900 hover:text-gray-700"
>
Contact Sales
</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>
{/* Header section with select menu */}
<div className="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 lg:max-w-7xl">
<div className="px-0 sm:px-4 lg:px-0 lg:flex lg:justify-between lg:items-center">
<div className="max-w-xl">
<h2 className="text-4xl font-extrabold text-white sm:text-5xl sm:tracking-tight lg:text-6xl">
Pricing Plans
</h2>
<p className="mt-5 text-xl text-blue-300">
Start building for free, then add a site plan to go live.
Account plans unlock additional features.
</p>
</div>
<div className="mt-10 w-full max-w-xs lg:mt-0">
<label
htmlFor="currency"
className="block text-base font-medium text-blue-300"
>
Currency
</label>
<div className="mt-1.5 relative">
<select
id="currency"
name="currency"
className="block w-full bg-none bg-blue-400 bg-opacity-25 border border-transparent text-white focus:ring-white focus:border-white rounded-md"
defaultValue="United States (USD)"
>
<option className="bg-gray-900">Argentina (ARS)</option>
<option className="bg-gray-900">Australia (AUD)</option>
<option className="bg-gray-900">United States (USD)</option>
<option className="bg-gray-900">Canada (CAD)</option>
<option className="bg-gray-900">France (EUR)</option>
<option className="bg-gray-900">Japan (JPY)</option>
<option className="bg-gray-900">Nigeria (NGN)</option>
<option className="bg-gray-900">Switzerland (CHF)</option>
<option className="bg-gray-900">United Kingdom (GBP)</option>
</select>
<div className="pointer-events-none absolute inset-y-0 right-0 px-2 flex items-center">
<ChevronDownIcon
className="h-4 w-4 text-blue-300"
aria-hidden="true"
/>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Comparison table */}
<div className="max-w-2xl mx-auto bg-white py-16 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
{/* xs to lg */}
<div className="space-y-24 lg:hidden">
{tiers.map((tier) => (
<section key={tier.name}>
<div className="px-4 mb-8">
<h2 className="text-lg leading-6 font-medium text-gray-900">
{tier.name}
</h2>
<p className="mt-4">
<span className="text-4xl font-extrabold text-gray-900">
{tier.priceMonthly}
</span>
<span className="text-base font-medium text-gray-500">
/mo
</span>
</p>
<p className="mt-4 text-sm text-gray-500">{tier.description}</p>
<a
href={tier.href}
className="mt-6 block w-full bg-gradient-to-r from-orange-500 to-pink-500 border border-transparent rounded-md shadow py-2 text-sm font-semibold text-white text-center hover:to-pink-600"
>
Buy {tier.name}
</a>
</div>
{sections.map((section) => (
<table key={section.name} className="w-full">
<caption className="bg-gray-50 border-t border-gray-200 py-3 px-4 text-sm font-medium text-gray-900 text-left">
{section.name}
</caption>
<thead>
<tr>
<th className="sr-only" scope="col">
Feature
</th>
<th className="sr-only" scope="col">
Included
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
{section.features.map((feature) => (
<tr
key={feature.name}
className="border-t border-gray-200"
>
<th
className="py-5 px-4 text-sm font-normal text-gray-500 text-left"
scope="row"
>
{feature.name}
</th>
<td className="py-5 pr-4">
{typeof feature.tiers[tier.name] === "string" ? (
<span className="block text-sm text-gray-700 text-right">
{feature.tiers[tier.name]}
</span>
) : (
<>
{feature.tiers[tier.name] === true ? (
<CheckIcon
className="ml-auto h-5 w-5 text-green-500"
aria-hidden="true"
/>
) : (
<MinusIcon
className="ml-auto h-5 w-5 text-gray-400"
aria-hidden="true"
/>
)}
<span className="sr-only">
{feature.tiers[tier.name] === true
? "Yes"
: "No"}
</span>
</>
)}
</td>
</tr>
))}
</tbody>
</table>
))}
<div className="border-t border-gray-200 px-4 pt-5">
<a
href="#"
className="block w-full bg-gradient-to-r from-orange-500 to-pink-500 border border-transparent rounded-md shadow py-2 text-sm font-semibold text-white text-center hover:to-pink-600"
>
Buy {tier.name}
</a>
</div>
</section>
))}
</div>
{/* lg+ */}
<div className="hidden lg:block">
<table className="w-full h-px table-fixed">
<caption className="sr-only">Pricing plan comparison</caption>
<thead>
<tr>
<th
className="pb-4 pl-6 pr-6 text-sm font-medium text-gray-900 text-left"
scope="col"
>
<span className="sr-only">Feature by</span>
<span>Plans</span>
</th>
{tiers.map((tier) => (
<th
key={tier.name}
className="w-1/4 pb-4 px-6 text-lg leading-6 font-medium text-gray-900 text-left"
scope="col"
>
{tier.name}
</th>
))}
</tr>
</thead>
<tbody className="border-t border-gray-200 divide-y divide-gray-200">
<tr>
<th
className="py-8 pl-6 pr-6 align-top text-sm font-medium text-gray-900 text-left"
scope="row"
>
Pricing
</th>
{tiers.map((tier) => (
<td key={tier.name} className="h-full py-8 px-6 align-top">
<div className="h-full flex flex-col justify-between">
<div>
<p>
<span className="text-4xl font-extrabold text-gray-900">
{tier.priceMonthly}
</span>
<span className="text-base font-medium text-gray-500">
/mo
</span>
</p>
<p className="mt-4 text-sm text-gray-500">
{tier.description}
</p>
</div>
<a
href={tier.href}
className="mt-6 block w-full bg-gradient-to-r from-orange-500 to-pink-500 border border-transparent rounded-md shadow py-2 text-sm font-semibold text-white text-center hover:to-pink-600"
>
Buy {tier.name}
</a>
</div>
</td>
))}
</tr>
{sections.map((section) => (
<Fragment key={section.name}>
<tr>
<th
className="py-3 pl-6 bg-gray-50 text-sm font-medium text-gray-900 text-left"
colSpan={4}
scope="colgroup"
>
{section.name}
</th>
</tr>
{section.features.map((feature) => (
<tr key={feature.name}>
<th
className="py-5 pl-6 pr-6 text-sm font-normal text-gray-500 text-left"
scope="row"
>
{feature.name}
</th>
{tiers.map((tier) => (
<td key={tier.name} className="py-5 px-6">
{typeof feature.tiers[tier.name] === "string" ? (
<span className="block text-sm text-gray-700">
{feature.tiers[tier.name]}
</span>
) : (
<>
{feature.tiers[tier.name] === true ? (
<CheckIcon
className="h-5 w-5 text-green-500"
aria-hidden="true"
/>
) : (
<MinusIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
)}
<span className="sr-only">
{feature.tiers[tier.name] === true
? "Included"
: "Not included"}{" "}
in {tier.name}
</span>
</>
)}
</td>
))}
</tr>
))}
</Fragment>
))}
</tbody>
<tfoot>
<tr className="border-t border-gray-200">
<th className="sr-only" scope="row">
Choose your plan
</th>
{tiers.map((tier) => (
<td key={tier.name} className="pt-5 px-6">
<a
href="#"
className="block w-full bg-gradient-to-r from-orange-500 to-pink-500 border border-transparent rounded-md shadow py-2 text-sm font-semibold text-white text-center hover:to-pink-600"
>
Buy {tier.name}
</a>
</td>
))}
</tr>
</tfoot>
</table>
</div>
</div>
{/* Logo cloud */}
<div className="max-w-7xl mx-auto border-t border-gray-200 py-12 px-4 sm:px-6 lg:py-20 lg:px-8">
<div className="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 className="bg-gray-50">
{/* FAQ */}
<div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
<h2 className="text-3xl font-extrabold text-gray-900 text-center">
Frequently asked questions
</h2>
<div className="mt-12">
<dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-x-8 md:gap-y-12 lg:grid-cols-3">
{faqs.map((faq) => (
<div key={faq.id} className="space-y-2">
<dt className="text-lg leading-6 font-medium text-gray-900">
{faq.question}
</dt>
<dd className="text-base text-gray-500">{faq.answer}</dd>
</div>
))}
</dl>
</div>
</div>
</div>
{/* Feature section with brand panel */}
<div className="relative">
<div className="absolute inset-0 flex flex-col" aria-hidden="true">
<div className="flex-1 bg-gray-50" />
<div className="flex-1" />
</div>
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="bg-gradient-to-r from-orange-400 to-pink-500 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 text-red-900">
Start your free trial today.
</span>
</h2>
<p className="mt-4 text-lg leading-6 text-orange-50">
Ac euismod vel sit maecenas id pellentesque eu sed
consectetur. Malesuada adipiscing sagittis vel nulla nec.
</p>
<a
href="#"
className="mt-8 bg-orange-100 border border-transparent rounded-md shadow py-3 px-6 inline-flex items-center text-base font-medium text-red-600 hover:text-red-500"
>
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>
{/* Footer */}
<footer className="mt-12 max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<h2 className="sr-only">Footer</h2>
<div className="xl:grid xl:grid-cols-3 xl:gap-8">
<div className="grid grid-cols-2 gap-8 xl:col-span-2">
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h4 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Solutions
</h4>
<ul className="mt-4 space-y-4">
{footerNavigation.solutions.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-base text-gray-500 hover:text-gray-900"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h4 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Support
</h4>
<ul className="mt-4 space-y-4">
{footerNavigation.support.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-base text-gray-500 hover:text-gray-900"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h4 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Company
</h4>
<ul className="mt-4 space-y-4">
{footerNavigation.company.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-base text-gray-500 hover:text-gray-900"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h4 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Legal
</h4>
<ul className="mt-4 space-y-4">
{footerNavigation.legal.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-base text-gray-500 hover:text-gray-900"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
<div className="mt-8 xl:mt-0">
<h4 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Subscribe to our newsletter
</h4>
<p className="mt-4 text-gray-500 text-base">
The latest news, articles, and resources, sent to your inbox
weekly.
</p>
<form className="mt-4 sm:flex sm:max-w-md">
<label htmlFor="email-address" className="sr-only">
Email address
</label>
<input
type="email"
name="email-address"
id="email-address"
autoComplete="email"
required
className="min-w-0 w-full bg-white shadow-sm py-2 px-4 placeholder-gray-500 focus:outline-none focus:ring-orange-500 focus:border-orange-500 border-gray-300 rounded-md"
placeholder="Enter your email"
/>
<div className="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0">
<button
type="submit"
className="w-full bg-orange-100 border border-transparent rounded-md py-2 px-4 flex items-center justify-center text-base font-medium text-red-600 hover:bg-orange-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500"
>
Subscribe
</button>
</div>
</form>
</div>
</div>
<div className="mt-8 border-t border-gray-200 pt-8 md:flex md:items-center md:justify-between">
<div className="flex space-x-6 md:order-2">
{footerNavigation.social.map((item) => (
<a
key={item.name}
href={item.href}
className="text-gray-400 hover:text-gray-500"
>
<span className="sr-only">{item.name}</span>
<item.icon className="h-6 w-6" aria-hidden="true" />
</a>
))}
</div>
<p className="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
© 2020 Loesen, Inc. All rights reserved.
</p>
</div>
</footer>
</div>
);
}