타임라인 구성 요소
다크 모드를 지원하고 Tailwind CSS를 사용하는 마이크로 인터랙션이 있는 반응형 타임라인 구성 요소입니다. JavaScript가 필요하지 않습니다.
HTML 코드
<div class="container mx-auto px-4 py-8">
<div class="flex flex-col md:grid grid-cols-12 text-gray-50">
<div class="flex md:contents">
<div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
<div class="h-full w-6 flex items-center justify-center">
<div class="h-full w-1 bg-blue-800 pointer-events-none"></div>
</div>
<div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-blue-500 shadow text-center">
<i class="fas fa-check-circle text-white"></i>
</div>
</div>
<div class="col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
<h3 class="font-semibold text-lg mb-1">Event Title 1</h3>
<p class="leading-tight text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et nunc id erat facilisis ultricies sed ac erat.
</p>
</div>
</div>
<div class="flex md:contents">
<div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
<div class="h-full w-6 flex items-center justify-center">
<div class="h-full w-1 bg-blue-800 pointer-events-none"></div>
</div>
<div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-blue-500 shadow text-center">
<i class="fas fa-check-circle text-white"></i>
</div>
</div>
<div class="col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
<h3 class="font-semibold text-lg mb-1">Event Title 2</h3>
<p class="leading-tight text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et nunc id erat facilisis ultricies sed ac erat.
</p>
</div>
</div>
<div class="flex md:contents">
<div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
<div class="h-full w-6 flex items-center justify-center">
<div class="h-full w-1 bg-blue-800 pointer-events-none"></div>
</div>
<div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-blue-500 shadow text-center">
<i class="fas fa-check-circle text-white"></i>
</div>
</div>
<div class="col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
<h3 class="font-semibold text-lg mb-1">Event Title 3</h3>
<p class="leading-tight text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et nunc id erat facilisis ultricies sed ac erat.
</p>
</div>
</div>
</div>
</div>
관련 구성 요소
Brutalist_Sepia_Timeline_Documentation
문서 또는 위키 사이트를 위한 복잡하고 잔인한 스타일의 타임라인 구성 요소로, 세피아/갈색 톤과 다크 모드 지원으로 완전한 응답성을 제공합니다. 높은 대비와 생생한 미학으로 설계되었습니다.