Tailwind Css
Timeline
Vertical
Etapes
Responsive
Template
Javascript
Composant timeline verticale Tailwind CSS avec Inter font, animations fluides, thème utility-first et design épuré moderne.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Snippets Timeline Tailwindcss 2026 05050250 | AngularForAll</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
* { font-family: 'Inter', sans-serif; }
body {
background: #faf9fc;
background-image: radial-gradient(ellipse at 10% 20%, rgba(120, 80, 240, 0.05) 0%, transparent 50%),
radial-gradient(ellipse at 90% 80%, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
}
.timeline-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, #7c3aed, #ec4899);
transform: translateX(-50%);
border-radius: 12px;
box-shadow: 0 0 20px rgba(124, 58, 237, 0.15);
}
.timeline-dot {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 18px;
height: 18px;
background: white;
border: 3px solid #7c3aed;
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.1), 0 4px 12px rgba(0,0,0,0.08);
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 2;
}
.timeline-dot:hover {
transform: translateX(-50%) scale(1.2);
border-color: #ec4899;
box-shadow: 0 0 0 8px rgba(236, 72, 153, 0.15);
}
.timeline-dot i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.5rem;
color: #7c3aed;
transition: color 0.3s;
}
.timeline-card {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 20px;
padding: 1.75rem 2rem;
box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
position: relative;
width: 100%;
}
.timeline-card:hover {
transform: translateY(-6px) scale(1.01);
box-shadow: 0 24px 50px -16px rgba(124, 58, 237, 0.12);
background: rgba(255, 255, 255, 0.95);
border-color: rgba(124, 58, 237, 0.15);
}
.timeline-date {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.03em;
color: #6b7280;
background: rgba(243, 244, 246, 0.7);
backdrop-filter: blur(4px);
display: inline-block;
padding: 0.2rem 1.2rem;
border-radius: 40px;
border: 1px solid rgba(255, 255, 255, 0.5);
margin-bottom: 0.75rem;
}
.timeline-title {
font-weight: 700;
font-size: 1.3rem;
color: #1f2937;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.timeline-desc {
color: #4b5563;
font-weight: 400;
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 0.75rem;
}
.timeline-tag {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: linear-gradient(135deg, #f3e8ff, #fce7f3);
color: #7c3aed;
font-size: 0.7rem;
font-weight: 600;
padding: 0.3rem 1.2rem;
border-radius: 40px;
letter-spacing: 0.02em;
text-transform: uppercase;
border: 1px solid rgba(255, 255, 255, 0.4);
}
/* Responsive : mobile = ligne à gauche */
@media (max-width: 767px) {
.timeline-line {
left: 1.8rem;
transform: none;
}
.timeline-dot {
left: 1.8rem;
transform: translateX(-50%);
}
.timeline-dot:hover {
transform: translateX(-50%) scale(1.2);
}
.timeline-card {
width: calc(100% - 4rem);
margin-left: 4.2rem;
padding: 1.5rem 1.5rem 1.5rem 2rem;
}
.timeline-date {
font-size: 0.75rem;
padding: 0.15rem 1rem;
}
}
/* Desktop : alternance gauche/droite avec décalage */
@media (min-width: 768px) {
.timeline-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 3.5rem;
position: relative;
}
.timeline-item .card-wrapper {
width: 42%;
position: relative;
}
.timeline-item:nth-child(odd) .card-wrapper {
margin-right: auto;
text-align: right;
}
.timeline-item:nth-child(even) .card-wrapper {
margin-left: auto;
text-align: left;
}
/* Ajustement du padding selon l'alignement */
.timeline-item:nth-child(odd) .timeline-card {
padding: 1.75rem 2rem 1.75rem 2.5rem;
border-radius: 20px 20px 20px 8px;
}
.timeline-item:nth-child(even) .timeline-card {
padding: 1.75rem 2.5rem 1.75rem 2rem;
border-radius: 20px 20px 8px 20px;
}
.timeline-item:nth-child(odd) .timeline-title {
justify-content: flex-end;
}
.timeline-item:nth-child(even) .timeline-title {
justify-content: flex-start;
}
/* Icône décorative */
.timeline-icon {
font-size: 1.4rem;
color: #7c3aed;
opacity: 0.7;
}
}
/* Ajustement très grands écrans */
@media (min-width: 1400px) {
.timeline-card {
padding: 2rem 2.8rem;
}
}
.footer-credit {
margin-top: 3rem;
color: #6b7280;
font-weight: 400;
font-size: 0.9rem;
}
.footer-credit a {
color: #7c3aed;
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}
.footer-credit a:hover {
color: #ec4899;
}
.glass-tag {
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.6);
padding: 0.3rem 1.2rem;
border-radius: 40px;
color: #4b5563;
font-size: 0.75rem;
font-weight: 500;
}
.icon-bg {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(236, 72, 153, 0.08));
border-radius: 12px;
color: #7c3aed;
font-size: 1.1rem;
}
</style>
</head>
<body>
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<!-- En-tête -->
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/60 backdrop-blur-sm border border-white/60 shadow-sm mb-4">
<i class="fa-regular fa-clock text-purple-600"></i>
<span class="text-sm font-medium text-gray-700">Timeline · Tailwind CSS</span>
</div>
<h1 class="text-4xl md:text-5xl font-extrabold text-gray-900 tracking-tight">
<span class="bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent">Parcours</span> & innovation
</h1>
<p class="text-gray-500 text-lg mt-2 max-w-2xl mx-auto font-light">
Une frise chronologique moderne, épurée et entièrement responsive.
</p>
<div class="flex justify-center gap-4 mt-4 flex-wrap">
<span class="glass-tag"><i class="fa-regular fa-circle-check text-purple-500 mr-1"></i> Interactif</span>
<span class="glass-tag"><i class="fa-regular fa-mobile-button text-pink-500 mr-1"></i> Mobile first</span>
<span class="glass-tag"><i class="fa-regular fa-gem text-purple-500 mr-1"></i> Design moderne</span>
</div>
</div>
<!-- TIMELINE -->
<div class="relative timeline-container">
<!-- ligne verticale centrale -->
<div class="timeline-line"></div>
<!-- Élément 1 -->
<div class="timeline-item">
<div class="card-wrapper">
<div class="timeline-card">
<div class="flex items-center gap-2 mb-1" style="justify-content: inherit;">
<span class="timeline-date"><i class="fa-regular fa-calendar mr-1"></i> 2019 — 2021</span>
</div>
<h4 class="timeline-title">
<span class="icon-bg"><i class="fa-regular fa-lightbulb"></i></span>
<span>Premières idées</span>
</h4>
<p class="timeline-desc">
Exploration des concepts et validation terrain.<br>
<span class="text-gray-400 text-sm">Prototypage, user tests & itérations.</span>
</p>
<span class="timeline-tag"><i class="fa-regular fa-compass"></i> Exploration</span>
</div>
</div>
<div class="timeline-dot">
<i class="fa-regular fa-star"></i>
</div>
</div>
<!-- Élément 2 -->
<div class="timeline-item">
<div class="card-wrapper">
<div class="timeline-card">
<div class="flex items-center gap-2 mb-1" style="justify-content: inherit;">
<span class="timeline-date"><i class="fa-regular fa-calendar mr-1"></i> 2022 — 2023</span>
</div>
<h4 class="timeline-title">
<span class="icon-bg"><i class="fa-regular fa-rocket"></i></span>
<span>Accélération</span>
</h4>
<p class="timeline-desc">
Lancement officiel & premières traction.<br>
<span class="text-gray-400 text-sm">+10k utilisateurs, partenariats stratégiques.</span>
</p>
<span class="timeline-tag"><i class="fa-regular fa-chart-line"></i> Scale</span>
</div>
</div>
<div class="timeline-dot">
<i class="fa-regular fa-arrow-up-right-from-square"></i>
</div>
</div>
<!-- Élément 3 -->
<div class="timeline-item">
<div class="card-wrapper">
<div class="timeline-card">
<div class="flex items-center gap-2 mb-1" style="justify-content: inherit;">
<span class="timeline-date"><i class="fa-regular fa-calendar mr-1"></i> 2024 — 2025</span>
</div>
<h4 class="timeline-title">
<span class="icon-bg"><i class="fa-regular fa-cubes"></i></span>
<span>Expansion</span>
</h4>
<p class="timeline-desc">
Refonte globale & déploiement international.<br>
<span class="text-gray-400 text-sm">Nouveaux marchés, équipe de 50+ personnes.</span>
</p>
<span class="timeline-tag"><i class="fa-regular fa-globe"></i> Global</span>
</div>
</div>
<div class="timeline-dot">
<i class="fa-regular fa-globe"></i>
</div>
</div>
<!-- Élément 4 -->
<div class="timeline-item">
<div class="card-wrapper">
<div class="timeline-card">
<div class="flex items-center gap-2 mb-1" style="justify-content: inherit;">
<span class="timeline-date"><i class="fa-regular fa-calendar mr-1"></i> 2026 — futur</span>
</div>
<h4 class="timeline-title">
<span class="icon-bg"><i class="fa-regular fa-brain"></i></span>
<span>Innovation</span>
</h4>
<p class="timeline-desc">
Intelligence artificielle & expérience immersive.<br>
<span class="text-gray-400 text-sm">R&D, nouvelles frontières technologiques.</span>
</p>
<span class="timeline-tag"><i class="fa-regular fa-microchip"></i> Next gen</span>
</div>
</div>
<div class="timeline-dot">
<i class="fa-regular fa-microchip"></i>
</div>
</div>
</div>
<!-- footer -->
<div class="text-center mt-12 footer-credit">
<span class="inline-block px-5 py-2 rounded-full bg-white/60 backdrop-blur-sm border border-white/60 shadow-sm">
<i class="fa-regular fa-arrow-right mr-1 text-purple-500"></i>
Timeline moderne • <a href="#" class="hover:text-pink-500">Tailwind CSS</a>
</span>
</div>
</div>
<!-- Aucun JS requis pour l'interactivité (CSS pur) -->
</body>
</html>Télécharger le fichier source