Componente de navegación de la barra lateral
Un componente de navegación de barra lateral simple y receptivo con un estilo de diseño industrial, un esquema de color neutro cálido y soporte para modo oscuro, adecuado para aplicaciones de criptomonedas / blockchain.
Código HTML
<div class="flex h-screen bg-gray-100 dark:bg-zinc-900 font-sans">
<!-- Desktop/Tablet Sidebar -->
<aside class="hidden md:flex flex-col w-64 bg-gray-200 dark:bg-zinc-800 border-r border-gray-300 dark:border-zinc-700 shadow-md transition-all duration-300 ease-in-out">
<div class="flex items-center justify-center h-16 bg-gray-300 dark:bg-zinc-700 border-b border-gray-400 dark:border-zinc-600">
<span class="text-xl font-bold uppercase tracking-wider text-gray-800 dark:text-gray-100">CryptoDeck</span>
</div>
<nav class="flex-1 p-4 overflow-y-auto">
<ul class="space-y-2">
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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="M3 10v11l6-2 6 2 6-2V10M3 10a2 2 0 012-2h14a2 2 0 012 2M3 10v7a2 2 0 002 2h14a2 2 0 002-2v-7m-4-6a2 2 0 00-2-2h-4a2 2 0 00-2 2v2a2 2 0 002 2h4a2 2 0 002-2V4z"></path></svg>
<span class="text-sm font-medium">Dashboard</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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 2z"></path></svg>
<span class="text-sm font-medium">Wallets</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
<span class="text-sm font-medium">Trades</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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 19V6l12-3v13M9 19Cc-3.732 0-6 2.5-6 2.5V3c0-1.105.895-2 2-2h10c1.725 0 3-1 3-1L23 5v16.5C23 18.27 20 20 20 20S9 19 9 19z"></path></svg>
<span class="text-sm font-medium">Market</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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.32 2.5c0 .324.017.65.05.976l.169 1.69c.074.743-.09 1.488-.5 2l-.1.1a1 1 0 01-1.414 0l-.707-.707a1 1 0 00-1.414 0L4.5 9.5a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l1.414 1.414a1 1 0 001.414 0l.707-.707c.41-.41.69-.913.82-1.42l.06-.24c.03-.12.04-.24.04-.36v-.5l.08-.24c.03-.09.05-.18.06-.27l.1-.98Zm-5.32 8.5a.5.5 0 00-.707-.707l-2 2a.5.5 0 00.707.707l2-2zM5.5 10a.5.5 0 00-.707-.707l-2 2a.5.5 0 00.707.707l2-2zM12 18a.5.5 0 00-.707-.707l-2 2a.5.5 0 00.707.707l2-2z"><!-- Placeholder Icon --></path></svg>
<span class="text-sm font-medium">Analytics</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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.32 2.5c0 .324.017.65.05.976l.169 1.69c.074.743-.09 1.488-.5 2l-.1.1a1 1 0 01-1.414 0l-.707-.707a1 1 0 00-1.414 0L4.5 9.5a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l1.414 1.414a1 1 0 001.414 0l.707-.707c.41-.41.69-.913.82-1.42l.06-.24c.03-.12.04-.24.04-.36v-.5l.08-.24c.03-.09.05-.18.06-.27l.1-.98ZM21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span class="text-sm font-medium">Settings</span>
</a>
</li>
</ul>
</nav>
<div class="p-4 border-t border-gray-300 dark:border-zinc-700">
<div class="flex items-center mb-2">
<img class="w-8 h-8 rounded-full mr-3 border-2 border-gray-400 dark:border-zinc-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">John Doe</span>
</div>
<button class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-800 dark:text-gray-100 bg-gray-300 dark:bg-zinc-700 hover:bg-gray-400 dark:hover:bg-zinc-600 rounded-md transition-colors duration-200 ease-in-out shadow-sm">
<svg class="w-4 h-4 mr-2" 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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
Sign Out
</button>
</div>
</aside>
<!-- Main Content Area - Placeholder for context -->
<main class="flex-1 p-6 md:p-8 overflow-y-auto">
<h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6">Dashboard Overview</h1>
<p class="text-gray-700 dark:text-gray-300">Welcome to your CryptoDeck dashboard. Use the sidebar to navigate.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
<div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-md border border-gray-300 dark:border-zinc-700">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Wallet Balance</h2>
<p class="text-2xl font-bold text-gray-900 dark:text-gray-50">$12,345.67</p>
<p class="text-sm text-gray-600 dark:text-gray-400">+2.5% in last 24h</p>
</div>
<div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-md border border-gray-300 dark:border-zinc-700">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Recent Transactions</h2>
<ul class="text-sm text-gray-700 dark:text-gray-300 space-y-1">
<li>BTC Buy: +0.01 ($450)</li>
<li>ETH Sell: -0.5 ($1200)</li>
<li>ADA Staked: +100</li>
</ul>
</div>
<div class="bg-gray-200 dark:bg-zinc-800 p-6 rounded-lg shadow-md border border-gray-300 dark:border-zinc-700">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Market Trends</h2>
<img class="w-full h-32 object-cover rounded-md" src="https://picsum.photos/300/200?random=1" alt="Market Trend Chart">
</div>
</div>
</main>
<style>
/* This is a simple toggle emulation for demonstration.
In a real app, use JS to toggle 'dark' class on 'html' or 'body'. */
.dark-mode-toggle {
position: fixed;
bottom: 1rem;
right: 1rem;
background-color: #fca5a5; /* Example: light-red-300 */
color: black;
padding: 0.5rem 1rem;
border-radius: 9999px; /* Full rounded */
cursor: pointer;
z-index: 1000;
font-size: 0.875rem;
line-height: 1.25rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
border: 1px solid #dc2626; /* Example: Red-600 */
}
.dark .dark-mode-toggle {
background-color: #6d28d9; /* Example: Violet-700 */
color: white;
border-color: #8b5cf6; /* Example: Violet-500 */
}
/* Mobile menu button animation */
.mobile-menu-button.active svg:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-button.active svg:nth-child(2) {
opacity: 0;
}
.mobile-menu-button.active svg:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
@media (max-width: 767px) {
.mobile-menu-container {
transform: translateX(-100%);
}
.mobile-menu-container.open {
transform: translateX(0);
}
}
</style>
<!-- Mobile Menu Button - Fixed bottom left -->
<button aria-label="Toggle Mobile Menu" class="md:hidden fixed bottom-4 left-4 p-3 bg-gray-300 dark:bg-gradient-to-br dark:from-zinc-700 dark:to-zinc-900 text-gray-800 dark:text-gray-100 rounded-lg shadow-lg z-50 transition-all duration-300 ease-in-out border border-gray-400 dark:border-zinc-700 mobile-menu-button">
<svg class="w-6 h-6" 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="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
<!-- Mobile Sidebar (Off-canvas) -->
<div class="mobile-menu-container fixed inset-y-0 left-0 w-64 bg-gray-200 dark:bg-zinc-800 border-r border-gray-300 dark:border-zinc-700 shadow-xl z-40 transform -translate-x-full md:hidden transition-transform duration-300 ease-in-out" role="dialog" aria-modal="true" aria-label="Mobile Navigation">
<div class="flex items-center justify-between h-16 bg-gray-300 dark:bg-zinc-700 border-b border-gray-400 dark:border-zinc-600 px-4">
<span class="text-xl font-bold uppercase tracking-wider text-gray-800 dark:text-gray-100">CryptoDeck</span>
<button aria-label="Close Menu" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-50 mobile-menu-close-button">
<svg class="w-6 h-6" 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="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<nav class="flex-1 p-4 overflow-y-auto">
<ul class="space-y-2">
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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="M3 10v11l6-2 6 2 6-2V10M3 10a2 2 0 012-2h14a2 2 0 012 2M3 10v7a2 2 0 002 2h14a2 2 0 002-2v-7m-4-6a2 2 0 00-2-2h-4a2 2 0 00-2 2v2a2 2 0 002 2h4a2 2 0 002-2V4z"></path></svg>
<span class="text-sm font-medium">Dashboard</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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 2z"></path></svg>
<span class="text-sm font-medium">Wallets</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group active:bg-gray-400 dark:active:bg-zinc-600">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
<span class="text-sm font-medium">Trades</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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 19V6l12-3v13M9 19Cc-3.732 0-6 2.5-6 2.5V3c0-1.105.895-2 2-2h10c1.725 0 3-1 3-1L23 5v16.5C23 18.27 20 20 20 20S9 19 9 19z"></path></svg>
<span class="text-sm font-medium">Market</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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.32 2.5c0 .324.017.65.05.976l.169 1.69c.074.743-.09 1.488-.5 2l-.1.1a1 1 0 01-1.414 0l-.707-.707a1 1 0 00-1.414 0L4.5 9.5a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l1.414 1.414a1 1 0 001.414 0l.707-.707c.41-.41.69-.913.82-1.42l.06-.24c.03-.12.04-.24.04-.36v-.5l.08-.24c.03-.09.05-.18.06-.27l.1-.98ZM5.32 8.5a.5.5 0 00-.707.707l-2 2a.5.5 0 00.707.707l2-2zM5.5 10a.5.5 0 00-.707-.707l-2 2a.5.5 0 00.707.707l2-2zM12 18a.5.5 0 00-.707-.707l-2 2a.5.5 0 00.707.707l2-2z"/></svg>
<span class="text-sm font-medium">Analytics</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-md transition-all duration-200 ease-in-out group">
<svg class="w-5 h-5 mr-3 text-gray-600 dark:text-gray-300 group-hover:text-gray-800 dark:group-hover:text-gray-100" 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.32 2.5c0 .324.017.65.05.976l.169 1.69c.074.743-.09 1.488-.5 2l-.1.1a1 1 0 01-1.414 0l-.707-.707a1 1 0 00-1.414 0L4.5 9.5a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 000 1.414l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l.707.707a1 1 0 011.414 0l.707-.707a1 1 0 001.414 0l1.414 1.414a1 1 0 001.414 0l.707-.707c.41-.41.69-.913.82-1.42l.06-.24c.03-.12.04-.24.04-.36v-.5l.08-.24c.03-.09.05-.18.06-.27l.1-.98ZM21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span class="text-sm font-medium">Settings</span>
</a>
</li>
</ul>
</nav>
<div class="p-4 border-t border-gray-300 dark:border-zinc-700">
<div class="flex items-center mb-2">
<img class="w-8 h-8 rounded-full mr-3 border-2 border-gray-400 dark:border-zinc-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">John Doe</span>
</div>
<button class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-800 dark:text-gray-100 bg-gray-300 dark:bg-zinc-700 hover:bg-gray-400 dark:hover:bg-zinc-600 rounded-md transition-colors duration-200 ease-in-out shadow-sm">
<svg class="w-4 h-4 mr-2" 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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
Sign Out
</button>
</div>
</div>
<!-- Overlay for mobile menu -->
<div class="overlay fixed inset-0 bg-black bg-opacity-50 z-30 hidden md:hidden"></div>
<script>
// Basic JavaScript for toggling dark mode (for demonstration)
const toggleDarkMode = () => {
document.documentElement.classList.toggle('dark');
};
// Add a button to toggle dark mode (for demo purposes)
document.addEventListener('DOMContentLoaded', () => {
const darkToggleBtn = document.createElement('button');
darkToggleBtn.className = 'dark-mode-toggle';
darkToggleBtn.textContent = 'Toggle Dark Mode';
darkToggleBtn.onclick = toggleDarkMode;
document.body.appendChild(darkToggleBtn);
// Mobile menu functionality
const mobileMenuButton = document.querySelector('.mobile-menu-button');
const mobileMenuContainer = document.querySelector('.mobile-menu-container');
const mobileMenuCloseButton = document.querySelector('.mobile-menu-close-button');
const overlay = document.querySelector('.overlay');
const openMenu = () => {
mobileMenuContainer.classList.add('open');
overlay.classList.remove('hidden');
};
const closeMenu = () => {
mobileMenuContainer.classList.remove('open');
overlay.classList.add('hidden');
};
mobileMenuButton.addEventListener('click', openMenu);
mobileMenuCloseButton.addEventListener('click', closeMenu);
overlay.addEventListener('click', closeMenu);
// Close menu on desktop resize if open
window.addEventListener('resize', () => {
if (window.innerWidth >= 768 && mobileMenuContainer.classList.contains('open')) {
closeMenu();
}
});
});
</script>
</div>Componentes relacionados
Gaming_Sidebar_Navigation_Component
Un componente de navegación de barra lateral receptivo para sitios web de juegos, con un diseño monoespaciado/inspirado en desarrolladores con alto contraste, compatibilidad con modo oscuro y elementos interactivos. Ideal para interfaces de juegos y portales comunitarios.
Componente de navegación de la barra lateral de Glassmorphism
Un componente de navegación de la barra lateral para blogs con estilo Glassmorphism, con un esquema de color monocromático. Es un diseño simple y responsivo con soporte para modo oscuro, usando solo HTML y Tailwind CSS. La barra lateral incluye un título del sitio, enlaces de navegación y una sección de perfil.
Brutalismo Barra lateral Navegación
Un componente de navegación de barra lateral de estilo brutalista con tonos tierra, complejidad moderada, capacidad de respuesta y compatibilidad con modo oscuro, diseñado para sitios de blogs/contenido que usan Tailwind CSS.