Composant Boutons de partage social
Boutons de partage social inspirés du Bauhaus pour les applications de sport/fitness, avec des formes géométriques et des tons bleus. Réactif avec prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-blue-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-800 shadow-xl rounded-lg p-5 sm:p-7 md:p-8 border-4 border-blue-600 dark:border-blue-300 transform transition-all duration-300 ease-in-out hover:scale-[1.01]">
<h2 class="text-2xl sm:text-3xl font-extrabold text-center text-blue-800 dark:text-blue-200 mb-6 sm:mb-8 tracking-tighter sm:tracking-normal">
Share This Victory!
</h2>
<div class="grid grid-cols-2 gap-4 sm:gap-6 md:gap-8 justify-items-center">
<a href="#" class="group w-full max-w-[200px] aspect-square rounded-none bg-blue-500 dark:bg-blue-700 flex flex-col items-center justify-center p-3 sm:p-4 text-white hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 border-b-4 border-l-4 border-blue-700 dark:border-blue-900">
<svg class="w-8 h-8 sm:w-10 sm:h-10 mb-2 sm:mb-3 group-hover:rotate-6 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M22.046 0h-19.109c-1.552 0-2.936 1.257-2.936 2.766v18.261c0 1.509 1.384 2.767 2.936 2.767h19.109c1.552 0 2.936-1.258 2.936-2.767v-18.261c0-1.509-1.384-2.766-2.936-2.766zm-3.094 17.561h-2.996v-5.607h2.996v5.607zm-.008-6.892c-.114-.492-.562-.835-1.047-.835-.615 0-1.047.464-1.047 1.093v3.744h-2.996v-12.721h2.996v1.921c.542-.782 1.385-1.353 2.502-1.353 1.83 0 3.257 1.341 3.257 4.254v7.899h-2.996l-.004-.007z"/>
</svg>
<span class="text-xs sm:text-sm font-bold uppercase tracking-wide">LinkedIn</span>
</a>
<a href="#" class="group w-full max-w-[200px] aspect-square rounded-none bg-blue-500 dark:bg-blue-700 flex flex-col items-center justify-center p-3 sm:p-4 text-white hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-300 ease-in-out transform hover:translate-y-1 hover:scale-105 border-t-4 border-r-4 border-blue-700 dark:border-blue-900">
<svg class="w-8 h-8 sm:w-10 sm:h-10 mb-2 sm:mb-3 group-hover:-rotate-6 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.297 22V12.441H5.197V8.502H8.297V5.792c0-3.076 1.893-4.764 4.657-4.764 1.325 0 2.479.098 2.812.142v3.238l-1.916.001c-1.502 0-1.796.714-1.796 1.764v2.302h3.587l-.467 3.939h-3.12V22H8.297z"/>
</svg>
<span class="text-xs sm:text-sm font-bold uppercase tracking-wide">Facebook</span>
</a>
<a href="#" class="group w-full max-w-[200px] aspect-square rounded-none bg-blue-500 dark:bg-blue-700 flex flex-col items-center justify-center p-3 sm:p-4 text-white hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 border-t-4 border-l-4 border-blue-700 dark:border-blue-900">
<svg class="w-8 h-8 sm:w-10 sm:h-10 mb-2 sm:mb-3 group-hover:rotate-6 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.89-.982-2.172-1.597-3.597-1.597-2.71 0-4.918 2.203-4.918 4.917 0 .386.046.764.129 1.127-4.093-.205-7.72-2.173-10.158-5.17A4.814 4.814 0 00.316 9.17c0 1.701.866 3.209 2.188 4.096-.807-.025-1.564-.247-2.222-.614v.061c0 2.385 1.696 4.372 3.946 4.827-.413.111-.849.171-1.296.171-.318 0-.626-.031-.925-.088.636 1.956 2.46 3.392 4.604 3.432-1.685 1.321-3.805 2.125-6.102 2.125-.398 0-.79-.023-1.173-.069 2.18 1.393 4.768 2.207 7.55 2.207 9.053 0 13.99-7.495 13.99-13.988 0-.214-.004-.426-.012-.637.962-.695 1.797-1.562 2.457-2.558z"/>
</svg>
<span class="text-xs sm:text-sm font-bold uppercase tracking-wide">Twitter</span>
</a>
<a href="#" class="group w-full max-w-[200px] aspect-square rounded-none bg-blue-500 dark:bg-blue-700 flex flex-col items-center justify-center p-3 sm:p-4 text-white hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-300 ease-in-out transform hover:translate-y-1 hover:scale-105 border-b-4 border-r-4 border-blue-700 dark:border-blue-900">
<svg class="w-8 h-8 sm:w-10 sm:h-10 mb-2 sm:mb-3 group-hover:-rotate-6 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.316 3.051l1.652 4.148 4.475.385c.677.058.956.883.475 1.38L16.51 12.396l.992 4.316c.162.705-.623 1.256-1.258.913L12 14.286l-3.244 1.839c-.636.343-1.42-.208-1.258-.913l.992-4.316-3.798-3.931c-.48-.497-.201-1.322.475-1.38l4.475-.385 1.652-4.148a.75.75 0 011.378 0z" clip-rule="evenodd" />
</svg>
<span class="text-xs sm:text-sm font-bold uppercase tracking-wide">Share</span>
</a>
</div>
<p class="mt-8 text-center text-sm text-blue-700 dark:text-blue-400 font-medium opacity-80">
Connect with us and celebrate winning moments!
</p>
</div>
</div>Composants associés
Composant Boutons de partage social
Boutons de partage social réactifs avec le style Glassmorphism et des couleurs vives, conçus pour les blogs et la consommation de contenu.
Composant Boutons de partage social
Un composant de boutons de partage social de style Neumorphism conçu pour les sites Web d’entreprise, utilisant des tons de terre et prenant en charge un thème sombre.
Composant Boutons de partage social
Composant de boutons de partage social avec un design brutaliste, une palette de couleurs vives et un niveau de complexité complexe pour le commerce électronique, avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de JavaScript.