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

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

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

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

HTML-код

<div class="flex justify-center items-center p-5 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex space-x-4">
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Facebook" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-600 dark:bg-blue-800 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Facebook
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Twitter" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-400 dark:bg-blue-600 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Twitter
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on LinkedIn" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-700 dark:bg-blue-900 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                LinkedIn
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Instagram" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-pink-500 dark:bg-pink-700 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Instagram
            </a>
        </div>
    </div>
</div>

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

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

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

Открытый