Cyberpunk_User_Profiles_Component
Un componente de perfiles de usuario complejo y receptivo con una estética cyberpunk y una combinación de colores cálidos al atardecer, adecuado para sitios web de viajes / turismo. Cuenta con soporte para modo oscuro, acentos de neón y elementos interactivos.
Código HTML
<div class="min-h-screen bg-gray-900 text-orange-200 p-4 sm:p-8 dark:bg-gray-950">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Left Column: User Profile -->
<div class="md:col-span-1 bg-gradient-to-br from-indigo-900 to-purple-900 rounded-3xl shadow-xl border border-purple-700 transform hover:scale-105 transition-all duration-300 dark:from-purple-950 dark:to-gray-900">
<div class="p-6 sm:p-8 text-center relative">
<div class="absolute top-4 right-4 flex space-x-2">
<span class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
</span>
<span class="text-xs font-mono text-orange-400">STATUS: ONLINE</span>
</div>
<img class="w-32 h-32 rounded-full mx-auto border-4 border-orange-500 shadow-lg glow-effect-orange mb-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
<h2 class="text-3xl font-bold text-orange-400 mb-2 font-mono">AURORA_SKYWALKER</h2>
<p class="text-sm text-purple-300 mb-4">Cyber-Explorer | Data-Nomad | Pixel-Poet</p>
<div class="flex justify-center space-x-4 mb-6">
<a href="#" class="text-orange-400 hover:text-orange-300 transition-colors duration-200"><i class="fas fa-envelope"></i></a>
<a href="#" class="text-orange-400 hover:text-orange-300 transition-colors duration-200"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-orange-400 hover:text-orange-300 transition-colors duration-200"><i class="fab fa-instagram"></i></a>
</div>
<div class="text-left space-y-3">
<div class="border-t border-purple-800 pt-4 flex items-center space-x-2">
<i class="fas fa-map-marker-alt text-orange-500"></i>
<span class="text-sm text-indigo-300">Location: Neo-Vegas Sector 7</span>
</div>
<div class="flex items-center space-x-2">
<i class="fas fa-calendar-alt text-orange-500"></i>
<span class="text-sm text-indigo-300">Member Since: 2077.01.15</span>
</div>
<div class="flex items-center space-x-2">
<i class="fas fa-star text-orange-500"></i>
<span class="text-sm text-indigo-300">Rating: 4.8 / 5.0 (2,104 reviews)</span>
</div>
</div>
<button class="mt-8 px-6 py-3 bg-orange-600 text-white rounded-full text-lg font-bold uppercase tracking-wider shadow-lg transform hover:scale-105 hover:bg-orange-700 transition-all duration-300 glow-button-orange focus:outline-none focus:ring-4 focus:ring-orange-500 focus:ring-opacity-75">
Edit Profile
</button>
</div>
</div>
<!-- Right Column: Stats & Activity -->
<div class="md:col-span-2 space-y-8">
<!-- Navigation Tabs -->
<div class="bg-gradient-to-r from-red-800 to-orange-800 rounded-3xl p-2 shadow-xl border border-red-700 dark:from-red-950 dark:to-orange-900">
<div class="flex flex-wrap justify-around text-sm sm:text-base font-bold font-mono">
<a href="#" class="px-4 py-2 text-white glow-text-white-active rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105 active:bg-orange-900 active:ring-2 active:ring-orange-500">Dashboard</a>
<a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Bookings</a>
<a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Trips</a>
<a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Reviews</a>
<a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Settings</a>
</div>
</div>
<!-- Stats Section -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-orange-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
<i class="fas fa-plane-departure text-orange-400 text-3xl mb-3 glow-effect-orange-sm"></i>
<p class="text-2xl font-bold font-mono text-orange-300">17</p>
<p class="text-sm text-gray-400">Total Expeditions</p>
</div>
<div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-purple-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
<i class="fas fa-map-marked-alt text-purple-400 text-3xl mb-3 glow-effect-purple-sm"></i>
<p class="text-2xl font-bold font-mono text-purple-300">5</p>
<p class="text-sm text-gray-400">Planetary Zones</p>
</div>
<div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-red-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
<i class="fas fa-hourglass-half text-red-400 text-3xl mb-3 glow-effect-red-sm"></i>
<p class="text-2xl font-bold font-mono text-red-300">234</p>
<p class="text-sm text-gray-400">Hours Logged</p>
</div>
<div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-green-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
<i class="fas fa-users text-green-400 text-3xl mb-3 glow-effect-green-sm"></i>
<p class="text-2xl font-bold font-mono text-green-300">12</p>
<p class="text-sm text-gray-400">Travel Buddies</p>
</div>
</div>
<!-- Recent Activity / Upcoming Bookings -->
<div class="bg-gradient-to-br from-gray-800 to-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl border border-gray-700 dark:from-gray-900 dark:to-gray-900">
<h3 class="text-2xl font-bold font-mono text-orange-400 mb-6 glow-text-orange">RECENT SYNAPSE LOGS</h3>
<div class="space-y-6">
<!-- Activity Item 1 -->
<div class="flex items-center bg-gray-700 p-4 rounded-xl border border-gray-600 transition-transform duration-200 hover:scale-[1.02] dark:bg-gray-800">
<div class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 border-orange-500 shadow-md glow-effect-orange-sm">
<img src="https://picsum.photos/id/1040/80/80" alt="Destination" class="w-full h-full object-cover">
</div>
<div class="flex-grow ml-4">
<p class="text-lg font-semibold text-orange-300 mb-1">Trip to Kepler-186f: Red Canopy Forests</p>
<p class="text-sm text-gray-400">Departure: 2083.05.20 <span class="text-purple-400">//</span> Status: <span class="text-green-400">COMPLETED</span></p>
<p class="text-xs text-gray-500">Booking ID: #KX93F-AX7</p>
</div>
<button class="ml-4 px-4 py-2 bg-purple-600 text-white rounded-full text-sm font-bold shadow-md hover:bg-purple-700 transition-colors duration-200 glow-button-purple focus:outline-none focus:ring-2 focus:ring-purple-500">
View Details
</button>
</div>
<!-- Activity Item 2 -->
<div class="flex items-center bg-gray-700 p-4 rounded-xl border border-gray-600 transition-transform duration-200 hover:scale-[1.02] dark:bg-gray-800">
<div class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 border-purple-500 shadow-md glow-effect-purple-sm">
<img src="https://picsum.photos/id/1043/80/80" alt="Destination" class="w-full h-full object-cover">
</div>
<div class="flex-grow ml-4">
<p class="text-lg font-semibold text-purple-300 mb-1">Lunar Base Alpha: Gravity Chamber Training</p>
<p class="text-sm text-gray-400">Departure: 2084.01.10 <span class="text-orange-400">//</span> Status: <span class="text-red-400">PENDING APPROVAL</span></p>
<p class="text-xs text-gray-500">Booking ID: #LBX2C-Y-4</p>
</div>
<button class="ml-4 px-4 py-2 bg-orange-600 text-white rounded-full text-sm font-bold shadow-md hover:bg-orange-700 transition-colors duration-200 glow-button-orange focus:outline-none focus:ring-2 focus:ring-orange-500">
Modify Booking
</button>
</div>
<!-- Activity Item 3 -->
<div class="flex items-center bg-gray-700 p-4 rounded-xl border border-gray-600 transition-transform duration-200 hover:scale-[1.02] dark:bg-gray-800">
<div class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 border-red-500 shadow-md glow-effect-red-sm">
<img src="https://picsum.photos/id/1051/80/80" alt="Destination" class="w-full h-full object-cover">
</div>
<div class="flex-grow ml-4">
<p class="text-lg font-semibold text-red-300 mb-1">Mars Colonization Project: Phase 3 Briefing</p>
<p class="text-sm text-gray-400">Departure: 2085.03.15 <span class="text-indigo-400">//</span> Status: <span class="text-yellow-400">CONFIRMED</span></p>
<p class="text-xs text-gray-500">Booking ID: #MCP7E-Z1</p>
</div>
<button class="ml-4 px-4 py-2 bg-indigo-600 text-white rounded-full text-sm font-bold shadow-md hover:bg-indigo-700 transition-colors duration-200 glow-button-indigo focus:outline-none focus:ring-2 focus:ring-indigo-500">
View Itinerary
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Custom Glow Effects (using pseudo-elements or custom classes) -->
<style>
.glow-effect-orange {
box-shadow: 0 0 15px rgba(255, 165, 0, 0.7), 0 0 30px rgba(255, 140, 0, 0.5);
}
.glow-effect-orange-sm {
filter: drop-shadow(0 0 5px rgba(255, 165, 0, 0.6));
}
.glow-button-orange {
box-shadow: 0 0 8px rgba(255, 165, 0, 0.7);
}
.glow-button-orange:hover {
box-shadow: 0 0 15px rgba(255, 165, 0, 0.9);
}
.glow-effect-purple-sm {
filter: drop-shadow(0 0 5px rgba(128, 0, 128, 0.6));
}
.glow-button-purple {
box-shadow: 0 0 8px rgba(128, 0, 128, 0.7);
}
.glow-button-purple:hover {
box-shadow: 0 0 15px rgba(128, 0, 128, 0.9);
}
.glow-effect-red-sm {
filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.6));
}
.glow-button-red {
box-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
}
.glow-button-indigo {
box-shadow: 0 0 8px rgba(79, 70, 229, 0.7);
}
.glow-button-indigo:hover {
box-shadow: 0 0 15px rgba(79, 70, 229, 0.9);
}
.glow-effect-green-sm {
filter: drop-shadow(0 0 5px rgba(0, 128, 0, 0.6));
}
.glow-text-orange {
text-shadow: 0 0 8px rgba(255, 165, 0, 0.8);
}
.glow-text-white-active {
text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}
</style>
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</div>Componentes relacionados
Componente de perfiles de usuario de neumorfismo con colores vibrantes
Componente de perfiles de usuario de neumorfismo con colores vibrantes para sitios web comerciales / corporativos, diseño receptivo con soporte para temas oscuros.
Tarjeta de perfil de usuario neumórfico
Una tarjeta de perfil de usuario simple y responsiva con una estética de diseño neumórfico utilizando tonos tierra, adecuada para tableros. Incluye soporte para modo oscuro.
Componente de perfiles de usuario de Glassmorphism (simple)
Un componente de perfil de usuario simple y receptivo con un estilo de diseño de glassmorphism, combinación de colores pastel y compatibilidad con el modo oscuro. Ideal para plataformas de entretenimiento/medios de comunicación.