HTML 代码
<section class="bg-white text-gray-700 dark:bg-gray-900 dark:text-gray-300">
<div class="container mx-auto px-6 py-20">
<h2 class="text-center text-3xl font-semibold capitalize lg:text-4xl">
Our Functional Components
</h2>
<div class="mt-8 grid grid-cols-1 gap-8 md:grid-cols-2 xl:grid-cols-3">
<div
class="dark:hover:border-primary-500 rounded-xl border-2 border-transparent px-12 py-8 transition-colors duration-300 hover:border-blue-500"
>
<div class="flex flex-col items-center">
<img
class="h-14 w-14 rounded-full object-cover"
src="https://randomuser.me/api/portraits/men/1.jpg"
alt=""
/>
<h3 class="mt-4 text-2xl font-semibold capitalize dark:text-white">
Component One
</h3>
<p class="mt-2 text-center capitalize">
Lorem ipsum dolor sit amet consectetur.
</p>
<div class="mt-4 flex">
<a href="#" class="mx-2 text-gray-600 dark:text-gray-300">
<svg
class="h-5 w-5 fill-current"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 2C6.48 2 2 6.48 2 12C2 16.42 4.87 20.17 8.84 21.5V14.91H6.05V12H8.84V9.31C8.84 6.59 10.42 5.07 13.04 5.07C14.35 5.07 15.52 5.31 15.94 5.31V7.8H14.54C13.17 7.8 12.89 8.5 12.89 9.41V12H15.39L14.71 14.91H12.89V21.5C16.88 20.17 19.76 16.42 19.76 12C19.76 6.48 15.28 2 12 2Z"
></path>
</svg>
</a>
</div>
</div>
</div>
<div
class="dark:hover:border-primary-500 rounded-xl border-2 border-transparent px-12 py-8 transition-colors duration-300 hover:border-blue-500"
>
<div class="flex flex-col items-center">
<img
class="h-14 w-14 rounded-full object-cover"
src="https://randomuser.me/api/portraits/women/1.jpg"
alt=""
/>
<h3 class="dark:text-white mt-4 text-2xl font-semibold capitalize">
Component Two
</h3>
<p class="mt-2 text-center capitalize">
Lorem ipsum dolor sit amet consectetur.
</p>
<div class="mt-4 flex">
<a href="#" class="mx-2 text-gray-600 dark:text-gray-300">
<svg
class="h-5 w-5 fill-current"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 2C6.48 2 2 6.48 2 12C2 16.42 4.87 20.17 8.84 21.5V14.91H6.05V12H8.84V9.31C8.84 6.59 10.42 5.07 13.04 5.07C14.35 5.07 15.52 5.31 15.94 5.31V7.8H14.54C13.17 7.8 12.89 8.5 12.89 9.41V12H15.39L14.71 14.91H12.89V21.5C16.88 20.17 19.76 16.42 19.76 12C19.76 6.48 15.28 2 12 2Z"
></path>
</svg>
</a>
</div>
</div>
</div>
<div
class="dark:hover:border-primary-500 rounded-xl border-2 border-transparent px-12 py-8 transition-colors duration-300 hover:border-blue-500"
>
<div class="flex flex-col items-center">
<img
class="h-14 w-14 rounded-full object-cover"
src="https://randomuser.me/api/portraits/men/2.jpg"
alt=""
/>
<h3 class="dark:text-white mt-4 text-2xl font-semibold capitalize">
Component Three
</h3>
<p class="mt-2 text-center capitalize">
Lorem ipsum dolor sit amet consectetur.
</p>
<div class="mt-4 flex">
<a href="#" class="mx-2 text-gray-600 dark:text-gray-300">
<svg
class="h-5 w-5 fill-current"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 2C6.48 2 2 6.48 2 12C2 16.42 4.87 20.17 8.84 21.5V14.91H6.05V12H8.84V9.31C8.84 6.59 10.42 5.07 13.04 5.07C14.35 5.07 15.52 5.31 15.94 5.31V7.8H14.54C13.17 7.8 12.89 8.5 12.89 9.41V12H15.39L14.71 14.91H12.89V21.5C16.88 20.17 19.76 16.42 19.76 12C19.76 6.48 15.28 2 12 2Z"
></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</section>