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 sociale incentrato sulle microinterazioni per i blog con animazioni accattivanti e una combinazione di colori monocromatici.
Componente Componenti sociali
Un semplice componente di social media progettato con scheumorfismo e una combinazione di colori monocromatici per i contenuti del blog. È dotato di un layout reattivo e del supporto per i temi scuri utilizzando Tailwind CSS.