인터랙티브 컴포넌트 컴포넌트 25
머티리얼 디자인 스타일의 대화형 구성 요소로, 그리드 레이아웃, 반응형 디자인, 어두운 테마 지원을 제공합니다.
HTML 코드
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm mx-auto">
<div class="flex items-center space-x-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div>
<h2 class="text-xl font-bold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
</div>
</div>
<div class="mt-4">
<img class="w-full rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Random Image">
</div>
<div class="mt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">About Me</h3>
<p class="text-gray-600 dark:text-gray-400">I'm a passionate software engineer with experience in building web applications. I love coding and exploring new technologies.</p>
</div>
<div class="mt-4 flex justify-between">
<a href="#" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Connect</a>
<a href="#" class="px-4 py-2 border border-gray-300 text-gray-600 rounded-lg hover:border-gray-400 dark:border-gray-700 dark:text-gray-400">Message</a>
</div>
</div>