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

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

ポートフォリオ内の作品や製品を紹介するためのミニマリストのフラット デザイン タイムライン コンポーネントで、鮮やかな色とダーク テーマのサポートを備えています。

プレビュー

HTMLコード 

<div class="flex flex-col space-y-8 p-8 bg-white dark:bg-gray-800">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-blue-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-blue-500 dark:text-blue-400">January 2022</span>
        </div>
    </div>
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-red-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-red-500 dark:text-red-400">March 2022</span>
        </div>
    </div>
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-green-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-green-500 dark:text-green-400">May 2022</span>
        </div>
    </div>
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-purple-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 4</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-purple-500 dark:text-purple-400">August 2022</span>
        </div>
    </div>
</div>

関連コンポーネント

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

Glassmorphismデザイン、補色スキーム、ダークテーマのサポートを備えたレスポンシブタイムラインコンポーネントで、ビジネスWebサイトに適しています。ぼかし効果のあるすりガラスのような半透明の要素が特徴です。

開ける

グレースケールソーシャルメディアタイムライン

Tailwind CSSで構築された、応答性の高いダークモード対応のソーシャルメディアタイムラインコンポーネント。厳密なグレースケールの配色と、ユーザーアバター、投稿コンテンツ(テキストと画像)、エンゲージメント統計、アクションボタンを備えた複雑なポストカードが特徴です。ソーシャルネットワーキングインターフェース用に設計されており、各投稿に複数のインタラクティブ要素があります。このデザインは、目の疲れを軽減するために暗い背景をサポートしています。JavaScriptは使用しておりません。

開ける

Bauhaus Timeline コンポーネント

バウハウスにインスパイアされたデザインで、幾何学的なフォルムと原色の類似色を使用したシンプルでレスポンシブなタイムラインコンポーネントで、予約/予約システムに適しています。ダークモードのサポートが含まれています。

開ける