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

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

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

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

HTML-код

<div class="flex flex-col items-center bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Share This Article</h2>
    <div class="flex space-x-4 mb-6">
        <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/40/40?random=1" alt="Facebook" class="w-10 h-10 rounded-full">
            <a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Facebook</a>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/40/40?random=2" alt="Twitter" class="w-10 h-10 rounded-full">
            <a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Twitter</a>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/40/40?random=3" alt="LinkedIn" class="w-10 h-10 rounded-full">
            <a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">LinkedIn</a>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/40/40?random=4" alt="Email" class="w-10 h-10 rounded-full">
            <a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Email</a>
        </div>
    </div>
    <p class="text-gray-600 dark:text-gray-400 text-center text-sm">Share this with your friends and family!</p>
</div>

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

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

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

Открытый

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

Компонент кнопок социальных сетей с брутальным дизайном, яркой цветовой схемой и сложным уровнем сложности для электронной коммерции, с адаптивным дизайном и поддержкой темной темы с использованием Tailwind CSS. Нет JavaScript.

Открытый

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

Отзывчивый компонент кнопок «Поделиться» в социальных сетях, разработанный в соответствии со скевоморфными принципами дизайна, с кнопками, имитирующими объекты реального мира, и поддержкой темной темы. Компонент стилизован с помощью Tailwind CSS и включает в себя изображения-заполнители из picsum.photos и аватары из randomuser.me.

Открытый