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

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

ノスタルジックな80年代/90年代の美学を持つ作品や製品を紹介するために設計されたシンプルなレトロ/ビンテージタイムラインコンポーネントで、ダークモードのサポートに類似の配色を使用しています。

プレビュー

HTMLコード 

<div class="flex flex-col items-center p-4">
    <h2 class="text-2xl font-bold text-white mb-4 dark:text-gray-200">Portfolio Timeline</h2>
    <div class="flex flex-col space-y-8">
        <div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
            <div class="flex-shrink-0 mr-4">
                <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 1</h3>
                <p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
                <img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="mt-2 rounded-md">
            </div>
        </div>
        <div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
            <div class="flex-shrink-0 mr-4">
                <img src="https://randomuser.me/api/portraits/thumb/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 2</h3>
                <p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
                <img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="mt-2 rounded-md">
            </div>
        </div>
        <div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
            <div class="flex-shrink-0 mr-4">
                <img src="https://randomuser.me/api/portraits/thumb/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 3</h3>
                <p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
                <img src="https://picsum.photos/200/100?random=3" alt="Project Image" class="mt-2 rounded-md">
            </div>
        </div>
    </div>
</div>

関連コンポーネント

Playful_Music_Timeline_Component

音楽およびオーディオプラットフォーム向けに設計された遊び心のある楽しいタイムラインコンポーネントで、明るい宝石の色調、丸みを帯びた要素、ダークモードをサポートするレスポンシブレイアウトが特徴です。オーディオイベントまたはトラックを経時的に表示します。

開ける

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

Skeuomorphic デザイン、類似の配色、ダークテーマをサポートするブログ/コンテンツ Web サイト向けの中程度の複雑さを備えたレスポンシブ タイムライン コンポーネント。JavaScriptは不要で、ダークモードをサポートするTailwind CSSを使用します。picsum.photosの画像と randomuser.me のアバターを使用しています。

開ける

Neumorphism Timeline コンポーネント

Tailwind CSS を使用した Neumorphism でスタイル付けされたレスポンシブ Timeline コンポーネントで、ダーク モードがサポートされています。

開ける