CTA
Side By Side On Brand
/* This example requires Tailwind CSS v2.0+ */
export default function Example() {
return (
<section className='bg-blue-800'>
<div className='max-w-7xl mx-auto md:grid md:grid-cols-2 md:px-6 lg:px-8'>
<div className='py-12 px-4 sm:px-6 md:flex md:flex-col md:py-16 md:pl-0 md:pr-10 md:border-r md:border-blue-900 lg:pr-16'>
<div className='md:flex-shrink-0'>
<img
className='h-12'
src='https://tailwindui.com/img/logos/tuple-logo-indigo-300.svg'
alt='Tuple'
/>
</div>
<blockquote className='mt-6 md:flex-grow md:flex md:flex-col'>
<div className='relative text-lg font-medium text-white md:flex-grow'>
<svg
className='absolute top-0 left-0 transform -translate-x-3 -translate-y-2 h-8 w-8 text-blue-600'
fill='currentColor'
viewBox='0 0 32 32'
aria-hidden='true'
>
<path d='M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z' />
</svg>
<p className='relative'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita voluptas
culpa sapiente alias molestiae. Numquam corrupti in laborum sed rerum et corporis.
</p>
</div>
<footer className='mt-8'>
<div className='flex items-start'>
<div className='flex-shrink-0 inline-flex rounded-full border-2 border-white'>
<img
className='h-12 w-12 rounded-full'
src='https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'
alt=''
/>
</div>
<div className='ml-4'>
<div className='text-base font-medium text-white'>Judith Black</div>
<div className='text-base font-medium text-blue-200'>CEO, Tuple</div>
</div>
</div>
</footer>
</blockquote>
</div>
<div className='py-12 px-4 border-t-2 border-blue-900 sm:px-6 md:py-16 md:pr-0 md:pl-10 md:border-t-0 md:border-l lg:pl-16'>
<div className='md:flex-shrink-0'>
<img
className='h-12'
src='https://tailwindui.com/img/logos/workcation-logo-indigo-300.svg'
alt='Workcation'
/>
</div>
<blockquote className='mt-6 md:flex-grow md:flex md:flex-col'>
<div className='relative text-lg font-medium text-white md:flex-grow'>
<svg
className='absolute top-0 left-0 transform -translate-x-3 -translate-y-2 h-8 w-8 text-blue-600'
fill='currentColor'
viewBox='0 0 32 32'
>
<path d='M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z' />
</svg>
<p className='relative'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita voluptas
culpa sapiente alias molestiae. Numquam corrupti in laborum sed rerum et corporis.
Nemo expedita voluptas culpa sapiente alias molestiae.
</p>
</div>
<footer className='mt-8'>
<div className='flex items-start'>
<div className='flex-shrink-0 inline-flex rounded-full border-2 border-white'>
<img
className='h-12 w-12 rounded-full'
src='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'
alt=''
/>
</div>
<div className='ml-4'>
<div className='text-base font-medium text-white'>Joseph Rodriguez</div>
<div className='text-base font-medium text-blue-200'>CEO, Workcation</div>
</div>
</div>
</footer>
</blockquote>
</div>
</div>
</section>
);
}
Simple Centered
/* This example requires Tailwind CSS v2.0+ */
import { Fragment } from "react";
import { Popover, Transition } from "@headlessui/react";
import { MenuIcon, XIcon } from "@heroicons/react/outline";
const navigation = [
{ name: "Product", href: "#" },
{ name: "Features", href: "#" },
{ name: "Marketplace", href: "#" },
{ name: "Company", href: "#" },
];
export default function Example() {
return (
<div className="relative bg-gray-50 overflow-hidden">
<div
className="hidden sm:block sm:absolute sm:inset-y-0 sm:h-full sm:w-full"
aria-hidden="true"
>
<div className="relative h-full max-w-7xl mx-auto">
<svg
className="absolute right-full transform translate-y-1/4 translate-x-1/4 lg:translate-x-1/2"
width={404}
height={784}
fill="none"
viewBox="0 0 404 784"
>
<defs>
<pattern
id="f210dbf6-a58d-4871-961e-36d5016a0f49"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-gray-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
width={404}
height={784}
fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)"
/>
</svg>
<svg
className="absolute left-full transform -translate-y-3/4 -translate-x-1/4 md:-translate-y-1/2 lg:-translate-x-1/2"
width={404}
height={784}
fill="none"
viewBox="0 0 404 784"
>
<defs>
<pattern
id="5d0dd344-b041-4d26-bec4-8d33ea57ec9b"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-gray-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
width={404}
height={784}
fill="url(#5d0dd344-b041-4d26-bec4-8d33ea57ec9b)"
/>
</svg>
</div>
</div>
<div className="relative pt-6 pb-16 sm:pb-24">
<Popover>
{({ open }) => (
<>
<div className="max-w-7xl mx-auto px-4 sm:px-6">
<nav
className="relative flex items-center justify-between sm:h-10 md:justify-center"
aria-label="Global"
>
<div className="flex items-center flex-1 md:absolute md:inset-y-0 md:left-0">
<div className="flex items-center justify-between w-full md:w-auto">
<a href="#">
<span className="sr-only">Loesen</span>
<img
className="h-8 w-auto sm:h-10"
src="/images/loesen-logo.svg"
alt=""
/>
</a>
<div className="-mr-2 flex items-center md:hidden">
<Popover.Button className="bg-gray-50 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-red-500">
<span className="sr-only">Open main menu</span>
<MenuIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
</div>
<div className="hidden md:flex md:space-x-10">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className="font-medium text-gray-500 hover:text-gray-900"
>
{item.name}
</a>
))}
</div>
<div className="hidden md:absolute md:flex md:items-center md:justify-end md:inset-y-0 md:right-0">
<span className="inline-flex rounded-md shadow">
<a
href="#"
className="inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50"
>
Log in
</a>
</span>
</div>
</nav>
</div>
<Transition
show={open}
as={Fragment}
enter="duration-150 ease-out"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="duration-100 ease-in"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Popover.Panel
focus
static
className="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden"
>
<div className="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="px-5 pt-4 flex items-center justify-between">
<div>
<img
className="h-8 w-auto"
src="/images/loesen-logo.svg"
alt=""
/>
</div>
<div className="-mr-2">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-red-500">
<span className="sr-only">Close menu</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
<div className="px-2 pt-2 pb-3">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
>
{item.name}
</a>
))}
</div>
<a
href="#"
className="block w-full px-5 py-3 text-center font-medium text-blue-600 bg-gray-50 hover:bg-gray-100"
>
Log in
</a>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<main className="mt-16 mx-auto max-w-7xl px-4 sm:mt-24">
<div className="text-center">
<h1 className="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
<span className="block xl:inline">Data to enrich your</span>{" "}
<span className="block text-blue-600 xl:inline">
online business
</span>
</h1>
<p className="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui
lorem cupidatat commodo. Elit sunt amet fugiat veniam ocasdcaecat
fugiat aliqua.
</p>
<div className="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
<div className="rounded-md shadow">
<a
href="#"
className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10"
>
Get started
</a>
</div>
<div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
<a
href="#"
className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"
>
Live demo
</a>
</div>
</div>
</div>
</main>
</div>
</div>
);
}
With Background Image
/* This example requires Tailwind CSS v2.0+ */
export default function Example() {
return (
<div className='bg-white py-16 lg:py-24'>
<div className='relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'>
<div className='relative py-24 px-8 bg-blue-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>
);
}
With Large Avatar
/* This example requires Tailwind CSS v2.0+ */
export default function Example() {
return (
<section className='bg-white overflow-hidden'>
<div className='relative max-w-7xl mx-auto pt-20 pb-12 px-4 sm:px-6 lg:px-8 lg:py-20'>
<svg
className='absolute top-full left-0 transform translate-x-80 -translate-y-24 lg:hidden'
width={784}
height={404}
fill='none'
viewBox='0 0 784 404'
aria-hidden='true'
>
<defs>
<pattern
id='e56e3f81-d9c1-4b83-a3ba-0d0ac8c32f32'
x={0}
y={0}
width={20}
height={20}
patternUnits='userSpaceOnUse'
>
<rect
x={0}
y={0}
width={4}
height={4}
className='text-gray-200'
fill='currentColor'
/>
</pattern>
</defs>
<rect width={784} height={404} fill='url(#e56e3f81-d9c1-4b83-a3ba-0d0ac8c32f32)' />
</svg>
<svg
className='hidden lg:block absolute right-full top-1/2 transform translate-x-1/2 -translate-y-1/2'
width={404}
height={784}
fill='none'
viewBox='0 0 404 784'
aria-hidden='true'
>
<defs>
<pattern
id='56409614-3d62-4985-9a10-7ca758a8f4f0'
x={0}
y={0}
width={20}
height={20}
patternUnits='userSpaceOnUse'
>
<rect
x={0}
y={0}
width={4}
height={4}
className='text-gray-200'
fill='currentColor'
/>
</pattern>
</defs>
<rect width={404} height={784} fill='url(#56409614-3d62-4985-9a10-7ca758a8f4f0)' />
</svg>
<div className='relative lg:flex lg:items-center'>
<div className='hidden lg:block lg:flex-shrink-0'>
<img
className='h-64 w-64 rounded-full xl:h-80 xl:w-80'
src='https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'
alt=''
/>
</div>
<div className='relative lg:ml-10'>
<svg
className='absolute top-0 left-0 transform -translate-x-8 -translate-y-24 h-36 w-36 text-blue-200 opacity-50'
stroke='currentColor'
fill='none'
viewBox='0 0 144 144'
aria-hidden='true'
>
<path
strokeWidth={2}
d='M41.485 15C17.753 31.753 1 59.208 1 89.455c0 24.664 14.891 39.09 32.109 39.09 16.287 0 28.386-13.03 28.386-28.387 0-15.356-10.703-26.524-24.663-26.524-2.792 0-6.515.465-7.446.93 2.327-15.821 17.218-34.435 32.11-43.742L41.485 15zm80.04 0c-23.268 16.753-40.02 44.208-40.02 74.455 0 24.664 14.891 39.09 32.109 39.09 15.822 0 28.386-13.03 28.386-28.387 0-15.356-11.168-26.524-25.129-26.524-2.792 0-6.049.465-6.98.93 2.327-15.821 16.753-34.435 31.644-43.742L121.525 15z'
/>
</svg>
<blockquote className='relative'>
<div className='text-2xl leading-9 font-medium text-gray-900'>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita voluptas
culpa sapiente alias molestiae. Numquam corrupti in laborum sed rerum et corporis.
</p>
</div>
<footer className='mt-8'>
<div className='flex'>
<div className='flex-shrink-0 lg:hidden'>
<img
className='h-12 w-12 rounded-full'
src='https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'
alt=''
/>
</div>
<div className='ml-4 lg:ml-0'>
<div className='text-base font-medium text-gray-900'>Judith Black</div>
<div className='text-base font-medium text-blue-600'>CEO, Tuple</div>
</div>
</div>
</footer>
</blockquote>
</div>
</div>
</div>
</section>
);
}
With Overlapping Image
/*
This example requires Tailwind CSS v2.0+
This example requires some changes to your config:
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/aspect-ratio'),
]
}
*/
export default function Example() {
return (
<div className="bg-white pt-16 lg:py-24">
<div className="pb-16 bg-blue-600 lg:pb-0 lg:z-10 lg:relative">
<div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-3 lg:gap-8">
<div className="relative lg:-my-8">
<div
aria-hidden="true"
className="absolute inset-x-0 top-0 h-1/2 bg-white lg:hidden"
/>
<div className="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:p-0 lg:h-full">
<div className="aspect-w-10 aspect-h-6 rounded-xl shadow-xl overflow-hidden sm:aspect-w-16 sm:aspect-h-7 lg:aspect-none lg:h-full">
<img
className="object-cover lg:h-full lg:w-full"
src="https://images.unsplash.com/photo-1520333789090-1afc82db536a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80"
alt=""
/>
</div>
</div>
</div>
<div className="mt-12 lg:m-0 lg:col-span-2 lg:pl-8">
<div className="mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 lg:px-0 lg:py-20 lg:max-w-none">
<blockquote>
<div>
<svg
className="h-12 w-12 text-white opacity-25"
fill="currentColor"
viewBox="0 0 32 32"
aria-hidden="true"
>
<path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
</svg>
<p className="mt-6 text-2xl font-medium text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
urna nulla vitae laoreet augue. Amet feugiat est integer
dolor auctor adipiscing nunc urna, sit.
</p>
</div>
<footer className="mt-6">
<p className="text-base font-medium text-white">
Judith Black
</p>
<p className="text-base font-medium text-blue-100">
CEO at PureInsights
</p>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
</div>
);
}