CCHub Logo CCHub Tailwind Collection
コンポーネント タイムライン タイムラインコンポーネント

タイムラインコンポーネント

3D デザイン要素、アーストーンの配色、ダークモードのサポートを備えたレスポンシブタイムラインコンポーネント。ポートフォリオに適しています。

プレビュー

HTMLコード 

<div class="container mx-auto py-12">
  <div class="relative wrap overflow-hidden p-10 h-full">
    <div class="border-2-2 absolute top-0 left-1/2 w-0.5 h-full bg-gray-700 transform -translate-x-1/2 dark:bg-gray-300"></div>
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="order-1 w-5/12 px-1 py-4 text-right">
        <p class="mb-3 text-base text-gray-900 dark:text-white">10 May 2023</p>
        <h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Alpha</h4>
        <p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
          Lorem ipsum dolor sit amet messy, consectetur adipiscing elit. Sed do eiusmod tempor messy incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
    </div>
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="order-1 w-5/12 px-1 py-4 text-left">
        <p class="mb-3 text-base text-gray-900 dark:text-white">15 June 2023</p>
        <h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Beta</h4>
        <p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
    </div>
     <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="order-1 w-5/12 px-1 py-4 text-right">
        <p class="mb-3 text-base text-gray-900 dark:text-white">10 May 2023</p>
        <h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Alpha</h4>
        <p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
    </div>
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="order-1 w-5/12 px-1 py-4 text-left">
        <p class="mb-3 text-base text-gray-900 dark:text-white">15 June 2023</p>
        <h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Beta</h4>
        <p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
    </div>
  </div>
</div>

関連コンポーネント

Brutalist_Sepia_Timeline_Documentation

ドキュメントや Wiki サイト向けの複雑なブルータリズムスタイルのタイムラインコンポーネントで、セピア/ブラウンの色調とダークモードサポートによる完全な応答性が特徴です。ハイコントラストと生々しい美学で設計されています。

開ける

タイムラインコンポーネント

Tailwind CSSを使用してBrutalismスタイルでデザインされたレスポンシブなタイムラインコンポーネントで、ダークテーマをサポートし、プレースホルダー画像とアバターを備えています。

開ける

タイムラインコンポーネント

グレースケールの配色でスキューモーフィックなスタイルでデザインされたシンプルなレスポンシブタイムラインコンポーネントで、ビジネス/企業のWebサイトに適しています。ダークテーマのサポートを特徴とし、スタイリングにTailwind CSSを使用します。

開ける