Componente Pulsanti di condivisione social
Pulsanti di condivisione social ispirati al Bauhaus per applicazioni sportive/fitness, caratterizzati da forme geometriche e toni blu. Reattivo con supporto per la modalità oscura.
Codice HTML
<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>Componenti correlati
Componente Pulsanti di condivisione social
Un componente reattivo e minimalista per i pulsanti di condivisione social progettato con uno stile tipografico svizzero/internazionale, utilizzando una combinazione di colori in scala di grigi. È adatto per bacheche di lavoro o piattaforme di sviluppo della carriera, offrendo opzioni di condivisione pulite per varie piattaforme di social media.
Componente Pulsanti di condivisione social
Componente Social Share Buttons con microinterazioni, combinazione di colori in scala di grigi, complessità moderata per le interfacce dei social media, design reattivo con supporto per temi scuri.
Componente Pulsanti di condivisione social
Componente Social Share Buttons con design retrò / vintage, combinazione di colori dei toni della terra, livello di complessità semplice e design reattivo con supporto per temi scuri, per scopi di social media utilizzando Tailwind CSS.