Componenti Forum della comunità Componente del forum della community

Componente del forum della community

Un componente del forum della community reattivo e interattivo con stile di design Neumorphism, adatto per siti Web aziendali/aziendali, che supporta temi chiari e scuri.

Anteprima

Codice HTML

<div class="container mx-auto px-4">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Community Forum</h2>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-8">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Recent Discussions</h3>
        <ul class="mt-4">
            <li class="flex items-start bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-4 shadow-lg transition-shadow duration-300 hover:shadow-2xl">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
                <div>
                    <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200">John Doe</h4>
                    <p class="text-gray-600 dark:text-gray-400">What are the benefits of using Neumorphism in UI design?</p>
                    <span class="text-sm text-gray-500 dark:text-gray-300">2 hours ago</span>
                </div>
            </li>
            <li class="flex items-start bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-4 shadow-lg transition-shadow duration-300 hover:shadow-2xl">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
                <div>
                    <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200">Jane Smith</h4>
                    <p class="text-gray-600 dark:text-gray-400">How to create responsive designs with Tailwind CSS?</p>
                    <span class="text-sm text-gray-500 dark:text-gray-300">5 hours ago</span>
                </div>
            </li>
            <li class="flex items-start bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-4 shadow-lg transition-shadow duration-300 hover:shadow-2xl">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
                <div>
                    <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200">Alex Johnson</h4>
                    <p class="text-gray-600 dark:text-gray-400">What are the key features of a modern forum?</p>
                    <span class="text-sm text-gray-500 dark:text-gray-300">1 day ago</span>
                </div>
            </li>
        </ul>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Create a New Discussion</h3>
        <form class="mt-4">
            <input type="text" placeholder="Title" class="border border-gray-300 rounded-lg p-2 w-full mb-4 bg-gray-100 dark:bg-gray-600 dark:border-gray-700"> 
            <textarea rows="4" placeholder="Write your message..." class="border border-gray-300 rounded-lg p-2 w-full mb-4 bg-gray-100 dark:bg-gray-600 dark:border-gray-700"></textarea>
            <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg px-4 py-2">Post</button>
        </form>
    </div>
</div>

Componenti correlati

Forum della comunità Componente 9

Un componente del forum della comunità caratterizzato da un design a vetromorfismo con elementi traslucidi simili al vetro smerigliato, effetti reattivi e supporto per temi scuri.

Aperto

Componente del Forum della Comunità - Glassmorphism E-commerce

Un componente del forum della comunità in stile glassmorphism per l'e-commerce, con elementi traslucidi, effetti di sfocatura e una combinazione di colori triadica. Reattivo con supporto per la modalità oscura.

Aperto

Componente del forum della community

Un componente del forum della community reattivo progettato con i principi del Material Design, adatto per il consumo di blog e contenuti. Presenta un layout a griglia, elementi interattivi e supporta temi scuri utilizzando Tailwind CSS.

Aperto