Componente de línea de tiempo skeuomórfico
Un componente de línea de tiempo skeuomórfico con efectos responsivos y soporte para temas oscuros, creado con Tailwind CSS. No se necesita JavaScript, solo HTML y CSS.
Código HTML
<div class="container mx-auto px-4 py-8">
<!-- Skeuomorphic Timeline -->
<div class="relative">
<!-- Vertical Line (mimics a physical line) -->
<div class="border-r-4 border-gray-300 dark:border-gray-700 absolute h-full top-0 left-1/2 transform -translate-x-1/2"></div>
<!-- Timeline Items -->
<div class="mb-8 flex justify-between items-center w-full right-timeline">
<div class="order-1 w-5/12"></div>
<div class="order-1 w-5/12 px-1 py-4 text-right">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700">
<h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 1</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</div>
<!-- Timeline Dot (mimics a physical marker) -->
<div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div>
</div>
<div class="mb-8 flex justify-between items-center w-full left-timeline">
<div class="order-1 w-5/12 px-1 py-4 text-left">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700">
<h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 2</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</div>
<div class="order-1 w-5/12"></div>
<!-- Timeline Dot (mimics a physical marker) -->
<div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div>
</div>
<div class="mb-8 flex justify-between items-center w-full right-timeline">
<div class="order-1 w-5/12"></div>
<div class="order-1 w-5/12 px-1 py-4 text-right">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700">
<h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 3</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</div>
<!-- Timeline Dot (mimics a physical marker) -->
<div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div>
</div>
<div class="mb-8 flex justify-between items-center w-full left-timeline">
<div class="order-1 w-5/12 px-1 py-4 text-left">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700">
<h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 4</h3>
<p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</div>
<div class="order-1 w-5/12"></div>
<!-- Timeline Dot (mimics a physical marker) -->
<div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div>
</div>
</div>
</div>
<style>
/* Styles for a simple skeuomorphic look */
.left-timeline .bg-white,
.right-timeline .bg-white {
box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}
.dark .left-timeline .bg-gray-800,
.dark .right-timeline .bg-gray-800 {
box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #2e2e2e;
}
.left-timeline .bg-white.dark\:bg-gray-800,
.right-timeline .bg-white.dark\:bg-gray-800 {
border-color: #d1d5db; /* subtle light border */
}
.dark .left-timeline .bg-white.dark\:bg-gray-800,
.dark .right-timeline .bg-white.dark\:bg-gray-800 {
border-color: #4b5563; /* subtle dark border */
}
@media (max-width: 768px) {
.left-timeline, .right-timeline {
justify-content: flex-end;
}
.left-timeline .w-5/12,
.right-timeline .w-5/12 {
width: 100%;
}
.left-timeline .px-1,
.right-timeline .px-1 {
padding-left: 1rem;
padding-right: 1rem;
}
.left-timeline .text-left,
.right-timeline .text-right {
text-align: left;
}
.left-timeline .order-1,
.right-timeline .order-1 {
order: 1;
}
.left-timeline .w-5/12:nth-child(1),
.right-timeline .w-5/12:nth-child(1) {
order: 2;
}
.left-timeline .rounded-full,
.right-timeline .rounded-full {
position: relative;
left: auto;
transform: none;
margin-right: 1rem;
}
.border-r-4 {
border-right-width: 0;
border-left-width: 4px;
left: 1rem;
}
}
</style>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 receptivo para paneles, con microinteracciones y una combinación de colores pastel, con soporte para temas oscuros. Utiliza Tailwind CSS para el estilo e incluye imágenes de marcador de posición de picsum.photos y avatares de randomuser.me.