CTA
Centered
/*
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 { useState } from "react";
import { Switch } from "@headlessui/react";
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
export default function Example() {
const [agreed, setAgreed] = useState(false);
return (
<div className="bg-white py-16 px-4 overflow-hidden sm:px-6 lg:px-8 lg:py-24">
<div className="relative max-w-xl mx-auto">
<svg
className="absolute left-full transform translate-x-1/2"
width={404}
height={404}
fill="none"
viewBox="0 0 404 404"
aria-hidden="true"
>
<defs>
<pattern
id="85737c0e-0916-41d7-917f-596dc7edfa27"
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={404}
fill="url(#85737c0e-0916-41d7-917f-596dc7edfa27)"
/>
</svg>
<svg
className="absolute right-full bottom-0 transform -translate-x-1/2"
width={404}
height={404}
fill="none"
viewBox="0 0 404 404"
aria-hidden="true"
>
<defs>
<pattern
id="85737c0e-0916-41d7-917f-596dc7edfa27"
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={404}
fill="url(#85737c0e-0916-41d7-917f-596dc7edfa27)"
/>
</svg>
<div className="text-center">
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Contact sales
</h2>
<p className="mt-4 text-lg leading-6 text-gray-500">
Nullam risus blandit ac aliquam justo ipsum. Quam mauris volutpat
massa dictumst amet. Sapien tortor lacus arcu.
</p>
</div>
<div className="mt-12">
<form
action="#"
method="POST"
className="grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8"
>
<div>
<label
htmlFor="first-name"
className="block text-sm font-medium text-gray-700"
>
First name
</label>
<div className="mt-1">
<input
type="text"
name="first-name"
id="first-name"
autoComplete="given-name"
className="py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"
/>
</div>
</div>
<div>
<label
htmlFor="last-name"
className="block text-sm font-medium text-gray-700"
>
Last name
</label>
<div className="mt-1">
<input
type="text"
name="last-name"
id="last-name"
autoComplete="family-name"
className="py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"
/>
</div>
</div>
<div className="sm:col-span-2">
<label
htmlFor="company"
className="block text-sm font-medium text-gray-700"
>
Company
</label>
<div className="mt-1">
<input
type="text"
name="company"
id="company"
autoComplete="organization"
className="py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"
/>
</div>
</div>
<div className="sm:col-span-2">
<label
htmlFor="email"
className="block text-sm font-medium text-gray-700"
>
Email
</label>
<div className="mt-1">
<input
id="email"
name="email"
type="email"
autoComplete="email"
className="py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"
/>
</div>
</div>
<div className="sm:col-span-2">
<label
htmlFor="phone-number"
className="block text-sm font-medium text-gray-700"
>
Phone Number
</label>
<div className="mt-1 relative rounded-md shadow-sm">
<div className="absolute inset-y-0 left-0 flex items-center">
<label htmlFor="country" className="sr-only">
Country
</label>
<select
id="country"
name="country"
className="h-full py-0 pl-4 pr-8 border-transparent bg-transparent text-gray-500 focus:ring-blue-500 focus:border-blue-500 rounded-md"
>
<option>US</option>
<option>CA</option>
<option>EU</option>
</select>
</div>
<input
type="text"
name="phone-number"
id="phone-number"
autoComplete="tel"
className="py-3 px-4 block w-full pl-20 focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"
placeholder="+1 (555) 987-6543"
/>
</div>
</div>
<div className="sm:col-span-2">
<label
htmlFor="message"
className="block text-sm font-medium text-gray-700"
>
Message
</label>
<div className="mt-1">
<textarea
id="message"
name="message"
rows={4}
className="py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border border-gray-300 rounded-md"
defaultValue={""}
/>
</div>
</div>
<div className="sm:col-span-2">
<div className="flex items-start">
<div className="flex-shrink-0">
<Switch
checked={agreed}
onChange={setAgreed}
className={classNames(
agreed ? "bg-blue-600" : "bg-gray-200",
"relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
)}
>
<span className="sr-only">Agree to policies</span>
<span
aria-hidden="true"
className={classNames(
agreed ? "translate-x-5" : "translate-x-0",
"inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
)}
/>
</Switch>
</div>
<div className="ml-3">
<p className="text-base text-gray-500">
By selecting this, you agree to the{" "}
<a href="#" className="font-medium text-gray-700 underline">
Privacy Policy
</a>{" "}
and{" "}
<a href="#" className="font-medium text-gray-700 underline">
Cookie Policy
</a>
.
</p>
</div>
</div>
</div>
<div className="sm:col-span-2">
<button
type="submit"
className="w-full inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
Let's talk
</button>
</div>
</form>
</div>
</div>
</div>
);
}
Side By Side Grid
/* 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:px-6 lg:py-24 lg:px-8">
<div className="divide-y-2 divide-gray-200">
<div className="lg:grid lg:grid-cols-3 lg:gap-8">
<h2 className="text-2xl font-extrabold text-gray-900 sm:text-3xl">Get in touch</h2>
<div className="mt-8 grid grid-cols-1 gap-12 sm:grid-cols-2 sm:gap-x-8 sm:gap-y-12 lg:mt-0 lg:col-span-2">
<div>
<h3 className="text-lg leading-6 font-medium text-gray-900">Collaborate</h3>
<dl className="mt-2 text-base text-gray-500">
<div>
<dt className="sr-only">Email</dt>
<dd>support@example.com</dd>
</div>
<div className="mt-1">
<dt className="sr-only">Phone number</dt>
<dd>+1 (555) 123-4567</dd>
</div>
</dl>
</div>
<div>
<h3 className="text-lg leading-6 font-medium text-gray-900">Press</h3>
<dl className="mt-2 text-base text-gray-500">
<div>
<dt className="sr-only">Email</dt>
<dd>support@example.com</dd>
</div>
<div className="mt-1">
<dt className="sr-only">Phone number</dt>
<dd>+1 (555) 123-4567</dd>
</div>
</dl>
</div>
<div>
<h3 className="text-lg leading-6 font-medium text-gray-900">Join our team</h3>
<dl className="mt-2 text-base text-gray-500">
<div>
<dt className="sr-only">Email</dt>
<dd>support@example.com</dd>
</div>
<div className="mt-1">
<dt className="sr-only">Phone number</dt>
<dd>+1 (555) 123-4567</dd>
</div>
</dl>
</div>
<div>
<h3 className="text-lg leading-6 font-medium text-gray-900">Say hello</h3>
<dl className="mt-2 text-base text-gray-500">
<div>
<dt className="sr-only">Email</dt>
<dd>support@example.com</dd>
</div>
<div className="mt-1">
<dt className="sr-only">Phone number</dt>
<dd>+1 (555) 123-4567</dd>
</div>
</dl>
</div>
</div>
</div>
<div className="mt-16 pt-16 lg:grid lg:grid-cols-3 lg:gap-8">
<h2 className="text-2xl font-extrabold text-gray-900 sm:text-3xl">Locations</h2>
<div className="mt-8 grid grid-cols-1 gap-12 sm:grid-cols-2 sm:gap-x-8 sm:gap-y-12 lg:mt-0 lg:col-span-2">
<div>
<h3 className="text-lg leading-6 font-medium text-gray-900">Los Angeles</h3>
<div className="mt-2 text-base text-gray-500">
<p>4556 Brendan Ferry</p>
<p className="mt-1">Los Angeles, CA 90210</p>
</div>
</div>
<div>
<h3 className="text-lg leading-6 font-medium text-gray-900">New York</h3>
<div className="mt-2 text-base text-gray-500">
<p>886 Walter Streets</p>
<p className="mt-1">New York, NY 12345</p>
</div>
</div>
<div>
<h3 className="text-lg leading-6 font-medium text-gray-900">Toronto</h3>
<div className="mt-2 text-base text-gray-500">
<p>7363 Cynthia Pass</p>
<p className="mt-1">Toronto, ON N3Y 4H8</p>
</div>
</div>
<div>
<h3 className="text-lg leading-6 font-medium text-gray-900">Chicago</h3>
<div className="mt-2 text-base text-gray-500">
<p>726 Mavis Island</p>
<p className="mt-1">Chicago, IL 60601</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
Simple Four Column
/* This example requires Tailwind CSS v2.0+ */
export default function Example() {
return (
<div className="bg-white">
<div className="max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
<h2 className="text-3xl font-extrabold text-gray-900">Our offices</h2>
<p className="mt-6 text-lg text-gray-500 max-w-3xl">
Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate id malesuada non. Cras aliquet purus dui
laoreet diam sed lacus, fames.
</p>
<div className="mt-10 grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
<div>
<h3 className="text-lg font-medium text-gray-900">Los Angeles</h3>
<p className="mt-2 text-base text-gray-500">
<span className="block">4556 Brendan Ferry</span>
<span className="block">Los Angeles, CA 90210</span>
</p>
</div>
<div>
<h3 className="text-lg font-medium text-gray-900">New York</h3>
<p className="mt-2 text-base text-gray-500">
<span className="block">886 Walter Streets</span>
<span className="block">New York, NY 12345</span>
</p>
</div>
<div>
<h3 className="text-lg font-medium text-gray-900">Toronto</h3>
<p className="mt-2 text-base text-gray-500">
<span className="block">7363 Cynthia Pass</span>
<span className="block">Toronto, ON N3Y 4H8</span>
</p>
</div>
<div>
<h3 className="text-lg font-medium text-gray-900">London</h3>
<p className="mt-2 text-base text-gray-500">
<span className="block">114 Cobble Lane</span>
<span className="block">London N1 2EF</span>
</p>
</div>
</div>
</div>
</div>
)
}
Simple Two Column
/* This example requires Tailwind CSS v2.0+ */
import { MailIcon, PhoneIcon } from '@heroicons/react/outline'
export default function Example() {
return (
<div className="bg-white">
<div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
<div className="max-w-lg mx-auto md:max-w-none md:grid md:grid-cols-2 md:gap-8">
<div>
<h2 className="text-2xl font-extrabold text-gray-900 sm:text-3xl">Sales Support</h2>
<div className="mt-3">
<p className="text-lg text-gray-500">
Nullam risus blandit ac aliquam justo ipsum. Quam mauris volutpat massa dictumst amet. Sapien tortor
lacus arcu.
</p>
</div>
<div className="mt-9">
<div className="flex">
<div className="flex-shrink-0">
<PhoneIcon className="h-6 w-6 text-gray-400" aria-hidden="true" />
</div>
<div className="ml-3 text-base text-gray-500">
<p>+1 (555) 123 4567</p>
<p className="mt-1">Mon-Fri 8am to 6pm PST</p>
</div>
</div>
<div className="mt-6 flex">
<div className="flex-shrink-0">
<MailIcon className="h-6 w-6 text-gray-400" aria-hidden="true" />
</div>
<div className="ml-3 text-base text-gray-500">
<p>support@example.com</p>
</div>
</div>
</div>
</div>
<div className="mt-12 sm:mt-16 md:mt-0">
<h2 className="text-2xl font-extrabold text-gray-900 sm:text-3xl">Technical Support</h2>
<div className="mt-3">
<p className="text-lg text-gray-500">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, repellat error corporis doloribus
similique, voluptatibus numquam quam, quae officiis facilis.
</p>
</div>
<div className="mt-9">
<div className="flex">
<div className="flex-shrink-0">
<PhoneIcon className="h-6 w-6 text-gray-400" aria-hidden="true" />
</div>
<div className="ml-3 text-base text-gray-500">
<p>+1 (555) 123 4567</p>
<p className="mt-1">Mon-Fri 8am to 6pm PST</p>
</div>
</div>
<div className="mt-6 flex">
<div className="flex-shrink-0">
<MailIcon className="h-6 w-6 text-gray-400" aria-hidden="true" />
</div>
<div className="ml-3 text-base text-gray-500">
<p>support@example.com</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
Split Brand Panel
/*
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 { MailIcon, PhoneIcon } from "@heroicons/react/outline";
export default function Example() {
return (
<div className="bg-gray-100">
<div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
<div className="relative bg-white shadow-xl">
<h2 className="sr-only">Contact us</h2>
<div className="grid grid-cols-1 lg:grid-cols-3">
{/* Contact information */}
<div className="relative overflow-hidden py-10 px-6 bg-blue-700 sm:px-10 xl:p-12">
<div
className="absolute inset-0 pointer-events-none sm:hidden"
aria-hidden="true"
>
<svg
className="absolute inset-0 w-full h-full"
width={343}
height={388}
viewBox="0 0 343 388"
fill="none"
preserveAspectRatio="xMidYMid slice"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M-99 461.107L608.107-246l707.103 707.107-707.103 707.103L-99 461.107z"
fill="url(#linear1)"
fillOpacity=".1"
/>
<defs>
<linearGradient
id="linear1"
x1="254.553"
y1="107.554"
x2="961.66"
y2="814.66"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#fff" />
<stop offset={1} stopColor="#fff" stopOpacity={0} />
</linearGradient>
</defs>
</svg>
</div>
<div
className="hidden absolute top-0 right-0 bottom-0 w-1/2 pointer-events-none sm:block lg:hidden"
aria-hidden="true"
>
<svg
className="absolute inset-0 w-full h-full"
width={359}
height={339}
viewBox="0 0 359 339"
fill="none"
preserveAspectRatio="xMidYMid slice"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M-161 382.107L546.107-325l707.103 707.107-707.103 707.103L-161 382.107z"
fill="url(#linear2)"
fillOpacity=".1"
/>
<defs>
<linearGradient
id="linear2"
x1="192.553"
y1="28.553"
x2="899.66"
y2="735.66"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#fff" />
<stop offset={1} stopColor="#fff" stopOpacity={0} />
</linearGradient>
</defs>
</svg>
</div>
<div
className="hidden absolute top-0 right-0 bottom-0 w-1/2 pointer-events-none lg:block"
aria-hidden="true"
>
<svg
className="absolute inset-0 w-full h-full"
width={160}
height={678}
viewBox="0 0 160 678"
fill="none"
preserveAspectRatio="xMidYMid slice"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M-161 679.107L546.107-28l707.103 707.107-707.103 707.103L-161 679.107z"
fill="url(#linear3)"
fillOpacity=".1"
/>
<defs>
<linearGradient
id="linear3"
x1="192.553"
y1="325.553"
x2="899.66"
y2="1032.66"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#fff" />
<stop offset={1} stopColor="#fff" stopOpacity={0} />
</linearGradient>
</defs>
</svg>
</div>
<h3 className="text-lg font-medium text-white">
Contact information
</h3>
<p className="mt-6 text-base text-blue-50 max-w-3xl">
Nullam risus blandit ac aliquam justo ipsum. Quam mauris
volutpat massa dictumst amet. Sapien tortor lacus arcu.
</p>
<dl className="mt-8 space-y-6">
<dt>
<span className="sr-only">Phone number</span>
</dt>
<dd className="flex text-base text-blue-50">
<PhoneIcon
className="flex-shrink-0 w-6 h-6 text-blue-200"
aria-hidden="true"
/>
<span className="ml-3">+1 (555) 123-4567</span>
</dd>
<dt>
<span className="sr-only">Email</span>
</dt>
<dd className="flex text-base text-blue-50">
<MailIcon
className="flex-shrink-0 w-6 h-6 text-blue-200"
aria-hidden="true"
/>
<span className="ml-3">support@workcation.com</span>
</dd>
</dl>
<ul className="mt-8 flex space-x-12" role="list">
<li>
<a className="text-blue-200 hover:text-blue-100" href="#">
<span className="sr-only">Facebook</span>
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
aria-hidden="true"
>
<path
d="M22.258 1H2.242C1.556 1 1 1.556 1 2.242v20.016c0 .686.556 1.242 1.242 1.242h10.776v-8.713h-2.932V11.39h2.932V8.887c0-2.906 1.775-4.489 4.367-4.489 1.242 0 2.31.093 2.62.134v3.037l-1.797.001c-1.41 0-1.683.67-1.683 1.653v2.168h3.362l-.438 3.396h-2.924V23.5h5.733c.686 0 1.242-.556 1.242-1.242V2.242C23.5 1.556 22.944 1 22.258 1"
fill="currentColor"
/>
</svg>
</a>
</li>
<li>
<a className="text-blue-200 hover:text-blue-100" href="#">
<span className="sr-only">GitHub</span>
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
aria-hidden="true"
>
<path
d="M11.999 0C5.373 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.386.6.11.819-.26.819-.578 0-.284-.01-1.04-.017-2.04-3.337.724-4.042-1.61-4.042-1.61-.545-1.386-1.332-1.755-1.332-1.755-1.09-.744.082-.73.082-.73 1.205.086 1.838 1.238 1.838 1.238 1.07 1.833 2.81 1.304 3.493.996.109-.775.419-1.303.762-1.603C7.145 17 4.343 15.97 4.343 11.373c0-1.31.468-2.382 1.236-3.22-.124-.304-.536-1.524.118-3.176 0 0 1.007-.323 3.3 1.23.956-.266 1.983-.4 3.003-.404 1.02.005 2.046.138 3.005.404 2.29-1.553 3.296-1.23 3.296-1.23.655 1.652.243 2.872.12 3.176.77.838 1.233 1.91 1.233 3.22 0 4.61-2.806 5.624-5.478 5.921.43.37.814 1.103.814 2.223 0 1.603-.015 2.898-.015 3.291 0 .321.217.695.825.578C20.565 21.796 24 17.3 24 12c0-6.627-5.373-12-12.001-12"
fill="currentColor"
/>
</svg>
</a>
</li>
<li>
<a className="text-blue-200 hover:text-blue-100" href="#">
<span className="sr-only">Twitter</span>
<svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
aria-hidden="true"
>
<path
d="M7.548 22.501c9.056 0 14.01-7.503 14.01-14.01 0-.213 0-.425-.015-.636A10.02 10.02 0 0024 5.305a9.828 9.828 0 01-2.828.776 4.94 4.94 0 002.165-2.724 9.867 9.867 0 01-3.127 1.195 4.929 4.929 0 00-8.391 4.491A13.98 13.98 0 011.67 3.9a4.928 4.928 0 001.525 6.573A4.887 4.887 0 01.96 9.855v.063a4.926 4.926 0 003.95 4.827 4.917 4.917 0 01-2.223.084 4.93 4.93 0 004.6 3.42A9.88 9.88 0 010 20.289a13.941 13.941 0 007.548 2.209"
fill="currentColor"
/>
</svg>
</a>
</li>
</ul>
</div>
{/* Contact form */}
<div className="py-10 px-6 sm:px-10 lg:col-span-2 xl:p-12">
<h3 className="text-lg font-medium text-gray-900">
Send us a message
</h3>
<form
action="#"
method="POST"
className="mt-6 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8"
>
<div>
<label
htmlFor="first-name"
className="block text-sm font-medium text-gray-900"
>
First name
</label>
<div className="mt-1">
<input
type="text"
name="first-name"
id="first-name"
autoComplete="given-name"
className="py-3 px-4 block w-full shadow-sm text-gray-900 focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"
/>
</div>
</div>
<div>
<label
htmlFor="last-name"
className="block text-sm font-medium text-gray-900"
>
Last name
</label>
<div className="mt-1">
<input
type="text"
name="last-name"
id="last-name"
autoComplete="family-name"
className="py-3 px-4 block w-full shadow-sm text-gray-900 focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"
/>
</div>
</div>
<div>
<label
htmlFor="email"
className="block text-sm font-medium text-gray-900"
>
Email
</label>
<div className="mt-1">
<input
id="email"
name="email"
type="email"
autoComplete="email"
className="py-3 px-4 block w-full shadow-sm text-gray-900 focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"
/>
</div>
</div>
<div>
<div className="flex justify-between">
<label
htmlFor="phone"
className="block text-sm font-medium text-gray-900"
>
Phone
</label>
<span id="phone-optional" className="text-sm text-gray-500">
Optional
</span>
</div>
<div className="mt-1">
<input
type="text"
name="phone"
id="phone"
autoComplete="tel"
className="py-3 px-4 block w-full shadow-sm text-gray-900 focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"
aria-describedby="phone-optional"
/>
</div>
</div>
<div className="sm:col-span-2">
<label
htmlFor="subject"
className="block text-sm font-medium text-gray-900"
>
Subject
</label>
<div className="mt-1">
<input
type="text"
name="subject"
id="subject"
className="py-3 px-4 block w-full shadow-sm text-gray-900 focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"
/>
</div>
</div>
<div className="sm:col-span-2">
<div className="flex justify-between">
<label
htmlFor="message"
className="block text-sm font-medium text-gray-900"
>
Message
</label>
<span id="message-max" className="text-sm text-gray-500">
Max. 500 characters
</span>
</div>
<div className="mt-1">
<textarea
id="message"
name="message"
rows={4}
className="py-3 px-4 block w-full shadow-sm text-gray-900 focus:ring-blue-500 focus:border-blue-500 border border-gray-300 rounded-md"
aria-describedby="message-max"
defaultValue={""}
/>
</div>
</div>
<div className="sm:col-span-2 sm:flex sm:justify-end">
<button
type="submit"
className="mt-2 w-full inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto"
>
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
);
}
Split Two Tone
/*
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 { MailIcon, PhoneIcon } from "@heroicons/react/outline";
export default function Example() {
return (
<div className="relative bg-white">
<div className="absolute inset-0">
<div className="absolute inset-y-0 left-0 w-1/2 bg-gray-50" />
</div>
<div className="relative max-w-7xl mx-auto lg:grid lg:grid-cols-5">
<div className="bg-gray-50 py-16 px-4 sm:px-6 lg:col-span-2 lg:px-8 lg:py-24 xl:pr-12">
<div className="max-w-lg mx-auto">
<h2 className="text-2xl font-extrabold tracking-tight text-gray-900 sm:text-3xl">
Get in touch
</h2>
<p className="mt-3 text-lg leading-6 text-gray-500">
Nullam risus blandit ac aliquam justo ipsum. Quam mauris volutpat
massa dictumst amet. Sapien tortor lacus arcu.
</p>
<dl className="mt-8 text-base text-gray-500">
<div>
<dt className="sr-only">Postal address</dt>
<dd>
<p>742 Evergreen Terrace</p>
<p>Springfield, OR 12345</p>
</dd>
</div>
<div className="mt-6">
<dt className="sr-only">Phone number</dt>
<dd className="flex">
<PhoneIcon
className="flex-shrink-0 h-6 w-6 text-gray-400"
aria-hidden="true"
/>
<span className="ml-3">+1 (555) 123-4567</span>
</dd>
</div>
<div className="mt-3">
<dt className="sr-only">Email</dt>
<dd className="flex">
<MailIcon
className="flex-shrink-0 h-6 w-6 text-gray-400"
aria-hidden="true"
/>
<span className="ml-3">support@example.com</span>
</dd>
</div>
</dl>
<p className="mt-6 text-base text-gray-500">
Looking for careers?{" "}
<a href="#" className="font-medium text-gray-700 underline">
View all job openings
</a>
.
</p>
</div>
</div>
<div className="bg-white py-16 px-4 sm:px-6 lg:col-span-3 lg:py-24 lg:px-8 xl:pl-12">
<div className="max-w-lg mx-auto lg:max-w-none">
<form action="#" method="POST" className="grid grid-cols-1 gap-y-6">
<div>
<label htmlFor="full-name" className="sr-only">
Full name
</label>
<input
type="text"
name="full-name"
id="full-name"
autoComplete="name"
className="block w-full shadow-sm py-3 px-4 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"
placeholder="Full name"
/>
</div>
<div>
<label htmlFor="email" className="sr-only">
Email
</label>
<input
id="email"
name="email"
type="email"
autoComplete="email"
className="block w-full shadow-sm py-3 px-4 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"
placeholder="Email"
/>
</div>
<div>
<label htmlFor="phone" className="sr-only">
Phone
</label>
<input
type="text"
name="phone"
id="phone"
autoComplete="tel"
className="block w-full shadow-sm py-3 px-4 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"
placeholder="Phone"
/>
</div>
<div>
<label htmlFor="message" className="sr-only">
Message
</label>
<textarea
id="message"
name="message"
rows={4}
className="block w-full shadow-sm py-3 px-4 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500 border border-gray-300 rounded-md"
placeholder="Message"
defaultValue={""}
/>
</div>
<div>
<button
type="submit"
className="inline-flex justify-center py-3 px-6 border border-transparent shadow-sm text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</div>
);
}
Split With Image
/*
This example requires Tailwind CSS v2.0+
This example requires some changes to your config:
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/forms'),
]
}
*/
export default function Example() {
return (
<div className="relative bg-white">
<div className="lg:absolute lg:inset-0">
<div className="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<img
className="h-56 w-full object-cover lg:absolute lg:h-full"
src="https://images.unsplash.com/photo-1556761175-4b46a572b786?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80"
alt=""
/>
</div>
</div>
<div className="relative py-16 px-4 sm:py-24 sm:px-6 lg:px-8 lg:max-w-7xl lg:mx-auto lg:py-32 lg:grid lg:grid-cols-2">
<div className="lg:pr-8">
<div className="max-w-md mx-auto sm:max-w-lg lg:mx-0">
<h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
Let's work together
</h2>
<p className="mt-4 text-lg text-gray-500 sm:mt-3">
We’d love to hear from you! Send us a message using the form
opposite, or email us. We’d love to hear from you! Send us a
message using the form opposite, or email us.
</p>
<form
action="#"
method="POST"
className="mt-9 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8"
>
<div>
<label
htmlFor="first-name"
className="block text-sm font-medium text-gray-700"
>
First name
</label>
<div className="mt-1">
<input
type="text"
name="first-name"
id="first-name"
autoComplete="given-name"
className="block w-full shadow-sm sm:text-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"
/>
</div>
</div>
<div>
<label
htmlFor="last-name"
className="block text-sm font-medium text-gray-700"
>
Last name
</label>
<div className="mt-1">
<input
type="text"
name="last-name"
id="last-name"
autoComplete="family-name"
className="block w-full shadow-sm sm:text-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"
/>
</div>
</div>
<div className="sm:col-span-2">
<label
htmlFor="email"
className="block text-sm font-medium text-gray-700"
>
Email
</label>
<div className="mt-1">
<input
id="email"
name="email"
type="email"
autoComplete="email"
className="block w-full shadow-sm sm:text-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"
/>
</div>
</div>
<div className="sm:col-span-2">
<label
htmlFor="company"
className="block text-sm font-medium text-gray-700"
>
Company
</label>
<div className="mt-1">
<input
type="text"
name="company"
id="company"
autoComplete="organization"
className="block w-full shadow-sm sm:text-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"
/>
</div>
</div>
<div className="sm:col-span-2">
<div className="flex justify-between">
<label
htmlFor="phone"
className="block text-sm font-medium text-gray-700"
>
Phone
</label>
<span
id="phone-description"
className="text-sm text-gray-500"
>
Optional
</span>
</div>
<div className="mt-1">
<input
type="text"
name="phone"
id="phone"
autoComplete="tel"
aria-describedby="phone-description"
className="block w-full shadow-sm sm:text-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"
/>
</div>
</div>
<div className="sm:col-span-2">
<div className="flex justify-between">
<label
htmlFor="how-can-we-help"
className="block text-sm font-medium text-gray-700"
>
How can we help you?
</label>
<span
id="how-can-we-help-description"
className="text-sm text-gray-500"
>
Max. 500 characters
</span>
</div>
<div className="mt-1">
<textarea
id="how-can-we-help"
name="how-can-we-help"
aria-describedby="how-can-we-help-description"
rows={4}
className="block w-full shadow-sm sm:text-sm focus:ring-blue-500 focus:border-blue-500 border border-gray-300 rounded-md"
defaultValue={""}
/>
</div>
</div>
<fieldset className="sm:col-span-2">
<legend className="block text-sm font-medium text-gray-700">
Expected budget
</legend>
<div className="mt-4 grid grid-cols-1 gap-y-4">
<div className="flex items-center">
<input
id="budget-under-25k"
name="budget"
defaultValue="under_25k"
type="radio"
className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300"
/>
<label htmlFor="budget-under-25k" className="ml-3">
<span className="block text-sm text-gray-700">
Less than $25K
</span>
</label>
</div>
<div className="flex items-center">
<input
id="budget-25k-50k"
name="budget"
defaultValue="25k-50k"
type="radio"
className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300"
/>
<label htmlFor="budget-25k-50k" className="ml-3">
<span className="block text-sm text-gray-700">
$25K – $50K
</span>
</label>
</div>
<div className="flex items-center">
<input
id="budget-50k-100k"
name="budget"
defaultValue="50k-100k"
type="radio"
className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300"
/>
<label htmlFor="budget-50k-100k" className="ml-3">
<span className="block text-sm text-gray-700">
$50K – $100K
</span>
</label>
</div>
<div className="flex items-center">
<input
id="budget-over-100k"
name="budget"
defaultValue="over_100k"
type="radio"
className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300"
/>
<label htmlFor="budget-over-100k" className="ml-3">
<span className="block text-sm text-gray-700">
$100K+
</span>
</label>
</div>
</div>
</fieldset>
<div className="sm:col-span-2">
<label
htmlFor="how-did-you-hear-about-us"
className="block text-sm font-medium text-gray-700"
>
How did you hear about us?
</label>
<div className="mt-1">
<input
type="text"
name="how-did-you-hear-about-us"
id="how-did-you-hear-about-us"
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
/>
</div>
</div>
<div className="text-right sm:col-span-2">
<button
type="submit"
className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</div>
);
}