162 lines
7.0 KiB
JavaScript
162 lines
7.0 KiB
JavaScript
/*
|
||
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 isolate bg-white px-6 py-24 sm:py-32 lg:px-8">
|
||
<svg
|
||
className="absolute inset-0 -z-10 h-full w-full stroke-gray-200 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
|
||
aria-hidden="true"
|
||
>
|
||
<defs>
|
||
<pattern
|
||
id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527"
|
||
width={200}
|
||
height={200}
|
||
x="50%"
|
||
y={-64}
|
||
patternUnits="userSpaceOnUse"
|
||
>
|
||
<path d="M100 200V.5M.5 .5H200" fill="none" />
|
||
</pattern>
|
||
</defs>
|
||
<svg x="50%" y={-64} className="overflow-visible fill-gray-50">
|
||
<path
|
||
d="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M299.5 800h201v201h-201Z"
|
||
strokeWidth={0}
|
||
/>
|
||
</svg>
|
||
<rect width="100%" height="100%" strokeWidth={0} fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)" />
|
||
</svg>
|
||
<div className="mx-auto max-w-xl lg:max-w-4xl">
|
||
<h2 className="text-4xl font-bold tracking-tight text-gray-900">Let’s talk about your project</h2>
|
||
<p className="mt-2 text-lg leading-8 text-gray-600">
|
||
We help companies and individuals build out their brand guidelines.
|
||
</p>
|
||
<div className="mt-16 flex flex-col gap-16 sm:gap-y-20 lg:flex-row">
|
||
<form action="#" method="POST" className="lg:flex-auto">
|
||
<div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
|
||
<div>
|
||
<label htmlFor="first-name" className="block text-sm font-semibold leading-6 text-gray-900">
|
||
First name
|
||
</label>
|
||
<div className="mt-2.5">
|
||
<input
|
||
type="text"
|
||
name="first-name"
|
||
id="first-name"
|
||
autoComplete="given-name"
|
||
className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label htmlFor="last-name" className="block text-sm font-semibold leading-6 text-gray-900">
|
||
Last name
|
||
</label>
|
||
<div className="mt-2.5">
|
||
<input
|
||
type="text"
|
||
name="last-name"
|
||
id="last-name"
|
||
autoComplete="family-name"
|
||
className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label htmlFor="budget" className="block text-sm font-semibold leading-6 text-gray-900">
|
||
Budget
|
||
</label>
|
||
<div className="mt-2.5">
|
||
<input
|
||
id="budget"
|
||
name="budget"
|
||
type="text"
|
||
className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label htmlFor="website" className="block text-sm font-semibold leading-6 text-gray-900">
|
||
Website
|
||
</label>
|
||
<div className="mt-2.5">
|
||
<input
|
||
type="url"
|
||
name="website"
|
||
id="website"
|
||
className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="sm:col-span-2">
|
||
<label htmlFor="message" className="block text-sm font-semibold leading-6 text-gray-900">
|
||
Message
|
||
</label>
|
||
<div className="mt-2.5">
|
||
<textarea
|
||
id="message"
|
||
name="message"
|
||
rows={4}
|
||
className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
|
||
defaultValue={''}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-10">
|
||
<button
|
||
type="submit"
|
||
className="block w-full rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
||
>
|
||
Let’s talk
|
||
</button>
|
||
</div>
|
||
<p className="mt-4 text-sm leading-6 text-gray-500">
|
||
By submitting this form, I agree to the{' '}
|
||
<a href="#" className="font-semibold text-indigo-600">
|
||
privacy policy
|
||
</a>
|
||
.
|
||
</p>
|
||
</form>
|
||
<div className="lg:mt-6 lg:w-80 lg:flex-none">
|
||
<img className="h-12 w-auto" src="https://tailwindui.com/img/logos/workcation-logo-indigo-600.svg" alt="" />
|
||
<figure className="mt-10">
|
||
<blockquote className="text-lg font-semibold leading-8 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>
|
||
</blockquote>
|
||
<figcaption className="mt-10 flex gap-x-6">
|
||
<img
|
||
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=96&h=96&q=80"
|
||
alt=""
|
||
className="h-12 w-12 flex-none rounded-full bg-gray-50"
|
||
/>
|
||
<div>
|
||
<div className="text-base font-semibold text-gray-900">Brenna Goyette</div>
|
||
<div className="text-sm leading-6 text-gray-600">CEO of Workcation</div>
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|