OAuth 按钮组件
一个新拟态风格的OAuth按钮组件，专为博客或内容消费平台设计。该组件包含多个OAuth提供者的按钮，具有响应式设计、黑暗主题支持和单色配色方案。
HTML 代码
<div class="flex flex-col items-center justify-center h-screen bg-gray-200 dark:bg-gray-800 p-4">
<h2 class="text-gray-800 dark:text-gray-200 font-semibold text-2xl mb-6">Sign in with</h2>
<div class="space-y-4">
<a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
<img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200">Provider 1</span>
</a>
<a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
<img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200">Provider 2</span>
</a>
<a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
<img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200">Provider 3</span>
</a>
</div>
</div>
<style>
.shadow-neumorphism {
box-shadow: 5px 5px 15px rgba(255, 255, 255, 0.2),
-5px -5px 15px rgba(0, 0, 0, 0.2);
}
</style>