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

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

Отзывчивый компонент кнопок социальных сетей, стилизованный в стиле ретро/винтаж 80-х/90-х годов, с поддержкой темной темы с использованием Tailwind CSS и изображений-заполнителей.

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

HTML-код

<div class="flex flex-col items-center justify-center p-5 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-700 rounded-lg shadow-lg">
    <h2 class="text-white text-2xl font-bold mb-4">Share Your Experience</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="facebook" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Facebook</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="twitter" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Twitter</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="instagram" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Instagram</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="linkedin" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">LinkedIn</span>
        </a>
    </div>
    <div class="mt-5">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-white shadow-lg">
    </div>
</div>

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

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

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

Открытый

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

Набор кнопок «Поделиться» в социальных сетях, предназначенный для музыкальных и аудиоплатформ, выполнен в стиле Material Design с приглушенными цветами и поддерживает темный режим. Включает кнопки для распространенных платформ обмена, таких как Facebook, Twitter и электронная почта.

Открытый

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

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

Открытый