Компоненты Кнопки «Поделиться» в социальных сетях Компонент кнопок "Поделиться" в социальных сетях

Компонент кнопок "Поделиться" в социальных сетях

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

Предварительный просмотр

HTML-код

<div class="p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md flex flex-col items-center space-y-4">
    <h2 class="text-lg font-bold">Share this Post</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="rounded-full" />
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="rounded-full" />
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=3" alt="LinkedIn" class="rounded-full" />
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
            <img src="https://picsum.photos/30/30?random=4" alt="Instagram" class="rounded-full" />
        </a>
    </div>
    <div class="text-sm text-gray-600 dark:text-gray-400">
        <p>Connect with us!</p>
    </div>
</div>

Связанные компоненты

Скевоморфные кнопки «Поделиться» в социальных сетях

Набор кнопок «Поделиться» в социальных сетях, стилизованных под скевоморфный дизайн с использованием Tailwind CSS. Содержит градиенты, тени и эффекты наведения/активности для имитации физических кнопок. Компонент является адаптивным и включает поддержку темного режима через CSS. Содержит кнопки для Facebook, Twitter, LinkedIn и общую кнопку копирования ссылки.

Открытый