타임라인 구성 요소
네온/글로우 효과와 가을 색 구성표가 있는 복잡하고 반응이 빠른 타임라인 구성 요소로, 다크 모드 지원을 포함하여 포럼 또는 커뮤니티 플랫폼에 적합합니다.
HTML 코드
<div class="font-sans bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 min-h-screen p-4 sm:p-6 lg:p-8">
<div class="max-w-6xl mx-auto py-8">
<h2 class="text-center text-4xl sm:text-5xl font-extrabold mb-12 relative overflow-hidden">
<span class="relative z-10 text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-rose-600 to-red-800 dark:from-orange-300 dark:via-rose-500 dark:to-red-700">
Community Journey
</span>
<span class="absolute inset-0 z-0 blur-lg opacity-70 bg-gradient-to-r from-orange-400 via-rose-600 to-red-800 dark:from-orange-300 dark:via-rose-500 dark:to-red-700 animate-pulse-light"></span>
</h2>
<div class="relative before:absolute before:inset-y-0 before:left-3 sm:before:left-1/2 before:w-1 before:bg-gradient-to-b before:from-orange-500 before:via-rose-700 before:to-red-900 dark:before:from-orange-400 dark:before:via-rose-600 dark:before:to-red-800 before:origin-top before:scale-y-0 before:animate-timeline-grow">
<!-- Timeline Item 1 -->
<div class="timeline-item flex items-center w-full my-8 group">
<div class="hidden sm:block sm:w-1/2 text-right pr-8">
<div class="bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-l-4 border-orange-500 dark:border-orange-400 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:rotate-1">
<div class="absolute -right-2 top-1/2 -mt-2 w-4 h-4 bg-orange-500 dark:bg-orange-400 rotate-45"></div>
<span class="block text-sm font-semibold text-orange-400 dark:text-orange-300 mb-1">October 26, 2023</span>
<h3 class="text-xl font-bold mb-2 text-orange-600 dark:text-orange-400 custom-glow">New Horizons Launched!</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">The community officially opened its doors, welcoming pioneers from around the globe. Discussions began on crafting our collective future.</p>
<img src="https://picsum.photos/400/250?random=1" alt="Launch day" class="mt-4 rounded-md object-cover w-full h-32 opacity-80 group-hover:opacity-100 transition-opacity duration-300">
</div>
</div>
<div class="w-8 h-8 rounded-full bg-orange-500 dark:bg-orange-400 absolute left-2 sm:left-1/2 -ml-0.5 sm:-ml-4 flex items-center justify-center
ring-4 ring-orange-300 dark:ring-orange-600 z-10 custom-glow-sm">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">1</span>
</div>
<div class="w-full sm:w-1/2 sm:pl-8 pr-4 sm:pr-0">
<div class="sm:hidden bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-l-4 border-orange-500 dark:border-orange-400 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:-rotate-1">
<div class="absolute -left-2 top-1/2 -mt-2 w-4 h-4 bg-orange-500 dark:bg-orange-400 rotate-45"></div>
<span class="block text-sm font-semibold text-orange-400 dark:text-orange-300 mb-1">October 26, 2023</span>
<h3 class="text-xl font-bold mb-2 text-orange-600 dark:text-orange-400 custom-glow">New Horizons Launched!</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">The community officially opened its doors, welcoming pioneers from around the globe. Discussions began on crafting our collective future.</p>
<img src="https://picsum.photos/400/250?random=1" alt="Launch day" class="mt-4 rounded-md object-cover w-full h-32 opacity-80 group-hover:opacity-100 transition-opacity duration-300">
</div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="timeline-item flex items-center w-full my-8 group flex-row-reverse">
<div class="hidden sm:block sm:w-1/2 text-left pl-8">
<div class="bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-r-4 border-rose-700 dark:border-rose-600 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:-rotate-1">
<div class="absolute -left-2 top-1/2 -mt-2 w-4 h-4 bg-rose-700 dark:bg-rose-600 rotate-45"></div>
<span class="block text-sm font-semibold text-rose-600 dark:text-rose-500 mb-1">November 15, 2023</span>
<h3 class="text-xl font-bold mb-2 text-rose-800 dark:text-rose-600 custom-glow">First Community Poll</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">Our members cast their votes on the initial shared resource allocation, a true test of our collaborative spirit.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-rose-500">
<div>
<p class="text-gray-600 dark:text-gray-400 text-xs">Poll initiated by</p>
<p class="font-medium text-rose-600 dark:text-rose-500">Elara_Sage</p>
</div>
</div>
</div>
</div>
<div class="w-8 h-8 rounded-full bg-rose-700 dark:bg-rose-600 absolute left-2 sm:left-1/2 -ml-0.5 sm:-ml-4 flex items-center justify-center
ring-4 ring-rose-300 dark:ring-rose-800 z-10 custom-glow-sm">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">2</span>
</div>
<div class="w-full sm:w-1/2 sm:pr-8 pl-4 sm:pl-0">
<div class="sm:hidden bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-r-4 border-rose-700 dark:border-rose-600 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:rotate-1">
<div class="absolute -right-2 top-1/2 -mt-2 w-4 h-4 bg-rose-700 dark:bg-rose-600 rotate-45"></div>
<span class="block text-sm font-semibold text-rose-600 dark:text-rose-500 mb-1">November 15, 2023</span>
<h3 class="text-xl font-bold mb-2 text-rose-800 dark:text-rose-600 custom-glow">First Community Poll</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">Our members cast their votes on the initial shared resource allocation, a true test of our collaborative spirit.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-rose-500">
<div>
<p class="text-gray-600 dark:text-gray-400 text-xs">Poll initiated by</p>
<p class="font-medium text-rose-600 dark:text-rose-500">Elara_Sage</p>
</div>
</div>
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="timeline-item flex items-center w-full my-8 group">
<div class="hidden sm:block sm:w-1/2 text-right pr-8">
<div class="bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-l-4 border-red-900 dark:border-red-800 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:rotate-1">
<div class="absolute -right-2 top-1/2 -mt-2 w-4 h-4 bg-red-900 dark:bg-red-800 rotate-45"></div>
<span class="block text-sm font-semibold text-red-800 dark:text-red-700 mb-1">December 01, 2023</span>
<h3 class="text-xl font-bold mb-2 text-red-900 dark:text-red-800 custom-glow">Knowledge Hub Unveiled</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">A new section dedicated to shared learning resources, tutorials, and FAQs was launched, fostering self-sufficiency.</p>
<div class="flex flex-wrap gap-2 mt-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">Guides</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">Tutorials</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">FAQs</span>
</div>
</div>
</div>
<div class="w-8 h-8 rounded-full bg-red-900 dark:bg-red-800 absolute left-2 sm:left-1/2 -ml-0.5 sm:-ml-4 flex items-center justify-center
ring-4 ring-red-300 dark:ring-red-900 z-10 custom-glow-sm">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">3</span>
</div>
<div class="w-full sm:w-1/2 sm:pl-8 pr-4 sm:pr-0">
<div class="sm:hidden bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-l-4 border-red-900 dark:border-red-800 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:-rotate-1">
<div class="absolute -left-2 top-1/2 -mt-2 w-4 h-4 bg-red-900 dark:bg-red-800 rotate-45"></div>
<span class="block text-sm font-semibold text-red-800 dark:text-red-700 mb-1">December 01, 2023</span>
<h3 class="text-xl font-bold mb-2 text-red-900 dark:text-red-800 custom-glow">Knowledge Hub Unveiled</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">A new section dedicated to shared learning resources, tutorials, and FAQs was launched, fostering self-sufficiency.</p>
<div class="flex flex-wrap gap-2 mt-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">Guides</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">Tutorials</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">FAQs</span>
</div>
</div>
</div>
</div>
<!-- Timeline Item 4 -->
<div class="timeline-item flex items-center w-full my-8 group flex-row-reverse">
<div class="hidden sm:block sm:w-1/2 text-left pl-8">
<div class="bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-r-4 border-orange-500 dark:border-orange-400 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:-rotate-1">
<div class="absolute -left-2 top-1/2 -mt-2 w-4 h-4 bg-orange-500 dark:bg-orange-400 rotate-45"></div>
<span class="block text-sm font-semibold text-orange-400 dark:text-orange-300 mb-1">January 10, 2024</span>
<h3 class="text-xl font-bold mb-2 text-orange-600 dark:text-orange-400 custom-glow">First Community Event</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">A successful virtual meet-up brought members closer, with shared stories and future plans discussed.</p>
<div class="flex -space-x-2 mt-4">
<img class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Amy's avatar">
<img class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600" src="https://randomuser.me/api/portraits/men/50.jpg" alt="John's avatar">
<img class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Sarah's avatar">
<div class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600 bg-orange-500 flex items-center justify-center text-white text-sm font-medium">+50</div>
</div>
</div>
</div>
<div class="w-8 h-8 rounded-full bg-orange-500 dark:bg-orange-400 absolute left-2 sm:left-1/2 -ml-0.5 sm:-ml-4 flex items-center justify-center
ring-4 ring-orange-300 dark:ring-orange-600 z-10 custom-glow-sm">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">4</span>
</div>
<div class="w-full sm:w-1/2 sm:pr-8 pl-4 sm:pl-0">
<div class="sm:hidden bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-r-4 border-orange-500 dark:border-orange-400 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:rotate-1">
<div class="absolute -right-2 top-1/2 -mt-2 w-4 h-4 bg-orange-500 dark:bg-orange-400 rotate-45"></div>
<span class="block text-sm font-semibold text-orange-400 dark:text-orange-300 mb-1">January 10, 2024</span>
<h3 class="text-xl font-bold mb-2 text-orange-600 dark:text-orange-400 custom-glow">First Community Event</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">A successful virtual meet-up brought members closer, with shared stories and future plans discussed.</p>
<div class="flex -space-x-2 mt-4">
<img class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Amy's avatar">
<img class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600" src="https://randomuser.me/api/portraits/men/50.jpg" alt="John's avatar">
<img class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Sarah's avatar">
<div class="w-10 h-10 rounded-full border-2 border-orange-300 dark:border-orange-600 bg-orange-500 flex items-center justify-center text-white text-sm font-medium">+50</div>
</div>
</div>
</div>
</div>
<!-- Timeline Item 5 -->
<div class="timeline-item flex items-center w-full my-8 group">
<div class="hidden sm:block sm:w-1/2 text-right pr-8">
<div class="bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-l-4 border-rose-700 dark:border-rose-600 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:rotate-1">
<div class="absolute -right-2 top-1/2 -mt-2 w-4 h-4 bg-rose-700 dark:bg-rose-600 rotate-45"></div>
<span class="block text-sm font-semibold text-rose-600 dark:text-rose-500 mb-1">February 20, 2024</span>
<h3 class="text-xl font-bold mb-2 text-rose-800 dark:text-rose-600 custom-glow">Moderation Team Expansion</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">Growing pains led to the expansion of our dedicated moderation team, ensuring a safe and vibrant space.</p>
<a href="#" class="mt-4 inline-flex items-center text-rose-600 dark:text-rose-500 hover:text-rose-800 dark:hover:text-rose-700 font-medium transition-colors duration-200">
Meet the Team
<svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
</a>
</div>
</div>
<div class="w-8 h-8 rounded-full bg-rose-700 dark:bg-rose-600 absolute left-2 sm:left-1/2 -ml-0.5 sm:-ml-4 flex items-center justify-center
ring-4 ring-rose-300 dark:ring-rose-800 z-10 custom-glow-sm">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">5</span>
</div>
<div class="w-full sm:w-1/2 sm:pl-8 pr-4 sm:pr-0">
<div class="sm:hidden bg-brown-800/20 dark:bg-brown-900/40 p-4 rounded-lg shadow-lg backdrop-blur-sm relative border-l-4 border-rose-700 dark:border-rose-600 transform transition-all duration-300 group-hover:scale-105 group-hover:z-10 group-hover:-rotate-1">
<div class="absolute -left-2 top-1/2 -mt-2 w-4 h-4 bg-rose-700 dark:bg-rose-600 rotate-45"></div>
<span class="block text-sm font-semibold text-rose-600 dark:text-rose-500 mb-1">February 20, 2024</span>
<h3 class="text-xl font-bold mb-2 text-rose-800 dark:text-rose-600 custom-glow">Moderation Team Expansion</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">Growing pains led to the expansion of our dedicated moderation team, ensuring a safe and vibrant space.</p>
<a href="#" class="mt-4 inline-flex items-center text-rose-600 dark:text-rose-500 hover:text-rose-800 dark:hover:text-rose-700 font-medium transition-colors duration-200">
Meet the Team
<svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
</a>
</div>
</div>
</div>
</div>
</div>
<style>
@keyframes pulse-light {
0% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.02); }
100% { opacity: 0.7; transform: scale(1); }
}
@keyframes glow {
0% { text-shadow: 0 0 5px rgba(255, 165, 0, 0.5), 0 0 10px rgba(255, 69, 0, 0.4); }
50% { text-shadow: 0 0 10px rgba(255, 165, 0, 0.8), 0 0 20px rgba(255, 69, 0, 0.6); }
100% { text-shadow: 0 0 5px rgba(255, 165, 0, 0.5), 0 0 10px rgba(255, 69, 0, 0.4); }
}
@keyframes glow-dark {
0% { text-shadow: 0 0 5px rgba(251, 146, 60, 0.5), 0 0 10px rgba(244, 63, 94, 0.4); }
50% { text-shadow: 0 0 10px rgba(251, 146, 60, 0.8), 0 0 20px rgba(244, 63, 94, 0.6); }
100% { text-shadow: 0 0 5px rgba(251, 146, 60, 0.5), 0 0 10px rgba(244, 63, 94, 0.4); }
}
@keyframes glow-sm {
0% { box-shadow: 0 0 3px rgba(255, 165, 0, 0.6), 0 0 6px rgba(255, 69, 0, 0.4); }
50% { box-shadow: 0 0 6px rgba(255, 165, 0, 0.9), 0 0 12px rgba(255, 69, 0, 0.7); }
100% { box-shadow: 0 0 3px rgba(255, 165, 0, 0.6), 0 0 6px rgba(255, 69, 0, 0.4); }
}
@keyframes glow-sm-dark {
0% { box-shadow: 0 0 3px rgba(251, 146, 60, 0.6), 0 0 6px rgba(244, 63, 94, 0.4); }
50% { box-shadow: 0 0 6px rgba(251, 146, 60, 0.9), 0 0 12px rgba(244, 63, 94, 0.7); }
100% { box-shadow: 0 0 3px rgba(251, 146, 60, 0.6), 0 0 6px rgba(244, 63, 94, 0.4); }
}
.animate-pulse-light {
animation: pulse-light 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.custom-glow {
animation: glow 3s ease-in-out infinite;
}
.dark .custom-glow {
animation: glow-dark 3s ease-in-out infinite;
}
.custom-glow-sm {
animation: glow-sm 2.5s ease-in-out infinite;
}
.dark .custom-glow-sm {
animation: glow-sm-dark 2.5s ease-in-out infinite;
}
@keyframes timeline-grow {
0% {
transform: scaleY(0);
transform-origin: top;
}
100% {
transform: scaleY(1);
transform-origin: top;
}
}
.animate-timeline-grow {
animation: timeline-grow 2s ease-out forwards;
}
/* Fallback for sm: breakpoints for flex-direction */
.timeline-item > div:first-child {
width: 100%; /* Default for mobile */
text-align: left;
padding-right: 0;
}
.timeline-item.flex-row-reverse > div:first-child {
text-align: left;
padding-left: 0;
}
@media (min-width: 640px) {
.timeline-item > div:first-child {
width: 50%;
text-align: right;
padding-right: 2rem; /* Matches sm:pr-8 */
}
.timeline-item.flex-row-reverse > div:first-child {
text-align: left;
padding-left: 2rem; /* Matches sm:pl-8 */
}
.timeline-item > div:last-child {
width: 50%;
padding-left: 2rem; /* Matches sm:pl-8 */
padding-right: 0; /* Clear mobile pr-4 */
}
.timeline-item.flex-row-reverse > div:last-child {
padding-right: 2rem; /* Matches sm:pr-8 */
padding-left: 0; /* Clear mobile pl-4 */
}
}
</style>
</div>관련 구성 요소
그레이스케일 소셜 미디어 타임라인
Tailwind CSS로 구축된 반응형 다크 모드 지원 소셜 미디어 타임라인 구성 요소입니다. 엄격한 회색조 색 구성표와 사용자 아바타, 게시물 콘텐츠(텍스트 및 이미지), 참여 통계 및 작업 버튼이 있는 복잡한 엽서가 특징입니다. 각 게시물에 여러 대화형 요소가 있는 소셜 네트워킹 인터페이스를 위해 설계되었습니다. 이 디자인은 눈의 피로를 줄이기 위해 어두운 배경을 지원합니다. JavaScript는 사용되지 않습니다.
타임라인 구성 요소
포트폴리오에서 작업 또는 제품을 보여주기 위한 미니멀리스트/플랫 디자인 타임라인 구성 요소로, Tailwind CSS를 사용하여 응답성 및 다크 모드를 지원하도록 설계되었습니다.