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

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

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

プレビュー

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>

関連コンポーネント

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

教育プラットフォーム向けに設計された複雑で応答性の高いタイムラインコンポーネントで、アースカラーと完全なダークモードのサポートを備えた、すっきりとしたミニマリストのタイポグラフィに焦点を当てたデザインが特徴です。

開ける

Brutalist_Sepia_Timeline_Documentation

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

開ける

Glassmorphism Timeline コンポーネント

3 つのカラー スキームを持つ glassmorphism スタイルを特徴とするレスポンシブ タイムライン コンポーネント。ぼかし効果のあるすりガラスのような半透明の要素が含まれており、ブログやコンテンツの消費に適しており、ダークモードがサポートされています。

開ける