Componente del Foro de la Comunidad
Un componente de foro de la comunidad receptivo para finanzas / banca con un estilo de diseño de materiales y una combinación de colores dulces / dulces, con colores brillantes como el rosa chicle y el verde menta, soporte de modo oscuro y HTML semántico.
Código HTML
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-pink-100 via-purple-100 to-green-100 dark:from-gray-900 dark:via-purple-950 dark:to-teal-950 min-h-screen font-sans">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden">
<header class="p-4 sm:p-6 bg-gradient-to-r from-pink-400 to-purple-500 dark:from-gray-900 dark:to-purple-900 text-white rounded-t-xl shadow-md">
<h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight mb-1">Finance Community Forum</h1>
<p class="text-sm opacity-90">Connect, share, and learn about financial insights.</p>
</header>
<div class="flex flex-col md:flex-row gap-4 p-4 sm:p-6">
<!-- Left Sidebar: Categories/Navigation -->
<aside class="w-full md:w-1/4 bg-purple-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
<h2 class="text-lg sm:text-xl font-semibold text-purple-700 dark:text-purple-300 mb-4">Categories</h2>
<nav>
<ul class="space-y-3">
<li>
<a href="#" class="flex items-center gap-2 p-2 rounded-md hover:bg-purple-200 dark:hover:bg-gray-600 text-purple-800 dark:text-purple-200 font-medium transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M15.75 17H18a2 2 0 002-2V7a2 2 0 00-2-2H6a2 2 0 00-2 2v8a2 2 0 002 2h2.25"/></svg>
Investing Strategies
</a>
</li>
<li>
<a href="#" class="flex items-center gap-2 p-2 rounded-md bg-purple-200 dark:bg-purple-800 text-purple-900 dark:text-white font-semibold transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 9m-4.475-1.256l-6.223 3.597m-4.047 5.086c.863-.092 1.63-.33 2.274-.692m0 0a2.003 2.003 0 01-1.422-4.242M10.88 16c-.021-.051 0-.107.017-.16A5.5 5.5 0 0012 5.5a5.5 5.5 0 00-5.5 5.5c0 1.01 0 2.02-.017 3.03M12 21.01c-.021-.051 0-.107.017-.16A5.5 5.5 0 0012 12.5a5.5 5.5 0 00-5.5 5.5c0 1.01 0 2.02-.017 3.03M12 21c-.021-.051 0-.107.017-.16A5.5 5.5 0 0012 12.5a5.5 5.5 0 00-5.5 5.5c0 1.01 0 2.02-.017 3.03"/></svg>
Personal Finance
</a>
</li>
<li>
<a href="#" class="flex items-center gap-2 p-2 rounded-md hover:bg-purple-200 dark:hover:bg-gray-600 text-purple-800 dark:text-purple-200 font-medium transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 4l-4 4 4 4"/></svg>
Market Analysis
</a>
</li>
<li>
<a href="#" class="flex items-center gap-2 p-2 rounded-md hover:bg-purple-200 dark:hover:bg-gray-600 text-purple-800 dark:text-purple-200 font-medium transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
Banking & Loans
</a>
</li>
</ul>
</nav>
<button class="mt-6 w-full py-2 px-4 bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 text-white font-semibold rounded-lg shadow-md transition-colors">
<svg class="w-4 h-4 inline-block mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
New Thread
</button>
</aside>
<!-- Main Content: Threads List -->
<main class="w-full md:w-3/4">
<section class="bg-green-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm mb-4">
<h2 class="text-lg sm:text-xl font-semibold text-green-700 dark:text-green-300 mb-4">Latest Threads</h2>
<div class="space-y-4">
<!-- Thread Item 1 -->
<article class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<div class="flex items-start justify-between">
<div>
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Understanding the Latest Fed Rate Hike</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Discussing the implications for mortgages and savings accounts.</p>
</div>
<div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
<span class="text-sm">15 replies</span>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
</div>
</div>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2 border border-pink-400 dark:border-purple-600">
<span class="font-medium text-gray-700 dark:text-gray-300">John Doe</span>
<span class="mx-2">•</span>
<span>2 hours ago</span>
<span class="ml-auto text-pink-600 dark:text-teal-400 font-semibold">Personal Finance</span>
</div>
</article>
<!-- Thread Item 2 -->
<article class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<div class="flex items-start justify-between">
<div>
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Beginner's Guide to Stock Market Investing</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Tips and resources for new investors.</p>
</div>
<div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
<span class="text-sm">32 replies</span>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
</div>
</div>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2 border border-pink-400 dark:border-purple-600">
<span class="font-medium text-gray-700 dark:text-gray-300">Jane Smith</span>
<span class="mx-2">•</span>
<span>5 hours ago</span>
<span class="ml-auto text-pink-600 dark:text-teal-400 font-semibold">Investing Strategies</span>
</div>
</article>
<!-- Thread Item 3 -->
<article class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<div class="flex items-start justify-between">
<div>
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Future of Digital Currencies in Banking</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Exploring CBDCs and their impact on traditional banking.</p>
</div>
<div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
<span class="text-sm">8 replies</span>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
</div>
</div>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
<img src="https://randomuser.me/api/portraits/men/19.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2 border border-pink-400 dark:border-purple-600">
<span class="font-medium text-gray-700 dark:text-gray-300">David Lee</span>
<span class="mx-2">•</span>
<span>1 day ago</span>
<span class="ml-auto text-pink-600 dark:text-teal-400 font-semibold">Banking & Loans</span>
</div>
</article>
<!-- Thread Item 4 -->
<article class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<div class="flex items-start justify-between">
<div>
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Q3 Earnings Report Analysis: Tech Sector</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Deep dive into recent tech company performance.</p>
</div>
<div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
<span class="text-sm">20 replies</span>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
</div>
</div>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
<img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2 border border-pink-400 dark:border-purple-600">
<span class="font-medium text-gray-700 dark:text-gray-300">Emily White</span>
<span class="mx-2">•</span>
<span>2 days ago</span>
<span class="ml-auto text-pink-600 dark:text-teal-400 font-semibold">Market Analysis</span>
</div>
</article>
</div>
<div class="mt-6 flex justify-center">
<button class="py-2 px-6 bg-pink-500 hover:bg-pink-600 dark:bg-teal-600 dark:hover:bg-teal-500 text-white font-semibold rounded-full shadow-lg transition-colors">
Load More
</button>
</div>
</section>
</main>
</div>
<footer class="p-4 sm:p-6 bg-purple-500 dark:bg-gray-900 text-white text-center text-sm rounded-b-xl shadow-inner">
© 2023 Finance Community. All rights reserved.
</footer>
</div>
</div>Componentes relacionados
Foro de la Comunidad Componente 9
Un componente del Foro de la Comunidad con un diseño de morfismo de vidrio con elementos translúcidos similares al vidrio esmerilado, efectos receptivos y compatibilidad con temas oscuros.
Componente del Foro de la Comunidad
Un componente complejo del foro de la comunidad, inspirado en el papel y la impresión, para las discusiones sobre el tiempo y el clima, que utiliza un esquema de color complementario y una capacidad de respuesta total con soporte para el modo oscuro.
Componente del Foro de la Comunidad
Un componente de foro de la comunidad retro / vintage para comercio electrónico con una combinación de colores vibrantes. Diseño responsivo con soporte para temas oscuros.