CCHub Logo CCHub Tailwind Collection
구성 요소 타임라인 타임라인 구성 요소

타임라인 구성 요소

Tailwind CSS를 사용하여 Brutalism 스타일로 디자인된 반응형 타임라인 구성 요소로, 어두운 테마를 지원하고 자리 표시자 이미지와 아바타를 특징으로 합니다.

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg">
  <h1 class="text-4xl font-bold mb-6 text-gray-800 dark:text-white">Timeline</h1>
  <div class="border-l-4 border-gray-300 dark:border-gray-700">
    <div class="mb-12 ml-4">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md"> 
        <span class="text-sm font-bold text-gray-800 dark:text-white ml-3">John Doe</span>
      </div>
      <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <img src="https://picsum.photos/200/100?random=1" alt="Placeholder" class="rounded-lg mt-2">
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">2023-10-01</span>
    </div>
    <div class="mb-12 ml-4">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md"> 
        <span class="text-sm font-bold text-gray-800 dark:text-white ml-3">Jane Smith</span>
      </div>
      <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <p class="text-gray-700 dark:text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <img src="https://picsum.photos/200/100?random=2" alt="Placeholder" class="rounded-lg mt-2">
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">2023-10-05</span>
    </div>
    <div class="mb-12 ml-4">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md"> 
        <span class="text-sm font-bold text-gray-800 dark:text-white ml-3">Alice Johnson</span>
      </div>
      <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
        <img src="https://picsum.photos/200/100?random=3" alt="Placeholder" class="rounded-lg mt-2">
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">2023-10-10</span>
    </div>
  </div>
</div>

관련 구성 요소

Cyberpunk_Timeline_Dating_Social_Component

데이트 및 소셜 플랫폼을 위한 사이버펑크 미학이 있는 반응형 타임라인 구성 요소입니다. 어두운 배경, 따뜻한 네온 액센트, 데스크톱, 태블릿 및 모바일을 위한 적응형 레이아웃이 특징이며 완전한 다크 모드를 지원합니다.

열다

타임라인 구성 요소

전자 상거래를 위한 미니멀리스트/플랫 디자인으로 스타일링된 반응형 타임라인 구성 요소로, 유사한 색 구성표와 여러 대화형 요소로 다크 모드를 지원합니다.

열다

소셜 미디어 타임라인 구성 요소

소셜 미디어를 위한 간단하고 반응이 빠른 타임라인 구성 요소로, 머티리얼 디자인 원칙에 따라 설계되었습니다. 어스 톤을 사용하며 다크 모드 지원이 포함되어 있습니다. 각 타임라인 항목에는 사용자 아바타, 이름, 게시물 제목 및 자리 표시자 이미지가 표시되며, 이는 소셜 미디어 피드에 일반적입니다.

열다