OAuth 按钮组件
一个响应式的OAuth按钮组件，采用3D设计风格，支持暗色主题，并配有占位图像。该组件包含Google、Facebook、Twitter和LinkedIn的按钮，具有悬停效果以增加深度和互动性。
HTML 代码
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<h1 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Sign in with</h1>
<div class="space-y-4">
<a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-600 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">
<img src="https://picsum.photos/20/20?random=1" alt="Google" class="rounded-full mr-2" />
Google
</a>
<a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-700 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-600 dark:bg-blue-800 dark:hover:bg-blue-700">
<img src="https://picsum.photos/20/20?random=2" alt="Facebook" class="rounded-full mr-2" />
Facebook
</a>
<a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-500 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500">
<img src="https://picsum.photos/20/20?random=3" alt="Twitter" class="rounded-full mr-2" />
Twitter
</a>
<a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-900 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-800 dark:bg-blue-900 dark:hover:bg-blue-800">
<img src="https://picsum.photos/20/20?random=4" alt="LinkedIn" class="rounded-full mr-2" />
LinkedIn
</a>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
color: #ffffff;
}
}
</style>