아르데코 타임라인 컴포넌트
이벤트/컨퍼런스를 위한 반응형 타임라인 구성 요소로, 보라색/보라색 색 구성표의 아르데코 미학에서 영감을 받아 다크 모드를 지원합니다.
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>관련 구성 요소
레트로 타임라인
포트폴리오를 위해 설계된 Tailwind CSS를 사용하는 간단한 레트로/빈티지 타임라인 구성 요소입니다. 반응형 레이아웃과 보색을 사용하는 어두운 모드 지원이 특징입니다.
Brutalist_Sepia_Timeline_Documentation
문서 또는 위키 사이트를 위한 복잡하고 잔인한 스타일의 타임라인 구성 요소로, 세피아/갈색 톤과 다크 모드 지원으로 완전한 응답성을 제공합니다. 높은 대비와 생생한 미학으로 설계되었습니다.