OAuth ボタンコンポーネント
ブログまたはコンテンツ消費プラットフォーム用に設計された Neumorphism スタイルの 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>関連コンポーネント
OAuth ボタンコンポーネント
Skeuomorphism デザイン、類似のカラースキーム、複雑なインタラクションを備えたレスポンシブ OAuth ボタンコンポーネントで、ソーシャル メディア インターフェイスに適しています。ダーク テーマのサポートが含まれており、JavaScript を使用せずにスタイル設定に Tailwind CSS を使用します。画像はLorem Picsumと RandomUser.me から提供されました。