CTA
Dark Version With Large Images
/* This example requires Tailwind CSS v2.0+ */
const people = [
{
name: 'Leonard Krasner',
role: 'Senior Designer',
imageUrl:
'https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80',
twitterUrl: '#',
linkedinUrl: '#',
},
// More people...
];
export default function Example() {
return (
<div className='bg-gray-900'>
<div className='mx-auto py-12 px-4 max-w-7xl sm:px-6 lg:px-8 lg:py-24'>
<div className='space-y-12'>
<div className='space-y-5 sm:space-y-4 md:max-w-xl lg:max-w-3xl xl:max-w-none'>
<h2 className='text-3xl font-extrabold text-white tracking-tight sm:text-4xl'>
Meet our team
</h2>
<p className='text-xl text-gray-300'>
Ornare sagittis, suspendisse in hendrerit quis. Sed dui aliquet lectus sit pretium
egestas vel mattis neque.
</p>
</div>
<ul className='space-y-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 lg:grid-cols-3 lg:gap-8'>
{people.map((person) => (
<li
key={person.name}
className='py-10 px-6 bg-gray-800 text-center rounded-lg xl:px-10 xl:text-left'
>
<div className='space-y-6 xl:space-y-10'>
<img
className='mx-auto h-40 w-40 rounded-full xl:w-56 xl:h-56'
src={person.imageUrl}
alt=''
/>
<div className='space-y-2 xl:flex xl:items-center xl:justify-between'>
<div className='font-medium text-lg leading-6 space-y-1'>
<h3 className='text-white'>{person.name}</h3>
<p className='text-blue-400'>{person.role}</p>
</div>
<ul className='flex justify-center space-x-5'>
<li>
<a href={person.twitterUrl} className='text-gray-400 hover:text-gray-300'>
<span className='sr-only'>Twitter</span>
<svg
className='w-5 h-5'
aria-hidden='true'
fill='currentColor'
viewBox='0 0 20 20'
>
<path d='M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84' />
</svg>
</a>
</li>
<li>
<a href={person.linkedinUrl} className='text-gray-400 hover:text-gray-300'>
<span className='sr-only'>LinkedIn</span>
<svg
className='w-5 h-5'
aria-hidden='true'
fill='currentColor'
viewBox='0 0 20 20'
>
<path
fillRule='evenodd'
d='M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z'
clipRule='evenodd'
/>
</svg>
</a>
</li>
</ul>
</div>
</div>
</li>
))}
</ul>
</div>
</div>
</div>
);
}
Full Width With Vertical Images
/*
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'),
]
}
*/
const people = [
{
name: "Whitney Francis",
role: "Copywriter",
imageUrl:
"https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80",
bio: "Ultricies massa malesuada viverra cras lobortis. Tempor orci hac ligula dapibus mauris sit ut eu. Eget turpis urna maecenas cras. Nisl dictum.",
},
// More people...
];
export default function Example() {
return (
<div className="bg-white">
<div className="mx-auto py-12 px-4 max-w-7xl sm:px-6 lg:px-8 lg:py-24">
<div className="space-y-12">
<h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
Meet our leadership
</h2>
<ul className="space-y-12 lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8 lg:gap-y-12 lg:space-y-0">
{people.map((person) => (
<li key={person.name}>
<div className="space-y-4 sm:grid sm:grid-cols-3 sm:gap-6 sm:space-y-0 lg:gap-8">
<div className="h-0 aspect-w-3 aspect-h-2 sm:aspect-w-3 sm:aspect-h-4">
<img
className="object-cover shadow-lg rounded-lg"
src={person.imageUrl}
alt=""
/>
</div>
<div className="sm:col-span-2">
<div className="space-y-4">
<div className="text-lg leading-6 font-medium space-y-1">
<h3>{person.name}</h3>
<p className="text-blue-600">{person.role}</p>
</div>
<div className="text-lg">
<p className="text-gray-500">{person.bio}</p>
</div>
</div>
</div>
</div>
</li>
))}
</ul>
</div>
</div>
</div>
);
}
Grid With Large Round Images
/* This example requires Tailwind CSS v2.0+ */
const people = [
{
name: 'Whitney Francis',
role: 'Copywriter',
imageUrl:
'https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80',
twitterUrl: '#',
linkedinUrl: '#',
},
// More people...
];
export default function Example() {
return (
<div className='bg-white'>
<div className='max-w-7xl mx-auto py-12 px-4 text-center sm:px-6 lg:px-8 lg:py-24'>
<div className='space-y-12'>
<div className='space-y-5 sm:mx-auto sm:max-w-xl sm:space-y-4 lg:max-w-5xl'>
<h2 className='text-3xl font-extrabold tracking-tight sm:text-4xl'>Meet our team</h2>
<p className='text-xl text-gray-500'>
Ornare sagittis, suspendisse in hendrerit quis. Sed dui aliquet lectus sit pretium
egestas vel mattis neque.
</p>
</div>
<ul className='mx-auto space-y-16 sm:grid sm:grid-cols-2 sm:gap-16 sm:space-y-0 lg:grid-cols-3 lg:max-w-5xl'>
{people.map((person) => (
<li key={person.name}>
<div className='space-y-6'>
<img
className='mx-auto h-40 w-40 rounded-full xl:w-56 xl:h-56'
src={person.imageUrl}
alt=''
/>
<div className='space-y-2'>
<div className='text-lg leading-6 font-medium space-y-1'>
<h3>{person.name}</h3>
<p className='text-blue-600'>{person.role}</p>
</div>
<ul className='flex justify-center space-x-5'>
<li>
<a href={person.twitterUrl} className='text-gray-400 hover:text-gray-500'>
<span className='sr-only'>Twitter</span>
<svg
className='w-5 h-5'
aria-hidden='true'
fill='currentColor'
viewBox='0 0 20 20'
>
<path d='M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84' />
</svg>
</a>
</li>
<li>
<a href={person.linkedinUrl} className='text-gray-400 hover:text-gray-500'>
<span className='sr-only'>LinkedIn</span>
<svg
className='w-5 h-5'
aria-hidden='true'
fill='currentColor'
viewBox='0 0 20 20'
>
<path
fillRule='evenodd'
d='M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z'
clipRule='evenodd'
/>
</svg>
</a>
</li>
</ul>
</div>
</div>
</li>
))}
</ul>
</div>
</div>
</div>
);
}
Grid With Round Images
/* This example requires Tailwind CSS v2.0+ */
const people = [
{
name: 'Michael Foster',
role: 'Co-Founder / CTO',
imageUrl:
'https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80',
},
// More people...
];
export default function Example() {
return (
<div className='bg-white'>
<div className='max-w-7xl mx-auto py-12 px-4 text-center sm:px-6 lg:px-8 lg:py-24'>
<div className='space-y-8 sm:space-y-12'>
<div className='space-y-5 sm:mx-auto sm:max-w-xl sm:space-y-4 lg:max-w-5xl'>
<h2 className='text-3xl font-extrabold tracking-tight sm:text-4xl'>The People</h2>
<p className='text-xl text-gray-500'>
Risus velit condimentum vitae tincidunt tincidunt. Mauris ridiculus fusce amet urna
nunc. Ut nisl ornare diam in.
</p>
</div>
<ul className='mx-auto grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-4 md:gap-x-6 lg:max-w-5xl lg:gap-x-8 lg:gap-y-12 xl:grid-cols-6'>
{people.map((person) => (
<li key={person.name}>
<div className='space-y-4'>
<img
className='mx-auto h-20 w-20 rounded-full lg:w-24 lg:h-24'
src={person.imageUrl}
alt=''
/>
<div className='space-y-2'>
<div className='text-xs font-medium lg:text-sm'>
<h3>{person.name}</h3>
<p className='text-blue-600'>{person.role}</p>
</div>
</div>
</div>
</li>
))}
</ul>
</div>
</div>
</div>
);
}
With Image And Short Paragraph
/*
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'),
]
}
*/
const people = [
{
name: "Emma Dorsey",
role: "Senior Front-end Developer",
imageUrl:
"https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80",
bio: "Ultricies massa malesuada viverra cras lobortis. Tempor orci hac ligula dapibus mauris sit ut eu. Eget turpis urna maecenas cras. Nisl dictum.",
twitterUrl: "#",
linkedinUrl: "#",
},
// More people...
];
export default function Example() {
return (
<div className="bg-white">
<div className="mx-auto py-12 px-4 max-w-7xl sm:px-6 lg:px-8 lg:py-24">
<div className="space-y-12 lg:grid lg:grid-cols-3 lg:gap-8 lg:space-y-0">
<div className="space-y-5 sm:space-y-4">
<h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
Our Team
</h2>
<p className="text-xl text-gray-500">
Nulla quam felis, enim faucibus proin velit, ornare id pretium.
Augue ultrices sed arcu condimentum vestibulum suspendisse.
Volutpat eu faucibus vivamus eget bibendum cras.
</p>
</div>
<div className="lg:col-span-2">
<ul className="space-y-12 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 sm:space-y-0 lg:gap-x-8">
{people.map((person) => (
<li key={person.name}>
<div className="space-y-4">
<div className="aspect-w-3 aspect-h-2">
<img
className="object-cover shadow-lg rounded-lg"
src={person.imageUrl}
alt=""
/>
</div>
<div className="text-lg leading-6 font-medium space-y-1">
<h3>{person.name}</h3>
<p className="text-blue-600">{person.role}</p>
</div>
<div className="text-lg">
<p className="text-gray-500">{person.bio}</p>
</div>
<ul className="flex space-x-5">
<li>
<a
href={person.twitterUrl}
className="text-gray-400 hover:text-gray-500"
>
<span className="sr-only">Twitter</span>
<svg
className="w-5 h-5"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
</li>
<li>
<a
href={person.linkedinUrl}
className="text-gray-400 hover:text-gray-500"
>
<span className="sr-only">LinkedIn</span>
<svg
className="w-5 h-5"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
clipRule="evenodd"
/>
</svg>
</a>
</li>
</ul>
</div>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
);
}
With Large Images
/*
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'),
]
}
*/
const people = [
{
name: "Lindsay Walton",
role: "Front-end Developer",
imageUrl:
"https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80",
twitterUrl: "#",
linkedinUrl: "#",
},
// More people...
];
export default function Example() {
return (
<div className="bg-white">
<div className="mx-auto py-12 px-4 max-w-7xl sm:px-6 lg:px-8 lg:py-24">
<div className="space-y-12">
<div className="space-y-5 sm:space-y-4 md:max-w-xl lg:max-w-3xl xl:max-w-none">
<h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
Our Team
</h2>
<p className="text-xl text-gray-500">
Odio nisi, lectus dis nulla. Ultrices maecenas vitae rutrum dolor
ultricies donec risus sodales. Tempus quis et.
</p>
</div>
<ul className="space-y-12 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 sm:space-y-0 lg:grid-cols-3 lg:gap-x-8">
{people.map((person) => (
<li key={person.name}>
<div className="space-y-4">
<div className="aspect-w-3 aspect-h-2">
<img
className="object-cover shadow-lg rounded-lg"
src={person.imageUrl}
alt=""
/>
</div>
<div className="space-y-2">
<div className="text-lg leading-6 font-medium space-y-1">
<h3>{person.name}</h3>
<p className="text-blue-600">{person.role}</p>
</div>
<ul className="flex space-x-5">
<li>
<a
href={person.twitterUrl}
className="text-gray-400 hover:text-gray-500"
>
<span className="sr-only">Twitter</span>
<svg
className="w-5 h-5"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
</li>
<li>
<a
href={person.linkedinUrl}
className="text-gray-400 hover:text-gray-500"
>
<span className="sr-only">LinkedIn</span>
<svg
className="w-5 h-5"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
clipRule="evenodd"
/>
</svg>
</a>
</li>
</ul>
</div>
</div>
</li>
))}
</ul>
</div>
</div>
</div>
);
}
With Small Images
/* This example requires Tailwind CSS v2.0+ */
const people = [
{
name: 'Leslie Alexander',
role: 'Co-Founder / CEO',
imageUrl:
'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',
},
// More people...
];
export default function Example() {
return (
<div className='bg-white'>
<div className='mx-auto py-12 px-4 max-w-7xl sm:px-6 lg:px-8 lg:py-24'>
<div className='grid grid-cols-1 gap-12 lg:grid-cols-3 lg:gap-8'>
<div className='space-y-5 sm:space-y-4'>
<h2 className='text-3xl font-extrabold tracking-tight sm:text-4xl'>
Meet our leadership
</h2>
<p className='text-xl text-gray-500'>
Libero fames augue nisl porttitor nisi, quis. Id ac elit odio vitae elementum enim
vitae ullamcorper suspendisse. Vivamus fringilla.
</p>
</div>
<div className='lg:col-span-2'>
<ul className='space-y-12 sm:grid sm:grid-cols-2 sm:gap-12 sm:space-y-0 lg:gap-x-8'>
{people.map((person) => (
<li key={person.name}>
<div className='flex items-center space-x-4 lg:space-x-6'>
<img
className='w-16 h-16 rounded-full lg:w-20 lg:h-20'
src={person.imageUrl}
alt=''
/>
<div className='font-medium text-lg leading-6 space-y-1'>
<h3>{person.name}</h3>
<p className='text-blue-600'>{person.role}</p>
</div>
</div>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
);
}
With Vertical Images
/*
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'),
]
}
*/
const people = [
{
name: "Leslie Alexander",
role: "Co-Founder / CEO",
imageUrl:
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80",
bio: "Ultricies massa malesuada viverra cras lobortis. Tempor orci hac ligula dapibus mauris sit ut eu. Eget turpis urna maecenas cras. Nisl dictum.",
twitterUrl: "#",
linkedinUrl: "#",
},
// More people...
];
export default function Example() {
return (
<div className="bg-white">
<div className="mx-auto py-12 px-4 max-w-7xl sm:px-6 lg:px-8 lg:py-24">
<div className="space-y-12 lg:grid lg:grid-cols-3 lg:gap-8 lg:space-y-0">
<div className="space-y-5 sm:space-y-4">
<h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
About Us
</h2>
<p className="text-xl text-gray-500">
Nulla quam felis, enim faucibus proin velit, ornare id pretium.
Augue ultrices sed arcu condimentum vestibulum suspendisse.
Volutpat eu faucibus vivamus eget bibendum cras.
</p>
</div>
<div className="lg:col-span-2">
<ul className="space-y-12 sm:divide-y sm:divide-gray-200 sm:space-y-0 sm:-mt-8 lg:gap-x-8 lg:space-y-0">
{people.map((person) => (
<li key={person.name} className="sm:py-8">
<div className="space-y-4 sm:grid sm:grid-cols-3 sm:items-start sm:gap-6 sm:space-y-0">
<div className="aspect-w-3 aspect-h-2 sm:aspect-w-3 sm:aspect-h-4">
<img
className="object-cover shadow-lg rounded-lg"
src={person.imageUrl}
alt=""
/>
</div>
<div className="sm:col-span-2">
<div className="space-y-4">
<div className="text-lg leading-6 font-medium space-y-1">
<h3>{person.name}</h3>
<p className="text-blue-600">{person.role}</p>
</div>
<div className="text-lg">
<p className="text-gray-500">{person.bio}</p>
</div>
<ul className="flex space-x-5">
<li>
<a
href={person.twitterUrl}
className="text-gray-400 hover:text-gray-500"
>
<span className="sr-only">Twitter</span>
<svg
className="w-5 h-5"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
</li>
<li>
<a
href={person.linkedinUrl}
className="text-gray-400 hover:text-gray-500"
>
<span className="sr-only">LinkedIn</span>
<svg
className="w-5 h-5"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
clipRule="evenodd"
/>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
);
}