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

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

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

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

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 для веб-сайта-портфолио.

Открытый

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

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

Открытый

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

Компонент кнопок «Поделиться» в социальных сетях с ретро/винтажным дизайном, цветовой схемой в земляных тонах, простым уровнем сложности и адаптивным дизайном с поддержкой темных тем, для социальных сетей с использованием Tailwind CSS.

Открытый