Компонент кнопок "Поделиться" в социальных сетях
Компонент кнопок социальных сетей для электронной коммерции в темном режиме с использованием Tailwind CSS. Простой, отзывчивый и в оттенках серого.
HTML-код
<div class="flex justify-center items-center space-x-4 bg-gray-900 p-4">
<a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 0C5.373 0 0 5.373 0 12c0 5.083 3.79 9.362 8.75 10.346V14.25H6.404V11.89h2.346V9.13c0-2.323 1.4-3.582 3.47-3.582 1.004 0 1.865.076 2.12.11v2.58h-1.53c-1.228 0-1.47.595-1.47 1.467v1.911h2.8L14.2 14.25h-2.8v7.196C18.21 21.362 22 17.083 22 12 22 5.373 17.627 0 12 0z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M24 4.557a9.83 9.83 0 01-2.828.775 4.932 4.932 0 002.165-2.724c-1.036.617-2.19 1.064-3.427 1.31a4.918 4.918 0 00-8.384 4.482A13.952 13.952 0 011.67 3.148a4.929 4.929 0 001.523 6.574 4.89 4.89 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.99C8.072 14.912 7.6 14.976 7.11 14.992a4.943 4.943 0 004.6 3.438 9.857 9.857 0 01-6.114 2.107c-.398 0-.79-.023-1.175-.068a13.995 13.995 0 007.55 2.209c9.053 0 13.999-7.496 13.999-13.986 0-.19.004-.379.014-.568A10.035 10.035 0 0024 4.557z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20.664 3.703a5.003 5.003 0 00-3.742-2.918c-2.462-.511-4.9-.171-7.127.734-2.495 1.01-4.46 3.098-5.44 5.623C3.43 9.55 3.2 12.268 4 15c.758 2.61 2.517 5.08 5.042 6.106 2.567 1.034 5.82.36 8.11-1.87C19.74 17.775 21.277 15.125 21.6 12.25c.325-2.876-.316-5.69-1.136-8.547zM15.636 15.895a2.837 2.837 0 01-4.159-.129L9.613 13.8l-2.783.67c-.77.185-1.5-.575-1.313-1.354l.67-2.786-1.95-2.05a.964.964 0 01.257-1.35c.3-.273.73-.466 1.2-.53l2.783-.67 1.136-2.61.024-.05c.247-.581.975-.817 1.53-.576a.967.967 0 01.595.89l.67 2.783 2.783-.67c.77-.185 1.5.575 1.313 1.354l-.67 2.786 1.95 2.05a.964.964 0 01-.257 1.35c-.3.273-.73.466-1.2.53l-2.783.67-1.136 2.61-.024.05a.965.965 0 01-.93.682z"/>
</svg>
</a>
</div>Связанные компоненты
Кнопки «Поделиться» в социальных сетях
Кнопки «Поделиться» в социальных сетях в стиле «Неоморфизм», «Монохроматическая цветовая гамма» и «Простая сложность» для бизнес/корпоративных сайтов. Адаптивный дизайн с поддержкой темной темы с использованием Tailwind CSS. Использует тонкие тени для создания эффекта неуморфизма.
Кнопки «Поделиться» в социальных сетях
Кнопки «Поделиться» в социальных сетях с адаптивным дизайном, поддержкой темных тем и 3D-эстетикой. JavaScript не требуется.
Компонент кнопок "Поделиться" в социальных сетях
Компонент кнопок «Поделиться» в социальных сетях с ретро/винтажным дизайном, цветовой схемой в земляных тонах, простым уровнем сложности и адаптивным дизайном с поддержкой темных тем, для социальных сетей с использованием Tailwind CSS.