Componentes Componentes de diseño Diseño de portafolio en modo oscuro

Diseño de portafolio en modo oscuro

Un componente de diseño responsivo en modo oscuro para carteras, con un esquema de color monocromático utilizando Tailwind CSS. Incluye marcadores de posición para el contenido y está diseñado para una complejidad moderada sin JavaScript.

Vista previa

Código HTML

<div class="min-h-screen bg-gray-900 text-gray-200 p-4">
  <div class="container mx-auto">
    <header class="flex justify-between items-center py-6">
      <h1 class="text-2xl font-bold text-gray-100">My Portfolio</h1>
      <nav>
        <ul class="flex space-x-4">
          <li><a href="#" class="hover:text-gray-100">Home</a></li>
          <li><a href="#" class="hover:text-gray-100">Projects</a></li>
          <li><a href="#" class="hover:text-gray-100">Contact</a></li>
        </ul>
      </nav>
    </header>
    
    <main class="grid grid-cols-1 md:grid-cols-2 gap-8 py-8">
      <section>
        <h2 class="text-xl font-semibold mb-4">About Me</h2>
        <p class="text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </section>
      
      <section>
        <h2 class="text-xl font-semibold mb-4">Recent Projects</h2>
        <div class="space-y-4">
          <div class="bg-gray-800 p-4 rounded-md">
            <h3 class="font-semibold">Project One</h3>
            <p class="text-gray-500 text-sm">A brief description of project one.</p>
          </div>
          <div class="bg-gray-800 p-4 rounded-md">
            <h3 class="font-semibold">Project Two</h3>
            <p class="text-gray-500 text-sm">A brief description of project two.</p>
          </div>
        </div>
      </section>
    </main>
    
    <footer class="text-center py-6 text-gray-500">
      © 2023 My Portfolio
    </footer>
  </div>
</div>

Componentes relacionados

Diseño del panel de control de criptomonedas de Cyberpunk

Un diseño de tablero receptivo con temática cyberpunk para aplicaciones de criptomonedas y blockchain, con acentos de neón, fondos oscuros y colores apagados. Incluye navegación en la barra lateral, un área de contenido principal y una barra superior.

Abrir

Componentes de diseño

Un componente de diseño de panel receptivo que utiliza microinteracciones y un esquema de color pastel, diseñado para mostrar paneles de control y visualización de datos con soporte para modo oscuro.

Abrir

Diseño del panel de control de Glassmorphism

Un diseño simple de morfismo de vidrio para un tablero con elementos translúcidos similares al vidrio esmerilado, con un esquema de color pastel y compatibilidad con el modo oscuro.

Abrir