検索コンポーネント

カテゴリ

タイムライン

時系列でのイベントの視覚的表現

Glassmorphism Timeline コンポーネント

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

開けるプレビュー

                <div class="bg-gray-50 dark:bg-gray-900 flex justify-center py-10">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-xl w-full backdrop-blur-md bg-opacity-30 border border-gray-200 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Timeline</h2>
        <div class="relative mb-4">
            <div class="flex justify-between items-center mb-4">
                <div class="w-1/2 flex items-center">
                    <div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
                        <img src="https://picsum.photos/40/40" alt="" class="object-cover">
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Event 1</p>
                        <p class="text-xs text-gray-500 dark:text-gray-500">Date 1</p>
                    </div>
                </div>
                <div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
                <div class="w-1/2 text-right">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 1.</p>
                </div>
            </div>
        </div>
        <div class="relative mb-4">
            <div class="flex justify-between items-center mb-4">
                <div class="w-1/2 flex items-center">
                    <div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
                        <img src="https://picsum.photos/40/40" alt="" class="object-cover">
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Event 2</p>
                        <p class="text-xs text-gray-500 dark:text-gray-500">Date 2</p>
                    </div>
                </div>
                <div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
                <div class="w-1/2 text-right">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 2.</p>
                </div>
            </div>
        </div>
        <div class="relative mb-4">
            <div class="flex justify-between items-center mb-4">
                <div class="w-1/2 flex items-center">
                    <div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
                        <img src="https://picsum.photos/40/40" alt="" class="object-cover">
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Event 3</p>
                        <p class="text-xs text-gray-500 dark:text-gray-500">Date 3</p>
                    </div>
                </div>
                <div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
                <div class="w-1/2 text-right">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 3.</p>
                </div>
            </div>
        </div>
    </div>
</div>

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

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

開けるプレビュー

                <section class="relative antialiased bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  <div class="container mx-auto px-4 py-8 relative">
    <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6">
      <div class="flex flex-col md:flex-row -mx-6">
        <div class="md:flex-shrink-0 w-full md:w-1/3 px-6 mb-6 md:mb-0">
          <div class="relative">
            <img src="https://picsum.photos/400/300?random=1" alt="Timeline Image" class="w-full rounded-lg shadow-md">
            <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-75 rounded-lg"></div>
            <div class="absolute bottom-0 left-0 right-0 p-4 text-center text-white">
              <h2 class="text-xl font-semibold">Timeline Title</h2>
              <p class="text-sm">A brief description of this timeline event.</p>
            </div>
          </div>
        </div>
        <div class="md:flex-grow w-full md:w-2/3 px-6">
          <h3 class="text-2xl font-bold mb-4">Event Title 1</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-500">
            <div>
              <p class="font-semibold">John Doe</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Posted on January 1, 2023</p>
            </div>
          </div>
          <div class="border-l-4 border-purple-500 pl-4">
            <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 mt-8">
      <div class="flex flex-col md:flex-row -mx-6">
        <div class="md:flex-grow w-full md:w-2/3 px-6 order-2 md:order-1">
          <h3 class="text-2xl font-bold mb-4">Event Title 2</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-6">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-green-500">
            <div>
              <p class="font-semibold">Jane Smith</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Posted on February 15, 2023</p>
            </div>
          </div>
          <div class="border-l-4 border-green-500 pl-4">
            <p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
        <div class="md:flex-shrink-0 w-full md:w-1/3 px-6 mb-6 md:mb-0 order-1 md:order-2">
          <div class="relative">
            <img src="https://picsum.photos/400/300?random=2" alt="Timeline Image" class="w-full rounded-lg shadow-md">
            <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-75 rounded-lg"></div>
            <div class="absolute bottom-0 left-0 right-0 p-4 text-center text-white">
              <h2 class="text-xl font-semibold">Another Title</h2>
              <p class="text-sm">Related image description.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 mt-8">
      <div class="flex flex-col md:flex-row -mx-6">
        <div class="md:flex-shrink-0 w-full md:w-1/3 px-6 mb-6 md:mb-0">
          <div class="relative">
            <img src="https://picsum.photos/400/300?random=3" alt="Timeline Image" class="w-full rounded-lg shadow-md">
            <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-75 rounded-lg"></div>
            <div class="absolute bottom-0 left-0 right-0 p-4 text-center text-white">
              <h2 class="text-xl font-semibold">Final Event</h2>
              <p class="text-sm">Concluding event details.</p>
            </div>
          </div>
        </div>
        <div class="md:flex-grow w-full md:w-2/3 px-6">
          <h3 class="text-2xl font-bold mb-4">Event Title 3</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-6">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
          <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-blue-500">
            <div>
              <p class="font-semibold">Peter Jones</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Posted on March 10, 2023</p>
            </div>
          </div>
          <div class="border-l-4 border-blue-500 pl-4">
            <p class="text-gray-700 dark:text-gray-300">Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

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

3Dデザイン要素、トライアドカラースキーム、適度な複雑さ、ダークテーマのサポートを備えたレスポンシブタイムラインコンポーネントで、ポートフォリオWebサイト用のTailwind CSSで構築されています。

開けるプレビュー

                <div class="container mx-auto px-4 py-8">
  <h2 class="text-3xl font-bold text-center mb-8 dark:text-white">My Timeline</h2>
  <div class="relative wrap overflow-hidden p-10 h-full">
    <div class="border-2-2 absolute border op dark:border-gray-700 h-full border" style="right: 50%; border: 2px solid #000; border-radius: 1%;"></div>
    <div class="border-2-2 absolute border op dark:border-gray-700 h-full border" style="left: 50%; border: 2px solid #000; border-radius: 1%;"></div>
    
    <!-- Timeline Item -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-blue-500 shadow-xl w-8 h-8 rounded-full">
        <h1 class="mx-auto font-semibold text-lg text-white">1</h1>
      </div>
      <div class="order-1 bg-blue-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-blue-700">
        <h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Project Alpha</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Exercitationem veniam quidem molestiae ducimus sed.</p>
      </div>
    </div>

    <!-- Timeline Item -->
    <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="z-20 flex items-center order-1 bg-yellow-500 shadow-xl w-8 h-8 rounded-full">
        <h1 class="mx-auto font-semibold text-lg text-white">2</h1>
      </div>
      <div class="order-1 bg-yellow-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-yellow-700">
        <h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Project Beta</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Exercitationem veniam quidem molestiae ducimus sed.</p>
      </div>
    </div>
    
    <!-- Timeline Item -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-red-500 shadow-xl w-8 h-8 rounded-full">
        <h1 class="mx-auto font-semibold text-lg text-white">3</h1>
      </div>
      <div class="order-1 bg-red-400 rounded-lg shadow-xl w-5/12 px-6 py-4 dark:bg-red-700">
        <h3 class="mb-3 font-bold text-gray-800 text-xl dark:text-white">Project Gamma</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Exercitationem veniam quidem molestiae ducimus sed.</p>
      </div>
    </div>
    
  </div>
</div>

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

eコマース向けのミニマリスト/フラットデザインでスタイル化されたレスポンシブタイムラインコンポーネントで、類似の配色と複数のインタラクティブ要素を備えたダークモードをサポートします。

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md">
  <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Our Journey</h2>
  <div class="relative mb-12">
    <div class="absolute w-1 bg-gray-300 dark:bg-gray-600 h-full left-1/2 transform -translate-x-1/2"></div>

    <div class="flex items-start mb-8">
      <div class="bg-green-500 rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
        <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full" />
      </div>
      <div class="ml-4 w-full">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200">Step 1: Browse Products</h3>
        <p class="text-gray-700 dark:text-gray-400">Explore our wide range of products and find what you love.</p>
        <span class="text-sm text-gray-500 dark:text-gray-500">January 2023</span>
      </div>
    </div>

    <div class="flex items-start mb-8">
      <div class="bg-blue-500 rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
        <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full" />
      </div>
      <div class="ml-4 w-full">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200">Step 2: Add to Cart</h3>
        <p class="text-gray-700 dark:text-gray-400">Add your favorite items to your shopping cart.</p>
        <span class="text-sm text-gray-500 dark:text-gray-500">February 2023</span>
      </div>
    </div>

    <div class="flex items-start mb-8">
      <div class="bg-orange-500 rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
        <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full" />
      </div>
      <div class="ml-4 w-full">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200">Step 3: Checkout</h3>
        <p class="text-gray-700 dark:text-gray-400">Proceed to checkout and complete your purchase.</p>
        <span class="text-sm text-gray-500 dark:text-gray-500">March 2023</span>
      </div>
    </div>

    <div class="flex items-start mb-8">
      <div class="bg-red-500 rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
        <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full" />
      </div>
      <div class="ml-4 w-full">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200">Step 4: Order Confirmation</h3>
        <p class="text-gray-700 dark:text-gray-400">Receive confirmation of your order via email.</p>
        <span class="text-sm text-gray-500 dark:text-gray-500">April 2023</span>
      </div>
    </div>
  </div>

  <a href="#" class="inline-block bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-800">Shop Now</a>
</div>

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

単色の配色を使用した 3D デザインスタイルのレスポンシブタイムラインコンポーネントで、ポートフォリオ内の作業や製品を紹介するように設計されています。複数のインタラクティブ要素が含まれており、ダークテーマをサポートしています。

開けるプレビュー

                <div class="flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-900 py-10">
    <div class="relative w-full max-w-4xl">
        <div class="border-l-4 border-indigo-600 dark:border-indigo-300">
            <div class="mb-8 ml-6">
                <div class="flex items-center">
                    <div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
                    </div>
                    <div class="ml-4">
                        <p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 1</p>
                        <p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
                        <img src="https://picsum.photos/500/300?random=1" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
                    </div>
                </div>
            </div>
            <div class="mb-8 ml-6">
                <div class="flex items-center">
                    <div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
                        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
                    </div>
                    <div class="ml-4">
                        <p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 2</p>
                        <p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
                        <img src="https://picsum.photos/500/300?random=2" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
                    </div>
                </div>
            </div>
            <div class="mb-8 ml-6">
                <div class="flex items-center">
                    <div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
                        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
                    </div>
                    <div class="ml-4">
                        <p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 3</p>
                        <p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
                        <img src="https://picsum.photos/500/300?random=3" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

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

開けるプレビュー

                <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>

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

ブログやコンテンツの消費用に設計されたミニマリストのタイムラインコンポーネントで、アースカラーの色とTailwind CSSを使用したダークモードのサポートを特徴としています。

開けるプレビュー

                <div class="container mx-auto p-6">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Timeline</h1>
    <div class="relative">
        <div class="border-l border-gray-300 dark:border-gray-700 ml-6">
            <div class="mb-6">
                <div class="flex items-center">
                    <div class="bg-green-500 rounded-full w-6 h-6 mr-4">
                        <img src="https://picsum.photos/seed/1/100" alt="Event Image" class="rounded-full" />
                    </div>
                    <div>
                        <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 1</h2>
                        <p class="text-gray-600 dark:text-gray-400">Description of the event that took place. It was a significant moment.</p>
                        <span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-02-14</span>
                    </div>
                </div>
            </div>
            <div class="mb-6">
                <div class="flex items-center">
                    <div class="bg-green-500 rounded-full w-6 h-6 mr-4">
                        <img src="https://picsum.photos/seed/2/100" alt="Event Image" class="rounded-full" />
                    </div>
                    <div>
                        <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 2</h2>
                        <p class="text-gray-600 dark:text-gray-400">Another description of an important event that happened.</p>
                        <span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-03-01</span>
                    </div>
                </div>
            </div>
            <div class="mb-6">
                <div class="flex items-center">
                    <div class="bg-green-500 rounded-full w-6 h-6 mr-4">
                        <img src="https://picsum.photos/seed/3/100" alt="Event Image" class="rounded-full" />
                    </div>
                    <div>
                        <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 3</h2>
                        <p class="text-gray-600 dark:text-gray-400">A brief overview of an event that marked a milestone.</p>
                        <span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-04-10</span>
                    </div>
                </div>
            </div>
            <div class="mb-6">
                <div class="flex items-center">
                    <div class="bg-green-500 rounded-full w-6 h-6 mr-4">
                        <img src="https://picsum.photos/seed/4/100" alt="Event Image" class="rounded-full" />
                    </div>
                    <div>
                        <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 4</h2>
                        <p class="text-gray-600 dark:text-gray-400">Final event description summarizing the timeline.</p>
                        <span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-05-15</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

レトロなタイムライン

ポートフォリオ用に設計された、Tailwind CSSを使用したシンプルなレトロ/ビンテージタイムラインコンポーネント。レスポンシブレイアウトと、補色を使用したダークモードのサポートが特徴です。

開けるプレビュー

                <div class="container mx-auto px-4 py-8">
  <div class="flex flex-col md:flex-row">
    <div class="md:w-1/2">
      <div class="border-r-2 border-purple-500 dark:border-purple-700 pr-8">
        <div class="mb-8 text-right">
          <div class="text-sm text-gray-600 डार्क:text-gray-300">1985</div>
          <h4 class="text-xl font-bold text-gray-800 dark:text-white">Started Coding</h4>
          <p class="mt-2 text-gray-700 dark:text-gray-200">Learned my first programming language on a vintage computer.</p>
        </div>
        <div class="mb-8 text-right">
          <div class="text-sm text-gray-600 dark:text-gray-300">1990</div>
          <h4 class="text-xl font-bold text-gray-800 dark:text-white">First Website</h4>
          <p class="mt-2 text-gray-700 dark:text-gray-200">Launched my first personal website, very Geocities-esque.</p>
        </div>
      </div>
    </div>
    <div class="md:w-1/2 mt-8 md:mt-0">
      <div class="border-l-2 border-teal-500 dark:border-teal-700 प्ल-8">
        <div class="mb-8">
          <div class="text-sm text-gray-600 dark:text-gray-300">2000</div>
          <h4 class="text-xl font-bold text-gray-800 dark:text-white">Went Pro</h4>
          <p class="mt-2 text-gray-700 dark:text-gray-200">Started working as a professional web developer.</p>
        </div>
        <div class="mb-8">
          <div class="text-sm text-gray-600 dark:text-gray-300">2020</div>
          <h4 class="text-xl font-bold text-gray-800 dark:text-white">Modern Technologies</h4>
          <p class="mt-2 text-gray-700 dark:text-gray-200">Embracing modern frameworks and design trends, still with a nod to the classics.</p>
        </div>
      </div>
    </div>
  </div>
</div>

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

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

開けるプレビュー

                <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>

レトロ/ビンテージ会社のタイムライン

レスポンシブレトロ/ビンテージタイムラインコンポーネント、ビジネス/企業Webサイト向けのダークモードサポート

開けるプレビュー

                <div class="container mx-auto px-4 py-8">
  <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Company History</h2>
  <div class="relative">
    <!-- Vertical line -->
    <div class="border-r-4 border-blue-500 absolute h-full top-0" style="left: 1.5rem"></div>

    <!-- Timeline items -->
    <div class="mb-8 flex justify-between items-center w-full right-auto left-0">
      <div class="order-1 w-5/12"></div>
      <div class="z-10 flex items-center order-1 bg-blue-800 shadow-xl w-8 h-8 rounded-full">
        <h1 class="mx-auto font-semibold text-lg text-white">1</h1>
      </div>
      <div class="order-1 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Founded</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Our journey began with a vision to innovate.</p>
      </div>
    </div>

    <div class="mb-8 flex justify-between items-center w-full right-auto left-0 flex-row-reverse">
      <div class="order-1 w-5/12"></div>
      <div class="z-10 flex items-center order-1 bg-blue-800 shadow-xl w-8 h-8 rounded-full">
        <h1 class="mx-auto font-semibold text-lg text-white">2</h1>
      </div>
      <div class="order-1 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">First Product Launch</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Introducing our breakthrough product to the market.</p>
      </div>
    </div>

    <div class="mb-8 flex justify-between items-center w-full right-auto left-0">
      <div class="order-1 w-5/12"></div>
      <div class="z-10 flex items-center order-1 bg-blue-800 shadow-xl w-8 h-8 rounded-full">
        <h1 class="mx-auto font-semibold text-lg text-white">3</h1>
      </div>
      <div class="order-1 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Expanding Horizons</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Opening new offices and reaching global customers.</p>
      </div>
    </div>

     <div class="mb-8 flex justify-between items-center w-full right-auto left-0 flex-row-reverse">
      <div class="order-1 w-5/12"></div>
      <div class="z-10 flex items-center order-1 bg-blue-800 shadow-xl w-8 h-8 rounded-full">
        <h1 class="mx-auto font-semibold text-lg text-white">4</h1>
      </div>
      <div class="order-1 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Future Ready</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Innovating for a better future.</p>
      </div>
    </div>

  </div>
</div>