3D 소셜 작가 카드
블로그/컨텐츠 섹션용으로 설계된 3D 효과 및 소셜 미디어 링크가 있는 반응형 작성자 카드 구성 요소입니다. 보색 구성표(신원/정보의 경우 파란색, 악센트/CTA의 경우 주황색)가 특징이며, 다크 모드를 지원하고, 스타일링에 Tailwind CSS를 사용합니다. 디자인은 기본 레이아웃과 최소한의 요소로 구성된 '단순한' 복잡성이지만 '3D 디자인'은 그림자와 호버 효과를 사용하여 깊이와 몰입도를 위해 통합되었습니다. 구성 요소에는 아바타, 작성자 이름, 짧은 약력, 소셜 미디어 아이콘 및 'Follow Me' 클릭 유도문안 버튼이 포함됩니다. randomuser.me 아바타를 자리 표시자로 사용합니다.
HTML 코드
<!-- Ensure Tailwind CSS is included in your project -->
<!-- This is a wrapper for demonstration purposes, the actual component starts with the card -->
<div class="min-h-screen bg-gray-100 dark:bg-slate-900 flex items-center justify-center p-4 antialiased">
<!-- Start of Social Author Card Component -->
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl p-6 sm:p-8 w-full max-w-md transform hover:scale-[1.01] transition-transform duration-300">
<!-- Avatar -->
<div class="flex justify-center mb-5">
<img class="w-24 h-24 md:w-28 md:h-28 rounded-full shadow-xl border-4 border-orange-500 dark:border-orange-600 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
</div>
<!-- Author Info -->
<div class="text-center">
<h2 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-1">Sarah Meyers</h2>
<p class="text-sm text-gray-500 dark:text-slate-400 mb-4">Lead Content Creator</p>
<p class="text-gray-700 dark:text-slate-300 text-sm sm:text-base leading-relaxed mb-6 px-2 sm:px-4">
Crafting stories and sharing insights on modern web development and digital trends. Join me on my journey!
</p>
</div>
<!-- Social Links -->
<div class="flex justify-center space-x-3 sm:space-x-4 mb-8">
<!-- Twitter/X Icon -->
<a href="#" title="Twitter" class="group w-10 h-10 sm:w-11 sm:h-11 flex items-center justify-center rounded-full bg-slate-100 text-slate-600 hover:bg-blue-500 hover:text-white dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-blue-500 dark:hover:text-white shadow-md hover:shadow-lg transform hover:-translate-y-0.5 active:translate-y-px transition-all duration-150">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 sm:w-6 sm:h-6">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
<!-- LinkedIn Icon -->
<a href="#" title="LinkedIn" class="group w-10 h-10 sm:w-11 sm:h-11 flex items-center justify-center rounded-full bg-slate-100 text-slate-600 hover:bg-blue-500 hover:text-white dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-blue-500 dark:hover:text-white shadow-md hover:shadow-lg transform hover:-translate-y-0.5 active:translate-y-px transition-all duration-150">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 sm:w-6 sm:h-6">
<path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3v9zM6.5 8.25A1.75 1.75 0 118.25 6.5 1.75 1.75 0 016.5 8.25zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66V19z"></path>
</svg>
</a>
<!-- GitHub Icon -->
<a href="#" title="GitHub" class="group w-10 h-10 sm:w-11 sm:h-11 flex items-center justify-center rounded-full bg-slate-100 text-slate-600 hover:bg-blue-500 hover:text-white dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-blue-500 dark:hover:text-white shadow-md hover:shadow-lg transform hover:-translate-y-0.5 active:translate-y-px transition-all duration-150">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 sm:w-6 sm:h-6">
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.036 1.531 1.036.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.853 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.001 10.001 0 0022 12.017C22 6.484 17.522 2 12 2z"></path>
</svg>
</a>
</div>
<!-- Follow Button -->
<div class="flex justify-center">
<button class="w-full sm:w-auto px-8 py-3 bg-orange-500 hover:bg-orange-600 active:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 dark:active:bg-orange-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 active:translate-y-px active:shadow-md transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-500 focus:ring-opacity-75">
Follow Me
</button>
</div>
</div>
<!-- End of Social Author Card Component -->
</div>