Componente de línea de tiempo Art Deco
Un componente de línea de tiempo receptivo para eventos/conferencias, inspirado en la estética Art Deco con un esquema de color púrpura/violeta, compatible con el modo oscuro.
Código HTML
<div class="font-sans antialiased bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-8 sm:p-12 md:p-16 lg:p-20">
<div class="max-w-5xl mx-auto py-8 lg:py-12 bg-purple-50 dark:bg-purple-950 shadow-xl rounded-xl border border-purple-200 dark:border-purple-800">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-center mb-12 text-purple-800 dark:text-purple-300 tracking-wider uppercase font-serif-display leading-tight">
Event Schedule
</h2>
<div class="relative px-4 sm:px-8 lg:px-12">
<!-- Vertical Line -->
<div class="absolute left-1/2 -ml-0.5 w-1 bg-purple-300 dark:bg-purple-700 h-full rounded-full transform -translate-x-1/2"></div>
<!-- Timeline Item 1 -->
<div class="mb-16 flex justify-between items-center w-full right-aligned">
<div class="order-1 w-full sm:w-5/12"></div>
<div class="z-20 flex items-center order-1 bg-purple-700 dark:bg-purple-500 shadow-xl w-8 h-8 rounded-full sm:w-10 sm:h-10 transition-all duration-300 hover:scale-110 border-2 border-purple-900 dark:border-purple-300">
<h1 class="mx-auto font-semibold text-lg text-white">1</h1>
</div>
<div class="order-1 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 rounded-xl shadow-lg w-full sm:w-5/12 px-6 py-4 sm:ml-8 animate-fade-in-right border border-purple-300 dark:border-purple-700 transform hover:-translate-x-1 transition-transform duration-300">
<h3 class="mb-3 font-bold text-purple-800 dark:text-purple-200 text-xl md:text-2xl">Grand Opening & Keynote</h3>
<p class="text-sm md:text-base leading-snug tracking-wide text-stone-700 dark:text-stone-300 mb-2">
Welcome address by CEO and a profound keynote speech on the future of design.
</p>
<span class="text-xs text-purple-600 dark:text-purple-400 font-medium">09:00 AM - 10:30 AM</span>
<img src="https://picsum.photos/300/200?random=1" alt="Grand Opening" class="w-full h-auto mt-4 rounded-lg shadow-md border border-purple-200 dark:border-purple-800 object-cover">
</div>
</div>
<!-- Timeline Item 2 -->
<div class="mb-16 flex justify-between flex-row-reverse items-center w-full left-aligned">
<div class="order-1 w-full sm:w-5/12"></div>
<div class="z-20 flex items-center order-1 bg-purple-700 dark:bg-purple-500 shadow-xl w-8 h-8 rounded-full sm:w-10 sm:h-10 transition-all duration-300 hover:scale-110 border-2 border-purple-900 dark:border-purple-300">
<h1 class="mx-auto font-semibold text-lg text-white">2</h1>
</div>
<div class="order-1 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 rounded-xl shadow-lg w-full sm:w-5/12 px-6 py-4 sm:mr-8 animate-fade-in-left border border-purple-300 dark:border-purple-700 transform hover:translate-x-1 transition-transform duration-300">
<h3 class="mb-3 font-bold text-purple-800 dark:text-purple-200 text-xl md:text-2xl">Breakout Sessions: Track A & B</h3>
<p class="text-sm md:text-base leading-snug tracking-wide text-stone-700 dark:text-stone-300 mb-2">
Concurrent sessions covering advanced UI/UX principles and backend integration techniques.
</p>
<span class="text-xs text-purple-600 dark:text-purple-400 font-medium mb-4 block">10:45 AM - 12:15 PM</span>
<div class="flex space-x-2 mt-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Speaker 1" class="w-10 h-10 rounded-full border-2 border-purple-600 dark:border-purple-400 shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Speaker 2" class="w-10 h-10 rounded-full border-2 border-purple-600 dark:border-purple-400 shadow-md transform hover:scale-105 transition-transform duration-200">
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="mb-16 flex justify-between items-center w-full right-aligned">
<div class="order-1 w-full sm:w-5/12"></div>
<div class="z-20 flex items-center order-1 bg-purple-700 dark:bg-purple-500 shadow-xl w-8 h-8 rounded-full sm:w-10 sm:h-10 transition-all duration-300 hover:scale-110 border-2 border-purple-900 dark:border-purple-300">
<h1 class="mx-auto font-semibold text-lg text-white">3</h1>
</div>
<div class="order-1 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 rounded-xl shadow-lg w-full sm:w-5/12 px-6 py-4 sm:ml-8 animate-fade-in-right border border-purple-300 dark:border-purple-700 transform hover:-translate-x-1 transition-transform duration-300">
<h3 class="mb-3 font-bold text-purple-800 dark:text-purple-200 text-xl md:text-2xl">Networking Lunch</h3>
<p class="text-sm md:text-base leading-snug tracking-wide text-stone-700 dark:text-stone-300 mb-2">
Opportunity to connect with peers and industry leaders over a catered lunch.
</p>
<span class="text-xs text-purple-600 dark:text-purple-400 font-medium mb-4 block">12:30 PM - 01:30 PM</span>
<img src="https://picsum.photos/300/200?random=2" alt="Networking Lunch" class="w-full h-auto mt-4 rounded-lg shadow-md border border-purple-200 dark:border-purple-800 object-cover">
</div>
</div>
<!-- Timeline Item 4 -->
<div class="mb-16 flex justify-between flex-row-reverse items-center w-full left-aligned">
<div class="order-1 w-full sm:w-5/12"></div>
<div class="z-20 flex items-center order-1 bg-purple-700 dark:bg-purple-500 shadow-xl w-8 h-8 rounded-full sm:w-10 sm:h-10 transition-all duration-300 hover:scale-110 border-2 border-purple-900 dark:border-purple-300">
<h1 class="mx-auto font-semibold text-lg text-white">4</h1>
</div>
<div class="order-1 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 rounded-xl shadow-lg w-full sm:w-5/12 px-6 py-4 sm:mr-8 animate-fade-in-left border border-purple-300 dark:border-purple-700 transform hover:translate-x-1 transition-transform duration-300">
<h3 class="mb-3 font-bold text-purple-800 dark:text-purple-200 text-xl md:text-2xl">Interactive Workshops</h3>
<p class="text-sm md:text-base leading-snug tracking-wide text-stone-700 dark:text-stone-300 mb-2">
Hands-on sessions focusing on new development tools and agile methodologies.
</p>
<span class="text-xs text-purple-600 dark:text-purple-400 font-medium mb-4 block">01:45 PM - 03:15 PM</span>
<div class="flex -space-x-4 mt-4">
<img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Participant 1" class="w-10 h-10 rounded-full border-2 border-purple-600 dark:border-purple-400 shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Participant 2" class="w-10 h-10 rounded-full border-2 border-purple-600 dark:border-purple-400 shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Participant 3" class="w-10 h-10 rounded-full border-2 border-purple-600 dark:border-purple-400 shadow-md transform hover:scale-105 transition-transform duration-200">
<div class="w-10 h-10 rounded-full bg-purple-600 dark:bg-purple-400 flex items-center justify-center text-white text-xs font-bold ring-2 ring-purple-600 dark:ring-purple-400 shadow-md">+15</div>
</div>
</div>
</div>
<!-- Timeline Item 5 -->
<div class="flex justify-between items-center w-full right-aligned">
<div class="order-1 w-full sm:w-5/12"></div>
<div class="z-20 flex items-center order-1 bg-purple-700 dark:bg-purple-500 shadow-xl w-8 h-8 rounded-full sm:w-10 sm:h-10 transition-all duration-300 hover:scale-110 border-2 border-purple-900 dark:border-purple-300">
<h1 class="mx-auto font-semibold text-lg text-white">5</h1>
</div>
<div class="order-1 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 rounded-xl shadow-lg w-full sm:w-5/12 px-6 py-4 sm:ml-8 animate-fade-in-right border border-purple-300 dark:border-purple-700 transform hover:-translate-x-1 transition-transform duration-300">
<h3 class="mb-3 font-bold text-purple-800 dark:text-purple-200 text-xl md:text-2xl">Closing Remarks & Farewell</h3>
<p class="text-sm md:text-base leading-snug tracking-wide text-stone-700 dark:text-stone-300 mb-2">
Summary of the event and thanks to all participants and sponsors.
</p>
<span class="text-xs text-purple-600 dark:text-purple-400 font-medium">03:30 PM - 04:00 PM</span>
<img src="https://picsum.photos/300/200?random=3" alt="Closing Remarks" class="w-full h-auto mt-4 rounded-lg shadow-md border border-purple-200 dark:border-purple-800 object-cover">
</div>
</div>
</div>
</div>
<!-- Custom Styles for responsiveness and Art Deco feel -->
<style>
@layer base {
/* Basic font for content */
body {
font-family: 'Open Sans', sans-serif;
}
/* A more decorative font for headings, simulating Art Deco */
.font-serif-display {
font-family: 'Playfair Display', serif; /* A common choice for classic/elegant feel */
}
}
/* Tailwind's default breakpoints for reference:
sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px
*/
/* Mobile styles (default) */
.timeline-item > div:first-child {
margin-left: 0;
margin-right: 0;
width: 100%;
}
.left-aligned .order-1:first-child {
order: 1; /* text content */
}
.left-aligned .order-1:nth-child(2) {
order: 2; /* circle */
}
.left-aligned .order-1:nth-child(3) {
order: 3; /* empty div */
}
.right-aligned .order-1:first-child {
order: 3; /* empty div */
}
.right-aligned .order-1:nth-child(2) {
order: 2; /* circle */
}
.right-aligned .order-1:nth-child(3) {
order: 1; /* text content */
}
/* Small screens and up (sm) */
@media (min-width: 640px) {
.left-aligned .order-1:first-child {
order: 3;
}
.left-aligned .order-1:nth-child(2) {
order: 2;
}
.left-aligned .order-1:nth-child(3) {
order: 1;
}
.right-aligned .order-1:first-child {
order: 1;
}
.right-aligned .order-1:nth-child(2) {
order: 2;
}
.right-aligned .order-1:nth-child(3) {
order: 3;
}
.left-aligned div:nth-child(3) {
text-align: right; /* Align text right for left-aligned card */
}
/* Adjust margins for two-column layout */
.left-aligned div:nth-child(3) {
margin-right: -4px; /* compensate for line */
transform: translateX(4px);
}
.right-aligned div:nth-child(3) {
margin-left: -4px; /* compensate for line */
transform: translateX(-4px);
}
.timeline-item > div:nth-child(3) {
width: 45%; /* Shrink content width for two columns */
}
.timeline-item > div:first-child {
width: 45%; /* Shrink content width for two columns */
}
/* Specific adjustment for mobile: make the line less prominent */
.absolute.left-1\/2 {
left: 50%; /* Center the line */
}
}
/* Keyframe for fade-in animations */
@keyframes fade-in-right {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes fade-in-left {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
.animate-fade-in-right {
animation: fade-in-right 0.6s ease-out forwards; /* Longer for visual effect */
}
.animate-fade-in-left {
animation: fade-in-left 0.6s ease-out forwards;
}
/* To ensure animations trigger correctly, using a simple .in-view approach or JS for more complex scenarios is needed.
For this pure HTML example, they will run on load. */
</style>
<!-- Adding Google Fonts for Art Deco feel (optional, but good for demo) -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</div>Componentes relacionados
Componente de línea de tiempo de Glassmorphism
Un componente de línea de tiempo responsivo con un estilo de morfismo de vidrio con un esquema de color triádico. Incluye elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, adecuados para el blog y el consumo de contenido, con soporte para modo oscuro.
Componente de línea de tiempo
Un componente de línea de tiempo receptivo con elementos de diseño 3D, combinación de colores en tonos tierra y compatibilidad con el modo oscuro. Adecuado para carteras.
Componente de línea de tiempo
Un componente de línea de tiempo responsivo con una combinación de colores dulces, transiciones de degradado y compatibilidad con el modo oscuro, adecuado para mostrar trabajos o productos en un portafolio. Cuenta con múltiples eventos de línea de tiempo.