Neumorphic Follow Button 컴포넌트
오션/블루 톤의 복잡한 인터랙티브 뉴모픽 팔로우 버튼 컴포넌트로, 소셜 미디어 인터페이스를 위해 설계되었습니다. 다크 모드 지원 및 반응형 디자인이 포함되어 있습니다.
HTML 코드
<div class="flex items-center justify-center min-h-screen p-4 bg-blue-100 dark:bg-gray-900 transition-colors duration-300">
<!-- Neumorphic Follow Card Container -->
<div class="w-full max-w-sm p-6 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-300">
<div class="flex flex-col items-center space-y-5">
<!-- Profile Picture and Name -->
<div class="relative">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile Picture" class="w-24 h-24 rounded-full object-cover shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition-colors duration-300">
<span class="absolute bottom-0 right-0 w-6 h-6 bg-green-400 rounded-full border-2 border-blue-100 dark:border-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark"></span>
</div>
<div class="text-center">
<h2 class="text-2xl font-bold text-blue-900 dark:text-blue-100">Jane Doe</h2>
<p class="text-blue-700 dark:text-blue-300">@janedoe_official</p>
<p class="text-sm text-blue-600 dark:text-blue-400 mt-2">UI/UX Designer | Building beautiful experiences.</p>
</div>
<!-- Stats Section -->
<div class="grid grid-cols-3 gap-4 w-full mt-4">
<div class="flex flex-col items-center p-3 rounded-xl bg-blue-50 dark:bg-gray-700 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm transition-colors duration-300">
<span class="text-blue-900 dark:text-blue-100 font-semibold text-lg">1.2k</span>
<span class="text-blue-700 dark:text-blue-300 text-xs">Posts</span>
</div>
<div class="flex flex-col items-center p-3 rounded-xl bg-blue-50 dark:bg-gray-700 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm transition-colors duration-300">
<span class="text-blue-900 dark:text-blue-100 font-semibold text-lg">5.8k</span>
<span class="text-blue-700 dark:text-blue-300 text-xs">Followers</span>
</div>
<div class="flex flex-col items-center p-3 rounded-xl bg-blue-50 dark:bg-gray-700 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm transition-colors duration-300">
<span class="text-blue-900 dark:text-blue-100 font-semibold text-lg">345</span>
<span class="text-blue-700 dark:text-blue-300 text-xs">Following</span>
</div>
</div>
<!-- Follow Button Group -->
<div class="flex flex-col md:flex-row gap-4 w-full mt-5">
<button class="flex-1 py-3 px-6 rounded-full text-lg font-semibold
bg-gradient-to-br from-blue-500 to-blue-700 text-white
hover:from-blue-600 hover:to-blue-800
shadow-neumorphic-blue dark:shadow-neumorphic-dark-blue
active:shadow-neumorphic-blue-inset dark:active:shadow-neumorphic-dark-blue-inset
transition-all duration-200 ease-in-out
focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75
dark:text-blue-100">
Follow
</button>
<button class="flex-1 py-3 px-6 rounded-full text-lg font-semibold
bg-blue-100 dark:bg-gray-800 text-blue-800 dark:text-blue-200
shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:bg-blue-200 dark:hover:bg-gray-700
active:shadow-neumorphic-light-inset dark:active:shadow-neumorphic-dark-inset
transition-all duration-200 ease-in-out
focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75
dark:hover:text-blue-100">
Message
</button>
</div>
<!-- Social Icons -->
<div class="flex justify-center space-x-6 mt-6 w-full">
<a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-50 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-light-inset dark:hover:shadow-neumorphic-dark-inset text-blue-700 dark:text-blue-300 transition-all duration-200 ease-in-out">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M22.23 6.09c.01.59.01 1.18 0 1.77 0 5.43-4.14 11.66-11.67 11.66A11.68 11.68 0 010 19.34c1.61.18 3.23-.27 4.67-1.35.03.02.05.04.08.06A8.25 8.25 0 0010.5 17c-2.45-.4-4.5-1.63-5.97-3.69-.1-.1-.13-.2-.17-.3A.32.32 0 014 12.82c.04.01.07.03.1.04.57.24 1.18.39 1.8.46-1.92-1.3-3.19-3.52-3.19-6.09 0-1.34.37-2.6.98-3.77A8.34 8.34 0 0010.5 9.4c-.05-1.5-.77-2.88-1.95-3.87.5-.1 1-.16 1.5-.16A8.24 8.24 0 0117.84 8.3c1.78-.57 3.42-1.6 4.79-2.9v-.01zM10.5 2C5.83 2 2 5.8 2 10.5c0 3.73 2.45 6.94 5.82 8.37A10.12 10.12 0 0010.5 20c5.79 0 10.5-4.71 10.5-10.5S16.29 2 10.5 2zm6.27 4.28c-.01.02-.02.04-.04.05.02-.01.03-.03.04-.05z"></path>
</svg>
</a>
<a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-50 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-light-inset dark:hover:shadow-neumorphic-dark-inset text-blue-700 dark:text-blue-300 transition-all duration-200 ease-in-out">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.502 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-50 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-light-inset dark:hover:shadow-neumorphic-dark-inset text-blue-700 dark:text-blue-300 transition-all duration-200 ease-in-out">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.24 20.3c-.09.02-.19.03-.29.04a2.91 2.91 0 01-1.89-.66c-.34-.23-.62-.51-.83-.84l-.11-.18A.75.75 0 009 18.23l-.1-.08c-.16-.14-.29-.28-.39-.42-.08-.12-.13-.23-.16-.33l-.04-.13a.75.75 0 00-.73-.55h-.01a.75.75 0 00-.63.29c-.06.07-.12.16-.16.27-.05.11-.08.23-.08.36 0 .1.01.2.02.29.02.1.04.2.07.29.03.09.07.17.11.26.04.09.09.18.15.26.06.09.13.17.2.25.07.09.15.16.23.23l.11.1c.09.08.18.15.28.22.1.07.2.13.31.18.06.03.12.06.19.08.08.02.16.03.24.03.05 0 .1-.01.15-.02.05-.01.09-.02.14-.03.04-.01.08-.02.1-.03l.03-.01v-.01a.15.15 0 01.03-.02l.02-.01a.75.75 0 00.32-.98.75.75 0 00-.98-.32l-.02.01-.03.02a.15.15 0 01-.03.02l-.1.05-.18.06-.29-.1c-.1-.04-.19-.09-.28-.15-.08-.07-.16-.15-.22-.24-.07-.1-.13-.2-.17-.3-.05-.1-.08-.2-.11-.3-.02-.08-.03-.17-.03-.26 0-.27.1-.5.3-.65.2-.16.48-.25.75-.25.21 0 .4.07.57.18.17.11.3.26.4.45.06.11.1.23.14.36.03.12.05.25.05.38 0 .22-.04.42-.12.6-.08.19-.19.35-.33.5-.09.09-.19.16-.3.21-.08.03-.16.05-.24.05-.04 0-.08-.01-.12-.02-.04-.01-.07-.02-.1-.04a.75.75 0 00-.9-.57.75.75 0 00-.57.9c.07.16.14.3.24.43.09.12.2.24.32.34.12.1.25.18.39.24.13.06.28.1.42.11.16.02.32.02.49.02.31 0 .6-.04.88-.13.28-.09.53-.22.75-.4.22-.17.4-.39.54-.64.14-.25.24-.53.29-.83.05-.3.07-.63.07-.98 0-.31-.03-.62-.09-.92-.06-.3-.15-.59-.26-.87-.11-.29-.25-.56-.41-.81-.17-.25-.36-.48-.58-.69-.21-.21-.45-.4-.7-.57-.26-.17-.54-.3-.84-.4-.3-.1-.63-.15-.97-.15-.31 0-.6.04-.88.13-.28.09-.53.22-.75.4-.22.17-.4.39-.54.64-.14.25-.24.53-.29.83-.05.3-.07.63-.07.98 0 .31.03.62.09.92.06.3.15.59.26.87.11.29.25.56.41.81.17.25.36.48.58.69.21.21.45.4.7.57.26.17.54.3.84.4.3.1.63.15.97.15zM22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<!-- Custom Tailwind CSS Configuration for Neumorphism -->
<style>
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #98b7e0, -6px -6px 12px #d2f7ff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #181c2d, -6px -6px 12px #444c68;
}
.shadow-neumorphic-light-inset {
box-shadow: inset 4px 4px 8px #98b7e0, inset -4px -4px 8px #d2f7ff;
}
.dark .shadow-neumorphic-dark-inset {
box-shadow: inset 4px 4px 8px #181c2d, inset -4px -4px 8px #444c68;
}
.shadow-neumorphic-light-sm {
box-shadow: 3px 3px 6px #a8cce6, -3px -3px 6px #c4ecff;
}
.dark .shadow-neumorphic-dark-sm {
box-shadow: 3px 3px 6px #1c2134, -3px -3px 6px #3a415b;
}
.shadow-neumorphic-blue {
box-shadow: 8px 8px 16px #0a5697, -8px -8px 16px #1072c4;
}
.dark .shadow-neumorphic-dark-blue {
box-shadow: 8px 8px 16px rgba(0,0,0,0.4), -8px -8px 16px rgba(100,100,100,0.2);
}
.shadow-neumorphic-blue-inset {
box-shadow: inset 5px 5px 10px #0a5697, inset -5px -5px 10px #1072c4;
}
.dark .shadow-neumorphic-dark-blue-inset {
box-shadow: inset 5px 5px 10px rgba(0,0,0,0.6), inset -5px -5px 10px rgba(100,100,100,0.3);
}
</style>
</div>
</div>관련 구성 요소
Follow Button 구성 요소
이벤트 및 컨퍼런스 웹 사이트에 적합한 반응형 팔로우/언팔로우 버튼 구성 요소로, 그라디언트 전환, 다크 모드 지원 및 밝은 강조 색상을 특징으로 합니다. 여기에는 미묘한 호버 효과가 포함되어 있으며 클릭 시 텍스트와 배경이 변경됩니다(시뮬레이션됨).
Follow Button 구성 요소
유리 형태 스타일과 생생한 색상을 갖춘 복잡하고 반응이 빠른 팔로우 버튼 구성 요소로, Tailwind CSS를 사용하여 다크 모드를 지원하는 비즈니스 웹 사이트를 위해 설계되었습니다.