CTA
Branded With Background Image
/* This example requires Tailwind CSS v2.0+ */
export default function Example() {
return (
<div className='relative bg-blue-800'>
<div className='absolute inset-0'>
<img
className='w-full h-full object-cover'
src='https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=60&&sat=-100'
alt=''
/>
<div className='absolute inset-0 bg-blue-800 mix-blend-multiply' aria-hidden='true' />
</div>
<div className='relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8'>
<h1 className='text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl'>
Get in touch
</h1>
<p className='mt-6 text-xl text-blue-100 max-w-3xl'>
Mattis amet hendrerit dolor, quisque lorem pharetra. Pellentesque lacus nisi urna, arcu
sociis eu. Orci vel lectus nisl eget eget ut consectetur. Sit justo viverra non
adipisicing elit distinctio.
</p>
</div>
</div>
);
}
Simple Centered
/* This example requires Tailwind CSS v2.0+ */
export default function Example() {
return (
<div className='bg-white'>
<div className='max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8'>
<div className='text-center'>
<h2 className='text-base font-semibold text-blue-600 tracking-wide uppercase'>Pricing</h2>
<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 mt-5 mx-auto 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>
);
}
Simple With Select Menu
/*
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 { ChevronDownIcon } from "@heroicons/react/solid";
export default function Example() {
return (
<div className="bg-white">
<div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 lg:flex lg:justify-between">
<div className="max-w-xl">
<h2 className="text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
Pricing Plans
</h2>
<p className="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 className="mt-10 w-full max-w-xs">
<label
htmlFor="currency"
className="block text-base font-medium text-gray-500"
>
Currency
</label>
<div className="mt-1.5 relative">
<select
id="currency"
name="currency"
className="appearance-none block w-full bg-none bg-white border border-gray-300 rounded-md pl-3 pr-10 py-2 text-base text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
defaultValue="United States (USD)"
>
<option>Argentina (ARS)</option>
<option>Australia (AUD)</option>
<option>United States (USD)</option>
<option>Canada (CAD)</option>
<option>France (EUR)</option>
<option>Japan (JPY)</option>
<option>Nigeria (NGN)</option>
<option>Switzerland (CHF)</option>
<option>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-gray-400"
aria-hidden="true"
/>
</div>
</div>
</div>
</div>
</div>
);
}
Simple With Select Menu Dark
/*
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 { ChevronDownIcon } from "@heroicons/react/solid";
export default function Example() {
return (
<div className="bg-gray-800">
<div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 lg:flex lg:justify-between">
<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-gray-400">
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">
<label
htmlFor="currency"
className="block text-base font-medium text-gray-300"
>
Currency
</label>
<div className="mt-1.5 relative">
<select
id="currency"
name="currency"
className="appearance-none block w-full bg-none bg-gray-700 border border-transparent rounded-md pl-3 pr-10 py-2 text-base text-white focus:outline-none focus:ring-1 focus:ring-white focus:border-white sm:text-sm"
defaultValue="United States (USD)"
>
<option>Argentina (ARS)</option>
<option>Australia (AUD)</option>
<option>United States (USD)</option>
<option>Canada (CAD)</option>
<option>France (EUR)</option>
<option>Japan (JPY)</option>
<option>Nigeria (NGN)</option>
<option>Switzerland (CHF)</option>
<option>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-white"
aria-hidden="true"
/>
</div>
</div>
</div>
</div>
</div>
);
}
With Background Image And Overlapping Cards
/* This example requires Tailwind CSS v2.0+ */
import { NewspaperIcon, PhoneIcon, SupportIcon } from '@heroicons/react/outline';
const supportLinks = [
{
name: 'Sales',
href: '#',
description:
'Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate id malesuada non. Cras aliquet purus dui laoreet diam sed lacus, fames.',
icon: PhoneIcon,
},
{
name: 'Technical Support',
href: '#',
description:
'Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate id malesuada non. Cras aliquet purus dui laoreet diam sed lacus, fames.',
icon: SupportIcon,
},
{
name: 'Media Inquiries',
href: '#',
description:
'Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate id malesuada non. Cras aliquet purus dui laoreet diam sed lacus, fames.',
icon: NewspaperIcon,
},
];
export default function Example() {
return (
<div className='bg-white'>
{/* Header */}
<div className='relative pb-32 bg-gray-800'>
<div className='absolute inset-0'>
<img
className='w-full h-full object-cover'
src='https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=60&&sat=-100'
alt=''
/>
<div className='absolute inset-0 bg-gray-800 mix-blend-multiply' aria-hidden='true' />
</div>
<div className='relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8'>
<h1 className='text-4xl font-extrabold tracking-tight text-white md:text-5xl lg:text-6xl'>
Support
</h1>
<p className='mt-6 max-w-3xl text-xl text-gray-300'>
Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate id malesuada non.
Cras aliquet purus dui laoreet diam sed lacus, fames. Dui, amet, nec sit pulvinar.
</p>
</div>
</div>
{/* Overlapping cards */}
<section
className='-mt-32 max-w-7xl mx-auto relative z-10 pb-32 px-4 sm:px-6 lg:px-8'
aria-labelledby='contact-heading'
>
<h2 className='sr-only' id='contact-heading'>
Contact us
</h2>
<div className='grid grid-cols-1 gap-y-20 lg:grid-cols-3 lg:gap-y-0 lg:gap-x-8'>
{supportLinks.map((link) => (
<div key={link.name} className='flex flex-col bg-white rounded-2xl shadow-xl'>
<div className='flex-1 relative pt-16 px-6 pb-8 md:px-8'>
<div className='absolute top-0 p-5 inline-block bg-blue-600 rounded-xl shadow-lg transform -translate-y-1/2'>
<link.icon className='h-6 w-6 text-white' aria-hidden='true' />
</div>
<h3 className='text-xl font-medium text-gray-900'>{link.name}</h3>
<p className='mt-4 text-base text-gray-500'>{link.description}</p>
</div>
<div className='p-6 bg-gray-50 rounded-bl-2xl rounded-br-2xl md:px-8'>
<a
href={link.href}
className='text-base font-medium text-blue-700 hover:text-blue-600'
>
Contact us<span aria-hidden='true'> →</span>
</a>
</div>
</div>
))}
</div>
</section>
</div>
);
}