Componente Componenti sociali
Un componente di social media reattivo con supporto della modalità oscura per i siti Web aziendali, con una combinazione di colori triadica.
Codice HTML
<div class="dark:bg-gray-900 bg-teal-100 p-6 flex flex-col md:flex-row items-center justify-around">
<div class="dark:bg-gray-800 bg-teal-200 rounded-lg shadow-lg p-6 m-4 w-full md:w-1/3">
<h3 class="dark:text-white text-teal-900 text-xl font-semibold mb-4">Our Latest Post</h3>
<img src="https://picsum.photos/400/200" alt="Blog Post Image" class="rounded-md mb-4">
<p class="dark:text-gray-300 text-teal-800 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="dark:text-purple-400 text-blue-700 hover:underline">Read More</a>
</div>
<div class="dark:bg-gray-800 bg-red-200 rounded-lg shadow-lg p-6 m-4 w-full md:w-1/3">
<h3 class="dark:text-white text-red-900 text-xl font-semibold mb-4">Connect With Us</h3>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
<p class="dark:text-gray-300 text-red-800">Follow us on Twitter!</p>
</div>
<button class="dark:bg-purple-600 bg-blue-600 text-white px-4 py-2 rounded-md hover:dark:bg-purple-700 hover:bg-blue-700">Follow</button>
</div>
<div class="dark:bg-gray-800 bg-orange-200 rounded-lg shadow-lg p-6 m-4 w-full md:w-1/3">
<h3 class="dark:text-white text-orange-900 text-xl font-semibold mb-4">Our Community</h3>
<ul class="list-disc list-inside dark:text-gray-300 text-orange-800">
<li>10K+ Members</li>
<li>Active Discussions</li>
<li>Exclusive Content</li>
</ul>
<a href="#" class="dark:text-purple-400 text-blue-700 hover:underline mt-4 block">Join Our Community</a>
</div>
</div>Componenti correlati
Componente Componenti sociali
Un semplice componente per social media che utilizza Tailwind CSS e progettato con i principi del Material Design. È dotato di colori vivaci e supporto per la modalità oscura, che lo rendono adatto alle interfacce di social networking.
Componente Componenti sociali
Un componente per social media in stile retrò/vintage caratterizzato da una ricca interfaccia con più elementi interattivi, progettato con colori complementari e che supporta la modalità oscura.
Componente Componenti sociali
Un semplice componente social progettato con uno stile scheumorfico utilizzando colori vivaci per un sito aziendale professionale, design reattivo con supporto per la modalità oscura.