Componente Componenti sociali
Una complessa sezione di componenti social progettata per siti Web aziendali, utilizzando i principi del Material Design e una combinazione di colori in scala di grigi. È dotato di un design reattivo e del supporto per i temi scuri.
Codice HTML
<div class="max-w-6xl mx-auto p-5">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6">Connect with Us</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
<img src="https://picsum.photos/400/200?random=1" class="w-full h-32 object-cover rounded-lg" alt="Social Image 1">
<div class="mt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Us on Twitter</h3>
<p class="text-gray-600 dark:text-gray-400">Stay updated with our latest tweets and news.</p>
<a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit Twitter</a>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
<img src="https://picsum.photos/400/200?random=2" class="w-full h-32 object-cover rounded-lg" alt="Social Image 2">
<div class="mt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Join Us on LinkedIn</h3>
<p class="text-gray-600 dark:text-gray-400">Connect with us professionally and grow your network.</p>
<a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit LinkedIn</a>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
<img src="https://picsum.photos/400/200?random=3" class="w-full h-32 object-cover rounded-lg" alt="Social Image 3">
<div class="mt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Like Us on Facebook</h3>
<p class="text-gray-600 dark:text-gray-400">Join our community and stay updated with our activities.</p>
<a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit Facebook</a>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
<img src="https://picsum.photos/400/200?random=4" class="w-full h-32 object-cover rounded-lg" alt="Social Image 4">
<div class="mt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Subscribe to Our YouTube</h3>
<p class="text-gray-600 dark:text-gray-400">Watch our latest videos and tutorials.</p>
<a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit YouTube</a>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
<img src="https://picsum.photos/400/200?random=5" class="w-full h-32 object-cover rounded-lg" alt="Social Image 5">
<div class="mt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Us on Instagram</h3>
<p class="text-gray-600 dark:text-gray-400">Catch a glimpse of our behind-the-scenes.</p>
<a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit Instagram</a>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
<img src="https://picsum.photos/400/200?random=6" class="w-full h-32 object-cover rounded-lg" alt="Social Image 6">
<div class="mt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Connect on GitHub</h3>
<p class="text-gray-600 dark:text-gray-400">Explore our projects and collaborations.</p>
<a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit GitHub</a>
</div>
</div>
</div>
</div>Componenti correlati
Componente Componenti sociali
Un semplice componente reattivo per i social media con animazioni accattivanti e un tema scuro, che utilizza Tailwind CSS.
Componente Componenti sociali
Un semplice componente social a tema retrò/vintage ispirato a materiali cartacei/cartacei per l'e-commerce, che mostra uno snippet del profilo utente con supporto per la modalità scura.
Social_Components_Documentation_Wiki
Un componente sociale complesso e reattivo per siti di documentazione/wiki, con sfumature di colore autunnali e transizioni fluide con supporto per la modalità scura.