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/typography'),
]
}
*/
export default function Example() {
return (
<div className="relative py-16 bg-white overflow-hidden">
<div className="hidden lg:block lg:absolute lg:inset-y-0 lg:h-full lg:w-full">
<div
className="relative h-full text-lg max-w-prose mx-auto"
aria-hidden="true"
>
<svg
className="absolute top-12 left-full transform translate-x-32"
width={404}
height={384}
fill="none"
viewBox="0 0 404 384"
>
<defs>
<pattern
id="74b3fd99-0a6f-4271-bef2-e80eeafdf357"
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={384}
fill="url(#74b3fd99-0a6f-4271-bef2-e80eeafdf357)"
/>
</svg>
<svg
className="absolute top-1/2 right-full transform -translate-y-1/2 -translate-x-32"
width={404}
height={384}
fill="none"
viewBox="0 0 404 384"
>
<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={384}
fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)"
/>
</svg>
<svg
className="absolute bottom-12 left-full transform translate-x-32"
width={404}
height={384}
fill="none"
viewBox="0 0 404 384"
>
<defs>
<pattern
id="d3eb07ae-5182-43e6-857d-35c643af9034"
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={384}
fill="url(#d3eb07ae-5182-43e6-857d-35c643af9034)"
/>
</svg>
</div>
</div>
<div className="relative px-4 sm:px-6 lg:px-8">
<div className="text-lg max-w-prose mx-auto">
<h1>
<span className="block text-base text-center text-blue-600 font-semibold tracking-wide uppercase">
Introducing
</span>
<span className="mt-2 block text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
JavaScript for Beginners
</span>
</h1>
<p className="mt-8 text-gray-500">
Aliquet nec orci mattis amet quisque ullamcorper neque, nibh sem. At
arcu, sit dui mi, nibh dui, diam eget aliquam. Quisque id at vitae
feugiat egestas ac. Diam nulla orci at in viverra scelerisque eget.
Eleifend egestas fringilla sapien.
</p>
</div>
<div className="mt-6 prose prose-blue prose-lg text-gray-500 text-lg max-w-prose mx-auto">
<p>
Faucibus commodo massa rhoncus, volutpat. <strong>Dignissim</strong>{" "}
sed <strong>eget risus enim</strong>. Mattis mauris semper sed amet
vitae sed turpis id. Id dolor praesent donec est. Odio penatibus
risus viverra tellus varius sit neque erat velit. Faucibus commodo
massa rhoncus, volutpat. Dignissim sed eget risus enim.{" "}
<a href="#">Mattis mauris semper</a> sed amet vitae sed turpis id.
</p>
<ul>
<li>Quis elit egestas venenatis mattis dignissim.</li>
<li>
Cras cras lobortis vitae vivamus ultricies facilisis tempus.
</li>
<li>Orci in sit morbi dignissim metus diam arcu pretium.</li>
</ul>
<p>
Quis semper vulputate aliquam venenatis egestas sagittis quisque
orci. Donec commodo sit viverra aliquam porttitor ultrices gravida
eu. Tincidunt leo, elementum mattis elementum ut nisl, justo, amet,
mattis. Nunc purus, diam commodo tincidunt turpis. Amet, duis sed
elit interdum dignissim.
</p>
<h2>From beginner to expert in 30 days</h2>
<p>
Id orci tellus laoreet id ac. Dolor, aenean leo, ac etiam consequat
in. Convallis arcu ipsum urna nibh. Pharetra, euismod vitae interdum
mauris enim, consequat vulputate nibh. Maecenas pellentesque id sed
tellus mauris, ultrices mauris. Tincidunt enim cursus ridiculus mi.
Pellentesque nam sed nullam sed diam turpis ipsum eu a sed convallis
diam.
</p>
<blockquote>
<p>
Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum
urna sed consectetur neque tristique pellentesque. Blandit amet,
sed aenean erat arcu morbi.
</p>
</blockquote>
<p>
Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus
enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor
praesent donec est. Odio penatibus risus viverra tellus varius sit
neque erat velit.
</p>
<figure>
<img
className="w-full rounded-lg"
src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=facearea&w=1310&h=873&q=80&facepad=3"
alt=""
width={1310}
height={873}
/>
<figcaption>
Sagittis scelerisque nulla cursus in enim consectetur quam.
</figcaption>
</figure>
<h2>Everything you need to get up and running</h2>
<p>
Purus morbi dignissim senectus mattis <a href="#">adipiscing</a>.
Amet, massa quam varius orci dapibus volutpat cras. In amet eu
ridiculus leo sodales cursus tristique. Tincidunt sed tempus ut
viverra ridiculus non molestie. Gravida quis fringilla amet eget dui
tempor dignissim. Facilisis auctor venenatis varius nunc, congue
erat ac. Cras fermentum convallis quam.
</p>
<p>
Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus
enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor
praesent donec est. Odio penatibus risus viverra tellus varius sit
neque erat velit.
</p>
</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/typography'),
]
}
*/
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:left-0 lg:w-1/2">
<img
className="h-56 w-full object-cover lg:absolute lg:h-full"
src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80"
alt=""
/>
</div>
</div>
<div className="relative pt-12 pb-16 px-4 sm:pt-16 sm:px-6 lg:px-8 lg:max-w-7xl lg:mx-auto lg:grid lg:grid-cols-2">
<div className="lg:col-start-2 lg:pl-8">
<div className="text-base max-w-prose mx-auto lg:max-w-lg lg:ml-auto lg:mr-0">
<h2 className="leading-6 text-blue-600 font-semibold tracking-wide uppercase">
Work with us
</h2>
<h3 className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Our Process
</h3>
<p className="mt-8 text-lg text-gray-500">
Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum
urna sed consectetur neque tristique pellentesque. Blandit amet,
sed aenean erat arcu morbi.
</p>
<div className="mt-5 prose prose-blue text-gray-500">
<p>
Sollicitudin tristique eros erat odio sed vitae, consequat
turpis elementum. Lorem nibh vel, eget pretium arcu vitae. Eros
eu viverra donec ut volutpat donec laoreet quam urna.
</p>
<p>
Bibendum eu nulla feugiat justo, elit adipiscing. Ut tristique
sit nisi lorem pulvinar. Urna, laoreet fusce nibh leo. Dictum et
et et sit. Faucibus sed non gravida lectus dignissim imperdiet
a.
</p>
<p>
Dictum magnis risus phasellus vitae quam morbi. Quis lorem lorem
arcu, metus, egestas netus cursus. In.
</p>
<ul>
<li>Quis elit egestas venenatis mattis dignissim.</li>
<li>
Cras cras lobortis vitae vivamus ultricies facilisis tempus.
</li>
<li>Orci in sit morbi dignissim metus diam arcu pretium.</li>
</ul>
<p>
Rhoncus nisl, libero egestas diam fermentum dui. At quis
tincidunt vel ultricies. Vulputate aliquet velit faucibus
semper. Pellentesque in venenatis vestibulum consectetur nibh
id. In id ut tempus egestas. Enim sit aliquam nec, a. Morbi enim
fermentum lacus in. Viverra.
</p>
<h3>How we’re different</h3>
<p>
Tincidunt integer commodo, cursus etiam aliquam neque, et.
Consectetur pretium in volutpat, diam. Montes, magna cursus
nulla feugiat dignissim id lobortis amet. Laoreet sem est
phasellus eu proin massa, lectus. Diam rutrum posuere donec
ultricies non morbi. Mi a platea auctor mi.
</p>
<p>
Mauris ullamcorper imperdiet nec egestas mi quis quam ante
vulputate. Vel faucibus adipiscing lacus, eget. Nunc fermentum
id tellus donec. Ut metus odio sit sit varius non nunc orci. Eu,
mi neque, ornare suspendisse amet, nibh. Facilisi volutpat
lectus id sapien dis mauris rhoncus. Est rhoncus, interdum
imperdiet ac eros, diam mauris, tortor. Risus id sit molestie
magna.
</p>
</div>
</div>
</div>
</div>
</div>
);
}
Two Columns
/*
This example requires Tailwind CSS v2.0+
This example requires some changes to your config:
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/typography'),
]
}
*/
export default function Example() {
return (
<div className="py-16 xl:py-36 px-4 sm:px-6 lg:px-8 bg-white overflow-hidden">
<div className="max-w-max lg:max-w-7xl mx-auto">
<div className="relative z-10 mb-8 md:mb-2 md:px-6">
<div className="text-base max-w-prose lg:max-w-none">
<h2 className="leading-6 text-blue-600 font-semibold tracking-wide uppercase">
Transactions
</h2>
<p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
A better way to send money
</p>
</div>
</div>
<div className="relative">
<svg
className="hidden md:block absolute top-0 right-0 -mt-20 -mr-20"
width={404}
height={384}
fill="none"
viewBox="0 0 404 384"
aria-hidden="true"
>
<defs>
<pattern
id="95e8f2de-6d30-4b7e-8159-f791729db21b"
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={384}
fill="url(#95e8f2de-6d30-4b7e-8159-f791729db21b)"
/>
</svg>
<svg
className="hidden md:block absolute bottom-0 left-0 -mb-20 -ml-20"
width={404}
height={384}
fill="none"
viewBox="0 0 404 384"
aria-hidden="true"
>
<defs>
<pattern
id="7a00fe67-0343-4a3c-8e81-c145097a3ce0"
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={384}
fill="url(#7a00fe67-0343-4a3c-8e81-c145097a3ce0)"
/>
</svg>
<div className="relative md:bg-white md:p-6">
<div className="lg:grid lg:grid-cols-2 lg:gap-6">
<div className="prose prose-blue prose-lg text-gray-500 lg:max-w-none">
<p>
Ultrices ultricies a in odio consequat egestas rutrum. Ut
vitae aliquam in ipsum. Duis nullam placerat cursus risus
ultrices nisi, vitae tellus in. Qui non fugiat aut minus aut
rerum. Perspiciatis iusto mollitia iste minima soluta id.
</p>
<p>
Erat pellentesque dictumst ligula porttitor risus eget et
eget. Ultricies tellus felis id dignissim eget. Est augue{" "}
<a href="#">maecenas</a> risus nulla ultrices congue nunc
tortor. Eu leo risus porta integer suspendisse sed sit ligula
elit.
</p>
<ol>
<li>
Integer varius imperdiet sed interdum felis cras in nec
nunc.
</li>
<li>
Quam malesuada odio ut sit egestas. Elementum at porta
vitae.
</li>
</ol>
<p>
Amet, eu nulla id molestie quis tortor. Auctor erat justo, sed
pellentesque scelerisque interdum blandit lectus. Nec viverra
amet ac facilisis vestibulum. Vestibulum purus nibh ac
ultricies congue.
</p>
</div>
<div className="mt-6 prose prose-blue prose-lg text-gray-500 lg:mt-0">
<p>
Erat pellentesque dictumst ligula porttitor risus eget et
eget. Ultricies tellus felis id dignissim eget. Est augue
maecenas risus nulla ultrices congue nunc tortor.
</p>
<p>
Eu leo risus porta integer suspendisse sed sit ligula elit.
Elit egestas lacinia sagittis pellentesque neque dignissim
vulputate sodales. Diam sed mauris felis risus, ultricies
mauris netus tincidunt. Mauris sit eu ac tellus nibh non eget
sed accumsan. Viverra ac sed venenatis pulvinar elit. Cras
diam quis tincidunt lectus. Non mi vitae, scelerisque felis
nisi, netus amet nisl.
</p>
<p>
Eu eu mauris bibendum scelerisque adipiscing et. Justo,
elementum consectetur morbi eros, posuere ipsum tortor. Eget
cursus massa sed velit feugiat sed ut. Faucibus eros mauris
morbi aliquam nullam. Scelerisque elementum sit magna
ullamcorper dignissim pretium.
</p>
</div>
</div>
<div className="mt-8 inline-flex rounded-md shadow">
<a
href="#"
className="flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
>
Contact sales
</a>
</div>
</div>
</div>
</div>
</div>
);
}
Two Columns 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/typography'),
require('@tailwindcss/aspect-ratio'),
]
}
*/
import { CameraIcon } from "@heroicons/react/solid";
export default function Example() {
return (
<div className="bg-white overflow-hidden">
<div className="relative max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
<div className="hidden lg:block bg-gray-50 absolute top-0 bottom-0 left-3/4 w-screen" />
<div className="mx-auto text-base max-w-prose lg:grid lg:grid-cols-2 lg:gap-8 lg:max-w-none">
<div>
<h2 className="text-base text-blue-600 font-semibold tracking-wide uppercase">
Case Study
</h2>
<h3 className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Meet Whitney
</h3>
</div>
</div>
<div className="mt-8 lg:grid lg:grid-cols-2 lg:gap-8">
<div className="relative lg:row-start-1 lg:col-start-2">
<svg
className="hidden lg:block absolute top-0 right-0 -mt-20 -mr-20"
width={404}
height={384}
fill="none"
viewBox="0 0 404 384"
aria-hidden="true"
>
<defs>
<pattern
id="de316486-4a29-4312-bdfc-fbce2132a2c1"
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={384}
fill="url(#de316486-4a29-4312-bdfc-fbce2132a2c1)"
/>
</svg>
<div className="relative text-base mx-auto max-w-prose lg:max-w-none">
<figure>
<div className="aspect-w-12 aspect-h-7 lg:aspect-none">
<img
className="rounded-lg shadow-lg object-cover object-center"
src="https://images.unsplash.com/photo-1546913199-55e06682967e?ixlib=rb-1.2.1&auto=format&fit=crop&crop=focalpoint&fp-x=.735&fp-y=.55&w=1184&h=1376&q=80"
alt="Whitney leaning against a railing on a downtown street"
width={1184}
height={1376}
/>
</div>
<figcaption className="mt-3 flex text-sm text-gray-500">
<CameraIcon
className="flex-none w-5 h-5 text-gray-400"
aria-hidden="true"
/>
<span className="ml-2">Photograph by Marcus O’Leary</span>
</figcaption>
</figure>
</div>
</div>
<div className="mt-8 lg:mt-0">
<div className="text-base max-w-prose mx-auto lg:max-w-none">
<p className="text-lg text-gray-500">
Sagittis scelerisque nulla cursus in enim consectetur quam.
Dictum urna sed consectetur neque tristique pellentesque.
Blandit amet, sed aenean erat arcu morbi.
</p>
</div>
<div className="mt-5 prose prose-blue text-gray-500 mx-auto lg:max-w-none lg:row-start-1 lg:col-start-1">
<p>
Sollicitudin tristique eros erat odio sed vitae, consequat
turpis elementum. Lorem nibh vel, eget pretium arcu vitae. Eros
eu viverra donec ut volutpat donec laoreet quam urna.
</p>
<p>
Bibendum eu nulla feugiat justo, elit adipiscing. Ut tristique
sit nisi lorem pulvinar. Urna, laoreet fusce nibh leo. Dictum et
et et sit. Faucibus sed non gravida lectus dignissim imperdiet
a.
</p>
<p>
Dictum magnis risus phasellus vitae quam morbi. Quis lorem lorem
arcu, metus, egestas netus cursus. In.
</p>
<ul>
<li>Quis elit egestas venenatis mattis dignissim.</li>
<li>
Cras cras lobortis vitae vivamus ultricies facilisis tempus.
</li>
<li>Orci in sit morbi dignissim metus diam arcu pretium.</li>
</ul>
<p>
Rhoncus nisl, libero egestas diam fermentum dui. At quis
tincidunt vel ultricies. Vulputate aliquet velit faucibus
semper. Pellentesque in venenatis vestibulum consectetur nibh
id. In id ut tempus egestas. Enim sit aliquam nec, a. Morbi enim
fermentum lacus in. Viverra.
</p>
<h3>How we helped</h3>
<p>
Tincidunt integer commodo, cursus etiam aliquam neque, et.
Consectetur pretium in volutpat, diam. Montes, magna cursus
nulla feugiat dignissim id lobortis amet. Laoreet sem est
phasellus eu proin massa, lectus. Diam rutrum posuere donec
ultricies non morbi. Mi a platea auctor mi.
</p>
<p>
Sagittis scelerisque nulla cursus in enim consectetur quam.
Dictum urna sed consectetur neque tristique pellentesque.
Blandit amet, sed aenean erat arcu morbi.
</p>
</div>
</div>
</div>
</div>
</div>
);
}
Two Columns With Testimonial
/*
This example requires Tailwind CSS v2.0+
This example requires some changes to your config:
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/typography'),
]
}
*/
export default function Example() {
return (
<div className="py-16 bg-gray-50 overflow-hidden">
<div className="max-w-7xl mx-auto px-4 space-y-8 sm:px-6 lg:px-8">
<div className="text-base max-w-prose mx-auto lg:max-w-none">
<h2 className="text-base text-blue-600 font-semibold tracking-wide uppercase">
Transactions
</h2>
<p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
What makes us different
</p>
</div>
<div className="relative z-10 text-base max-w-prose mx-auto lg:max-w-5xl lg:mx-0 lg:pr-72">
<p className="text-lg text-gray-500">
Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum
urna sed consectetur neque tristique pellentesque. Blandit amet, sed
aenean erat arcu morbi. Cursus faucibus nunc nisl netus morbi vel
porttitor vitae ut. Amet vitae fames senectus vitae.
</p>
</div>
<div className="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-start">
<div className="relative z-10">
<div className="prose prose-blue text-gray-500 mx-auto lg:max-w-none">
<p>
Sollicitudin tristique eros erat odio sed vitae, consequat
turpis elementum. Lorem nibh vel, eget pretium arcu vitae. Eros
eu viverra donec ut volutpat donec laoreet quam urna.
</p>
<ul>
<li>Quis elit egestas venenatis mattis dignissim.</li>
<li>
Cras cras lobortis vitae vivamus ultricies facilisis tempus.
</li>
<li>Orci in sit morbi dignissim metus diam arcu pretium.</li>
</ul>
<p>
Rhoncus nisl, libero egestas diam fermentum dui. At quis
tincidunt vel ultricies. Vulputate aliquet velit faucibus
semper. Pellentesque in venenatis vestibulum consectetur nibh
id. In id ut tempus egestas. Enim sit aliquam nec, a. Morbi enim
fermentum lacus in. Viverra.
</p>
<h3>We’re here to help</h3>
<p>
Tincidunt integer commodo, cursus etiam aliquam neque, et.
Consectetur pretium in volutpat, diam. Montes, magna cursus
nulla feugiat dignissim id lobortis amet. Laoreet sem est
phasellus eu proin massa, lectus. Diam rutrum posuere donec
ultricies non morbi. Mi a platea auctor mi.
</p>
</div>
<div className="mt-10 flex text-base max-w-prose mx-auto lg:max-w-none">
<div className="rounded-md shadow">
<a
href="#"
className="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
>
Contact sales
</a>
</div>
<div className="rounded-md shadow ml-4">
<a
href="#"
className="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50"
>
Learn more
</a>
</div>
</div>
</div>
<div className="mt-12 relative text-base max-w-prose mx-auto lg:mt-0 lg:max-w-none">
<svg
className="absolute top-0 right-0 -mt-20 -mr-20 lg:top-auto lg:right-auto lg:bottom-1/2 lg:left-1/2 lg:mt-0 lg:mr-0 xl:top-0 xl:right-0 xl:-mt-20 xl:-mr-20"
width={404}
height={384}
fill="none"
viewBox="0 0 404 384"
aria-hidden="true"
>
<defs>
<pattern
id="bedc54bc-7371-44a2-a2bc-dc68d819ae60"
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={384}
fill="url(#bedc54bc-7371-44a2-a2bc-dc68d819ae60)"
/>
</svg>
<blockquote className="relative bg-white rounded-lg shadow-lg">
<div className="rounded-t-lg px-6 py-8 sm:px-10 sm:pt-10 sm:pb-8">
<img
src="https://tailwindui.com/img/logos/workcation-logo-indigo-600-mark-gray-800-and-blue-600-text.svg"
alt="Workcation"
className="h-8"
/>
<div className="relative text-lg text-gray-700 font-medium mt-8">
<svg
className="absolute top-0 left-0 transform -translate-x-3 -translate-y-2 h-8 w-8 text-gray-200"
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">
Tincidunt integer commodo, cursus etiam aliquam neque, et.
Consectetur pretium in volutpat, diam. Montes, magna cursus
nulla feugiat dignissim id lobortis amet. Laoreet sem est
phasellus eu proin massa, lectus.
</p>
</div>
</div>
<cite className="relative flex items-center sm:items-start bg-blue-600 rounded-b-lg not-italic py-5 px-6 sm:py-5 sm:pl-12 sm:pr-10 sm:mt-10">
<div className="relative rounded-full border-2 border-white sm:absolute sm:top-0 sm:transform sm:-translate-y-1/2">
<img
className="w-12 h-12 sm:w-20 sm:h-20 rounded-full bg-blue-300"
src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2.5&w=160&h=160&q=80"
alt=""
/>
</div>
<span className="relative ml-4 text-blue-300 font-semibold leading-6 sm:ml-24 sm:pl-1">
<p className="text-white font-semibold sm:inline">
Judith Black
</p>{" "}
<p className="sm:inline">CEO at Workcation</p>
</span>
</cite>
</blockquote>
</div>
</div>
</div>
</div>
);
}
With Testimonial And Stats
/* This example requires Tailwind CSS v2.0+ */
const stats = [
{ label: 'Founded', value: '2021' },
{ label: 'Employees', value: '5' },
{ label: 'Beta Users', value: '521' },
{ label: 'Raised', value: '$25M' },
];
export default function Example() {
return (
<div className='relative bg-white py-16 sm:py-24'>
<div className='lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:gap-24 lg:items-start'>
<div className='relative sm:py-16 lg:py-0'>
<div
aria-hidden='true'
className='hidden sm:block lg:absolute lg:inset-y-0 lg:right-0 lg:w-screen'
>
<div className='absolute inset-y-0 right-1/2 w-full bg-gray-50 rounded-r-3xl lg:right-72' />
<svg
className='absolute top-8 left-1/2 -ml-3 lg:-right-8 lg:left-auto lg:top-12'
width={404}
height={392}
fill='none'
viewBox='0 0 404 392'
>
<defs>
<pattern
id='02f20b47-fd69-4224-a62a-4c9de5c763f7'
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={392} fill='url(#02f20b47-fd69-4224-a62a-4c9de5c763f7)' />
</svg>
</div>
<div className='relative mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-0 lg:max-w-none lg:py-20'>
{/* Testimonial card*/}
<div className='relative pt-64 pb-10 rounded-2xl shadow-xl overflow-hidden'>
<img
className='absolute inset-0 h-full w-full object-cover'
src='https://images.unsplash.com/photo-1521510895919-46920266ddb3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&fp-x=0.5&fp-y=0.6&fp-z=3&width=1440&height=1440&sat=-100'
alt=''
/>
<div className='absolute inset-0 bg-blue-500 mix-blend-multiply' />
<div className='absolute inset-0 bg-gradient-to-t from-blue-600 via-blue-600 opacity-90' />
<div className='relative px-8'>
<div>
<img
className='h-12'
src='https://tailwindui.com/img/logos/workcation.svg?color=white'
alt='Workcation'
/>
</div>
<blockquote className='mt-8'>
<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-400'
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'>
Tincidunt integer commodo, cursus etiam aliquam neque, et. Consectetur pretium
in volutpat, diam. Montes, magna cursus nulla feugiat dignissim id lobortis
amet.
</p>
</div>
<footer className='mt-4'>
<p className='text-base font-semibold text-blue-200'>
Sarah Williams, CEO at Workcation
</p>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
<div className='relative mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-0'>
{/* Content area */}
<div className='pt-12 sm:pt-16 lg:pt-20'>
<h2 className='text-3xl text-gray-900 font-extrabold tracking-tight sm:text-4xl'>
On a mission to empower teams
</h2>
<div className='mt-6 text-gray-500 space-y-6'>
<p className='text-lg'>
Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed
consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi.
Cursus faucibus nunc nisl netus morbi vel porttitor vitae ut. Amet vitae fames
senectus vitae.
</p>
<p className='text-base leading-7'>
Sollicitudin tristique eros erat odio sed vitae, consequat turpis elementum. Lorem
nibh vel, eget pretium arcu vitae. Eros eu viverra donec ut volutpat donec laoreet
quam urna. Sollicitudin tristique eros erat odio sed vitae, consequat turpis
elementum. Lorem nibh vel, eget pretium arcu vitae. Eros eu viverra donec ut
volutpat donec laoreet quam urna.
</p>
<p className='text-base leading-7'>
Rhoncus nisl, libero egestas diam fermentum dui. At quis tincidunt vel ultricies.
Vulputate aliquet velit faucibus semper. Pellentesque in venenatis vestibulum
consectetur nibh id. In id ut tempus egestas. Enim sit aliquam nec, a. Morbi enim
fermentum lacus in. Viverra.
</p>
</div>
</div>
{/* Stats section */}
<div className='mt-10'>
<dl className='grid grid-cols-2 gap-x-4 gap-y-8'>
{stats.map((stat) => (
<div key={stat.label} className='border-t-2 border-gray-100 pt-6'>
<dt className='text-base font-medium text-gray-500'>{stat.label}</dt>
<dd className='text-3xl font-extrabold tracking-tight text-gray-900'>
{stat.value}
</dd>
</div>
))}
</dl>
<div className='mt-10'>
<a href='#' className='text-base font-medium text-blue-600'>
{' '}
Learn more about how we're changing the world <span aria-hidden='true'>
→
</span>{' '}
</a>
</div>
</div>
</div>
</div>
</div>
);
}