Компоненты Кнопки OAuth Компонент кнопок OAuth

Компонент кнопок OAuth

Компонент OAuth Buttons в стиле Neumorphism, разработанный для блога или платформы потребления контента. Компонент имеет кнопки для различных провайдеров 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

Отзывчивый компонент кнопок OAuth, разработанный с привлекательной анимацией и цветами землистых тонов, подходящий для интерфейсов социальных сетей и поддерживающий темные темы.

Открытый

Компонент кнопок OAuth

Скевоморфные кнопки OAuth, разработанные для имитации реальных элементов с земляными тонами, предназначены для интерфейсов социальных сетей.

Открытый

Компонент кнопок OAuth

Адаптивный компонент OAuth Buttons для пользовательского интерфейса электронной коммерции в темном режиме с пастельной цветовой схемой.

Открытый