组件 Follow 按钮 Follow Button 组件

Follow Button 组件

一个复杂的跟随按钮组件,设计有 glassmorphism 效果,使用互补的配色方案,适用于电子商务应用程序,具有响应式设计和深色主题支持。

预览

HTML 代码

<div class="flex justify-center items-center h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white bg-opacity-30 backdrop-blur-lg border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg p-6 w-80">
        <div class="flex flex-col items-center">
            <img class="rounded-full w-16 h-16 mb-4" src="https://i.pravatar.cc/300" alt="User Avatar">
            <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Follow Us</h2>
            <p class="text-gray-600 dark:text-gray-300 text-center mb-4">Join our community and stay updated with the latest deals and offers!</p>
            <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">
                Follow
            </button>
            <div class="flex items-center justify-between mt-4 w-full">
                <img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=1" alt="Image 1">
                <img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=2" alt="Image 2">
                <img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=3" alt="Image 3">
            </div>
        </div>
    </div>
</div>

相关组件

Follow Button 组件

专为房地产平台设计的响应式“关注”按钮组件,具有企业蓝色配色方案、深色模式支持和微妙的交互式悬停效果。

打开

复古跟随按钮组件

一个简单、响应迅速的跟随按钮组件,具有复古/复古美学、互补配色方案和游戏用途,包括深色模式支持。

打开

粗犷主义关注按钮

一个野兽派跟随按钮,支持响应式和深色模式。

打开