用于社交媒体的玻璃拟态关注按钮组件,支持深色主题。
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 dark:from-gray-800 dark:to-gray-900"> <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg border border-gray-100 border-opacity-20 dark:bg-gray-700 dark:bg-opacity-10 dark:border-gray-600 dark:border-opacity-20"> <div class="flex items-center space-x-4"> <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar"> <div> <h3 class="text-lg font-semibold text-white dark:text-gray-200">John Doe</h3> <p class="text-sm text-gray-200 dark:text-gray-400">@johndoe</p> </div> <button class="ml-auto px-6 py-2 bg-blue-500 text-white font-semibold rounded-full hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105 dark:bg-blue-600 dark:hover:bg-blue-700"> Follow </button> </div> </div> </div>
一个响应式的关注按钮组件,支持深色主题和微交互,专为使用Tailwind CSS的社交媒体应用设计。具有单色配色方案和复杂的互动元素。
一个简单的关注按钮,具有材料设计风格、响应式效果和暗模式支持。
一个简单、响应迅速的跟随按钮组件,具有复古/复古美学、互补配色方案和游戏用途,包括深色模式支持。