소셜 구성 요소
젖빛 유리와 같은 반투명 요소와 흐림 효과, 반응형 효과 및 어두운 테마 지원이 있는 glassmorphism 디자인을 특징으로 하는 웹 구성 요소입니다.
HTML 코드
<div class="flex justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-500">
<div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-80 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-lg w-full">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4 text-center">Connect with Us</h2>
<div class="flex items-center justify-around flex-wrap mb-4">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/80/80?random=1" alt="User Avatar" class="rounded-full mb-2">
<p class="text-gray-800 dark:text-white">User 1</p>
<a href="#" class="text-blue-500 hover:underline">Follow</a>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/80/80?random=2" alt="User Avatar" class="rounded-full mb-2">
<p class="text-gray-800 dark:text-white">User 2</p>
<a href="#" class="text-blue-500 hover:underline">Follow</a>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/80/80?random=3" alt="User Avatar" class="rounded-full mb-2">
<p class="text-gray-800 dark:text-white">User 3</p>
<a href="#" class="text-blue-500 hover:underline">Follow</a>
</div>
</div>
<div class="text-center">
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300">View More</button>
</div>
</div>
</div>관련 구성 요소
소셜 구성 요소 구성 요소
Social Components 스큐어모픽 디자인, 보색 구성표 및 적당한 복잡성을 가진 구성 요소입니다. 비즈니스/기업 웹사이트용으로 설계되었으며 반응형이며 어두운 테마를 지원합니다.
소셜 구성 요소 구성 요소
Tailwind CSS로 구현된 유사한 색 구성표를 가진 잔인하고 복잡하며 전자 상거래 중심의 소셜 구성 요소입니다. 반응이 빠르며 다크 모드를 지원합니다.