Компоненты Кнопки «Поделиться» в социальных сетях Кнопки «Поделиться» в социальных сетях Компонент 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>

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

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

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

Открытый

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

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

Открытый

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

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

Открытый