구성 요소 팔로우 버튼 Follow Button 구성 요소

Follow Button 구성 요소

유리 형태 스타일과 생생한 색상을 갖춘 복잡하고 반응이 빠른 팔로우 버튼 구성 요소로, Tailwind CSS를 사용하여 다크 모드를 지원하는 비즈니스 웹 사이트를 위해 설계되었습니다.

미리 보기

HTML 코드

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 px-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800/50 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 backdrop-filter backdrop-blur-lg glass glass-vibrant">
    <div class="flex flex-col items-center">
      <img class="w-24 h-24 rounded-full mb-4 object-cover border-4 border-blue-500 dark:border-teal-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-1">John Doe</h2>
      <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Senior Developer</p>
      <button class="px-6 py-2 rounded-full bg-gradient-to-r from-blue-500 to-teal-500 text-white font-semibold shadow-lg transform transition duration-300 hover:scale-105 hover:from-blue-600 hover:to-teal-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:focus:ring-teal-400">
        Follow
      </button>
      <div class="flex mt-6 space-x-4 text-gray-700 dark:text-gray-300">
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0c0 .993-.241 1.929-.668 2.754l-1.524-1.524A3 3 0 0010 9a3 3 0 00-2.254.98l-1.524 1.524A8.01 8.01 0 012 10c0-4.411 3.589-8 8-8s8 3.589 8 8z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M10 12a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
          </svg>
          <span>1.2k Followers</span>
        </div>
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path d="M11 6a3 3 0 11-6 0 3 3 0 016 0zM14 10a4 4 0 01-8 0H5a6 6 0 0012 0h-1z" />
          </svg>
          <span>250 Following</span>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.glass {
  background-color: rgba(255, 255, 255, 0.2);
}
.dark .glass {
    background-color: rgba(50, 50, 50, 0.2);
}
.glass-vibrant {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
</style>

관련 구성 요소

Follow Button 구성 요소

마이크로 인터랙션, 세피아/갈색 색 구성표, 반응형 디자인 및 다크 모드 지원을 갖춘 복잡한 '팔로우' 버튼 구성 요소로 블로그/콘텐츠 플랫폼에 적합합니다.

열다

Follow Button 구성 요소

부동산 플랫폼용으로 설계된 반응형 '팔로우' 버튼 구성 요소로, 기업용 파란색 색 구성표, 다크 모드 지원 및 미묘한 대화형 호버 효과를 특징으로 합니다.

열다

Neumorphic Follow Button 컴포넌트

일몰/따뜻한 톤의 복잡한 뉴모픽 스타일의 팔로우 버튼 구성 요소로, 부동산 플랫폼용으로 설계되었습니다. 반응형 디자인과 다크 모드 지원이 특징이며, 미묘한 그림자를 사용하여 요소가 배경에서 돌출된 것처럼 보입니다.

열다