타임라인 구성 요소
다크 모드를 지원하고 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>
관련 구성 요소
타임라인 구성 요소
Glassmorphism 디자인, 보색 구성표 및 어두운 테마 지원을 갖춘 반응형 타임라인 구성 요소로 비즈니스 웹 사이트에 적합합니다. 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소가 특징입니다.
타임라인 구성 요소
스큐어모픽 디자인의 반응형 타임라인 구성 요소, 유사한 색 구성표, 어두운 테마를 지원하는 블로그/콘텐츠 웹사이트의 중간 복잡성. JavaScript가 필요하지 않으며 다크 모드를 지원하는 Tailwind CSS를 사용합니다. picsum.photos의 이미지와 randomuser.me 의 아바타가 사용됩니다.