認証コンポーネント

<div class="flex justify-center items-center min-h-screen bg-gray-800 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-8 w-80 neumorphic">
        <h2 class="text-2xl font-bold text-center text-vibrant">Login</h2>
        <form class="mt-4">
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input type="email" id="email" class="focus:ring-vibrant focus:border-transparent block w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="[email protected]">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input type="password" id="password" class="focus:ring-vibrant focus:border-transparent block w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="••••••••">
            </div>
            <button type="submit" class="w-full bg-vibrant text-white p-2 rounded-lg hover:shadow-lg transition ease-in-out duration-150">Login</button>
        </form>
        <div class="text-center mt-4">
            <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-vibrant">Sign Up</a></p>
        </div>
        <hr class="my-4 border-gray-300 dark:border-gray-600">
        <div class="text-center">
            <p class="text-gray-600 dark:text-gray-400">or login with</p>
            <div class="flex justify-center mt-2">
                <img src="https://picsum.photos/30" alt="Google Logo" class="rounded-full mx-2">
                <img src="https://picsum.photos/30" alt="Facebook Logo" class="rounded-full mx-2">
                <img src="https://picsum.photos/30" alt="Twitter Logo" class="rounded-full mx-2">
            </div>
        </div>
    </div>
</div>
<style>
@import "https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css";

.neumorphic {
    background: #e0e0e0;
    border-radius: 20px;
    box-shadow: 8px 8px 15px rgba(226, 226, 226, 0.3), -8px -8px 15px rgba(255, 255, 255, 0.3);
}

.dark.neumorphic {
    background: #434343;
    box-shadow: 8px 8px 15px rgba(0,0,0,0.5), -8px -8px 15px rgba(255,255,255,0.1);
}

.text-vibrant {
    color: #ff4081; /* You can change this color based on your vibrant color scheme */
}
</style>