検索コンポーネント

カテゴリ

タイムライン

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

Gaming Timeline コンポーネント

ゲームWebサイト向けに最適化された微妙な3Dデザインを備えた、シンプルで鮮やかで応答性の高いタイムラインコンポーネントで、ダークモードがサポートされています。

                <div class="p-4 md:p-8 lg:p-12 bg-gradient-to-br from-indigo-900 to-purple-900 dark:from-gray-900 dark:to-black min-h-screen font-sans">

  <h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center mb-12 text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-fuchsia-500 dark:from-red-400 dark:to-fuchsia-400 drop-shadow-lg leading-tight">
    <span class="block">Epic Milestones</span>
    <span class="block text-2xl md:text-3xl lg:text-4xl font-semibold opacity-80 text-white dark:text-gray-200 mt-2">The Journey of Valor</span>
  </h2>

  <div class="max-w-4xl mx-auto relative">

    <!-- Timeline Line -->
    <div class="absolute left-1/2 -translate-x-1/2 w-1 h-full bg-gradient-to-b from-yellow-400 via-pink-500 to-purple-600 dark:from-yellow-300 dark:via-pink-400 dark:to-purple-500 shadow-xl rounded-full z-0"></div>

    <!-- Timeline Items Container -->
    <div class="space-y-16 relative z-10">

      <!-- Timeline Item 1 -->
      <div class="flex flex-col md:flex-row items-center justify-between relative">
        <div class="w-full md:w-1/2 md:pr-8 text-right">
          <div class="bg-gradient-to-br from-blue-600 to-indigo-700 dark:from-blue-700 dark:to-indigo-800 p-6 rounded-xl shadow-2xl transform hover:scale-105 transition-transform duration-300 ease-in-out border-b-4 border-r-4 border-blue-800 dark:border-blue-900 relative group">
            <span class="absolute -top-3 -right-3 px-4 py-1 bg-gradient-to-br from-pink-500 to-red-600 text-white text-sm font-bold rounded-lg shadow-lg rotate-3">New Chapter!</span>
            <h3 class="text-white text-2xl font-bold mb-2 drop-shadow-md">The Dawn of Realms</h3>
            <p class="text-indigo-100 text-lg opacity-90">The ancient prophecy fulfilled, heroes unite to face the encroaching shadows. The first realm is reclaimed.</p>
            <span class="block text-indigo-200 text-sm mt-3 opacity-70">Q1 2024</span>
          </div>
        </div>

        <div class="md:absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 mt-4 md:mt-0">
          <div class="w-8 h-8 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 dark:from-yellow-300 dark:to-orange-400 flex items-center justify-center border-4 border-white dark:border-gray-800 shadow-xl">
            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.24 1.5l1.63 3.32a.5.5 0 00.37.27l3.66.53a.5.5 0 01.28.85l-2.65 2.58a.5.5 0 00-.14.44l.63 3.65a.5.5 0 01-.73.53L10 13.06a.5.5 0 00-.46 0l-3.27 1.72a.5.5 0 01-.73-.53l.63-3.65a.5.5 0 00-.14-.44l-2.65-2.58a.5.5 0 01.28-.85l3.66-.53a.5.5 0 00.37-.27L9.24 1.5z" clip-rule="evenodd"></path></svg>
          </div>
        </div>

        <div class="w-full md:w-1/2 md:pl-8 mt-4 md:mt-0">
          <!-- Empty for alternating layout -->
        </div>
      </div>

      <!-- Timeline Item 2 -->
      <div class="flex flex-col md:flex-row items-center justify-between relative">
        <div class="w-full md:w-1/2 md:pr-8 order-2 md:order-1 text-right">
          <!-- Empty for alternating layout -->
        </div>

        <div class="md:absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 mt-4 md:mt-0">
          <div class="w-8 h-8 rounded-full bg-gradient-to-br from-red-500 to-fuchsia-600 dark:from-red-400 dark:to-fuchsia-500 flex items-center justify-center border-4 border-white dark:border-gray-800 shadow-xl">
            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
          </div>
        </div>

        <div class="w-full md:w-1/2 md:pl-8 order-1 md:order-2">
          <div class="bg-gradient-to-br from-green-500 to-teal-600 dark:from-green-600 dark:to-teal-700 p-6 rounded-xl shadow-2xl transform hover:scale-105 transition-transform duration-300 ease-in-out border-b-4 border-r-4 border-green-700 dark:border-green-800 relative group">
             <span class="absolute -top-3 -left-3 px-4 py-1 bg-gradient-to-br from-orange-400 to-yellow-500 text-white text-sm font-bold rounded-lg shadow-lg -rotate-3">Expansion!</span>
            <h3 class="text-white text-2xl font-bold mb-2 drop-shadow-md">The Emerald Jungle</h3>
            <p class="text-teal-100 text-lg opacity-90">New exotic lands are discovered, bringing unique challenges and powerful artifacts. Guilds establish outposts.</p>
            <span class="block text-teal-200 text-sm mt-3 opacity-70">Q3 2024</span>
          </div>
        </div>
      </div>

      <!-- Timeline Item 3 -->
      <div class="flex flex-col md:flex-row items-center justify-between relative">
        <div class="w-full md:w-1/2 md:pr-8 text-right">
          <div class="bg-gradient-to-br from-purple-600 to-pink-700 dark:from-purple-700 dark:to-pink-800 p-6 rounded-xl shadow-2xl transform hover:scale-105 transition-transform duration-300 ease-in-out border-b-4 border-r-4 border-purple-800 dark:border-purple-900 relative group">
             <span class="absolute -top-3 -right-3 px-4 py-1 bg-gradient-to-br from-blue-500 to-indigo-600 text-white text-sm font-bold rounded-lg shadow-lg rotate-3">Major Event!</span>
            <h3 class="text-white text-2xl font-bold mb-2 drop-shadow-md">The Shadow Citadel Falls</h3>
            <p class="text-pink-100 text-lg opacity-90">After a grueling siege, the ultimate fortress of evil is vanquished. The world breathes a sigh of temporary peace.</p>
            <span class="block text-pink-200 text-sm mt-3 opacity-70">Q4 2024</span>
          </div>
        </div>

        <div class="md:absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 mt-4 md:mt-0">
          <div class="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 dark:from-cyan-300 dark:to-blue-400 flex items-center justify-center border-4 border-white dark:border-gray-800 shadow-xl">
            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L11.586 2.586A2 2 0 0010.172 2H6zM6 4h4v3a1 1 0 001 1h3v7a1 1 0 01-1 1H6a1 1 0 01-1-1V5a1 1 0 011-1zm3 8a1 1 0 00-1 1v1a1 1 0 001 1h2a1 1 0 001-1v-1a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
          </div>
        </div>

        <div class="w-full md:w-1/2 md:pl-8 mt-4 md:mt-0">
          <!-- Empty for alternating layout -->
        </div>
      </div>

    </div>
  </div>

</div>

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

キャンディー/スウィートカラースキーム、グラデーショントランジション、ダークモードのサポートを備えたレスポンシブタイムラインコンポーネントで、ポートフォリオ内の作品や製品を紹介するのに適しています。複数のタイムラインイベントを備えています。

開けるプレビュー

                <div class="font-sans antialiased text-gray-800 bg-gradient-to-br from-pink-100 via-purple-100 to-indigo-100 dark:from-gray-900 dark:via-purple-950 dark:to-pink-950 py-12 sm:py-16 lg:py-20">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-16
               bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-purple-600 to-indigo-600
               dark:from-pink-400 dark:via-purple-500 dark:to-indigo-400">
      Our Journey
    </h2>

    <div class="relative before:absolute before:inset-0 before:top-2 before:bottom-2 before:w-1 before:bg-gradient-to-b before:from-pink-400 before:via-purple-500 before:to-indigo-500 before:left-1/2 before:-translate-x-1/2 before:rounded-full dark:before:from-pink-600 dark:before:via-purple-700 dark:before:to-indigo-700">

      <!-- Timeline Item 1 -->
      <div class="timeline-item flex items-center w-full my-8 md:my-12">
        <div class="order-1 w-full md:w-1/2 flex justify-end md:pr-12">
          <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 w-full max-w-lg
                      border border-transparent hover:border-pink-300 dark:hover:border-purple-600
                      transform transition-all duration-300 hover:scale-105
                      bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50 dark:from-gray-700 dark:via-purple-900 dark:to-indigo-900
                      text-gray-800 dark:text-gray-200">
            <h3 class="font-bold text-2xl sm:text-3xl mb-4 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-purple-600 dark:from-pink-400 dark:to-purple-500">Project Alpha Launch</h3>
            <p class="mb-4 text-md sm:text-lg">Successfully launched our flagship product, revolutionizing the industry with its innovative features and user-centric design.</p>
            <img src="https://picsum.photos/600/400?random=1" alt="Project Alpha screenshots" class="rounded-lg shadow-md mb-4 w-full h-auto object-cover">
            <span class="text-sm text-pink-600 dark:text-pink-400 font-semibold">October 2023</span>
          </div>
        </div>
        <div class="z-10 flex items-center order-1 w-10 h-10 rounded-full shadow-xl absolute left-1/2 -translate-x-1/2
                    bg-gradient-to-br from-pink-400 to-purple-500 dark:from-pink-600 dark:to-purple-700
                    border-4 border-white dark:border-gray-900">
          <svg class="mx-auto text-white dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Timeline Item 2 -->
      <div class="timeline-item flex items-center w-full my-8 md:my-12 flex-row-reverse">
        <div class="order-1 w-full md:w-1/2 flex justify-start md:pl-12">
          <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 w-full max-w-lg
                      border border-transparent hover:border-purple-300 dark:hover:border-indigo-600
                      transform transition-all duration-300 hover:scale-105
                      bg-gradient-to-br from-purple-50 via-indigo-50 to-pink-50 dark:from-gray-700 dark:via-indigo-900 dark:to-purple-900
                      text-gray-800 dark:text-gray-200">
            <h3 class="font-bold text-2xl sm:text-3xl mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-500 dark:to-indigo-400">Partnership Expansion</h3>
            <p class="mb-4 text-md sm:text-lg">Forged strategic alliances with key industry leaders, expanding our reach and service capabilities globally.</p>
            <img src="https://picsum.photos/600/400?random=2" alt="Partnership handshake" class="rounded-lg shadow-md mb-4 w-full h-auto object-cover">
            <span class="text-sm text-purple-600 dark:text-purple-400 font-semibold">December 2023</span>
          </div>
        </div>
        <div class="z-10 flex items-center order-1 w-10 h-10 rounded-full shadow-xl absolute left-1/2 -translate-x-1/2
                    bg-gradient-to-br from-purple-500 to-indigo-500 dark:from-purple-700 dark:to-indigo-700
                    border-4 border-white dark:border-gray-900">
          <svg class="mx-auto text-white dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8 9a1 1 0 100-2 1 1 0 000 2zM5 8a2 2 0 100 4h10a2 2 0 100-4H5z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Timeline Item 3 -->
      <div class="timeline-item flex items-center w-full my-8 md:my-12">
        <div class="order-1 w-full md:w-1/2 flex justify-end md:pr-12">
          <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 w-full max-w-lg
                      border border-transparent hover:border-indigo-300 dark:hover:border-pink-600
                      transform transition-all duration-300 hover:scale-105
                      bg-gradient-to-br from-indigo-50 via-pink-50 to-purple-50 dark:from-gray-700 dark:via-pink-900 dark:to-indigo-900
                      text-gray-800 dark:text-gray-200">
            <h3 class="font-bold text-2xl sm:text-3xl mb-4 bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-pink-600 dark:from-indigo-400 dark:to-pink-500">Community Growth</h3>
            <p class="mb-4 text-md sm:text-lg">Our user community grew by 500%, fostering a vibrant ecosystem of engagement and feedback.</p>
            <img src="https://picsum.photos/600/400?random=3" alt="Group of people smiling" class="rounded-lg shadow-md mb-4 w-full h-auto object-cover">
            <span class="text-sm text-indigo-600 dark:text-indigo-400 font-semibold">February 2024</span>
          </div>
        </div>
        <div class="z-10 flex items-center order-1 w-10 h-10 rounded-full shadow-xl absolute left-1/2 -translate-x-1/2
                    bg-gradient-to-br from-indigo-500 to-pink-500 dark:from-indigo-700 dark:to-pink-700
                    border-4 border-white dark:border-gray-900">
          <svg class="mx-auto text-white dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zm-6 9A.75.75 0 015.25 15h-.5a.75.75 0 01-.75-.75v-1.5a.75.75 0 01.75-.75h4.5a.75.75 0 01.75.75v1.5a.75.75 0 01-.75.75H13zm5.75-2.75a.75.75 0 00-.75-.75h-10.5c-.414 0-.75.336-.75.75v3.5A.75.75 0 005 17h10a.75.75 0 00.75-.75v-3.5z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Timeline Item 4 -->
      <div class="timeline-item flex items-center w-full my-8 md:my-12 flex-row-reverse">
        <div class="order-1 w-full md:w-1/2 flex justify-start md:pl-12">
          <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 w-full max-w-lg
                      border border-transparent hover:border-pink-300 dark:hover:border-purple-600
                      transform transition-all duration-300 hover:scale-105
                      bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50 dark:from-gray-700 dark:via-purple-900 dark:to-indigo-900
                      text-gray-800 dark:text-gray-200">
            <h3 class="font-bold text-2xl sm:text-3xl mb-4 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-purple-600 dark:from-pink-400 dark:to-purple-500">Future Endeavors</h3>
            <p class="mb-4 text-md sm:text-lg">Exploring new technologies and markets to bring even more value to our users and stakeholders.</p>
            <img src="https://picsum.photos/600/400?random=4" alt="Future looking abstract image" class="rounded-lg shadow-md mb-4 w-full h-auto object-cover">
            <span class="text-sm text-pink-600 dark:text-pink-400 font-semibold">Present & Beyond</span>
          </div>
        </div>
        <div class="z-10 flex items-center order-1 w-10 h-10 rounded-full shadow-xl absolute left-1/2 -translate-x-1/2
                    bg-gradient-to-br from-pink-400 to-purple-500 dark:from-pink-600 dark:to-purple-700
                    border-4 border-white dark:border-gray-900">
          <svg class="mx-auto text-white dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.75 3c-.966 0-1.895.143-2.75.405V6a.75.75 0 001.5 0V4.604c.59-.224 1.23-.365 1.9-.365 2.87 0 5.1-.88 5.1-2h-.057c-.126-1.58-1.543-2.83-3.268-2.909a.75.75 0 00-.734.708l.334 3.344a.75.75 0 001.492-.149l-.21-2.09c.654.148 1.15.54 1.488 1.05v.23a.75.75 0 001.5 0v-1c0-.496-.345-.92-.81-1.096A6.25 6.25 0 0010.75 3v13c.966 0 1.895-.143 2.75-.405V14a.75.75 0 00-1.5 0v1.396c-.59.224-1.23.365-1.9.365-2.87 0-5.1.88-5.1 2h.057c.126 1.58 1.543 2.83 3.268 2.909a.75.75 0 00.734-.708l-.334-3.344a.75.75 0 00-1.492.149l.21 2.09c-.654-.148-1.15-.54-1.488-1.05v-.23a.75.75 0 00-1.5 0v1c0 .496.345.92.81 1.096A6.25 6.25 0 0010.75 17z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
      </div>

    </div>
  </div>
</div>

ソーシャルメディアタイムラインコンポーネント - Glassmorphism

複雑で応答性の高いソーシャルメディアタイムラインコンポーネントで、類似の配色、ダークモードのサポート、ソーシャルネットワーキングインターフェイスの対話型要素を備えた glassmorphism デザインが特徴です。

開けるプレビュー

                <div class="min-h-screen bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl">
    <h1 class="text-4xl sm:text-5xl font-extrabold text-center mb-12 text-gray-900 dark:text-white relative z-10">
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-400 dark:to-purple-500">Your Feed</span>
    </h1>

    <div class="space-y-8 relative">
      <!-- Timeline Line -->
      <div class="absolute left-1/2 -translate-x-1/2 w-0.5 bg-gradient-to-b from-blue-300 to-indigo-400 dark:from-blue-600 dark:to-purple-700 h-full hidden md:block"></div>

      <!-- Post 1 -->
      <article class="relative md:flex md:items-start md:even:flex-row-reverse group">
        <div class="flex-shrink-0 w-full md:w-1/2 p-4 md:p-0 md:group-odd:pr-8 md:group-even:pl-8">
          <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg border border-white/20 dark:border-gray-700/20 rounded-xl shadow-lg p-6 space-y-4 transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-2xl hover:border-white/30 dark:hover:border-gray-600/30">
            <div class="flex items-center space-x-3 mb-4">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-400 dark:border-blue-500 shadow-md">
              <div>
                <h3 class="font-semibold text-lg text-gray-900 dark:text-white">Alex Johnson</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">@alex_joh &#x2022; 2 hours ago</p>
              </div>
            </div>
            <p class="text-gray-800 dark:text-gray-100 leading-relaxed">
              Just finished an amazing hike! The views were absolutely breathtaking. Nature truly is the best therapy. #Hiking #NatureLover #AdventureTime
            </p>
            <img src="https://picsum.photos/600/400?random=1" alt="Post Image" class="w-full h-auto rounded-lg object-cover border border-white/10 dark:border-gray-700/10 shadow-sm">
            <div class="flex justify-between items-center text-gray-700 dark:text-gray-200 mt-4">
              <div class="flex space-x-4">
                <button class="flex items-center space-x-1 hover:text-blue-600 dark:hover:text-blue-400 transform hover:scale-105 transition-transform">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                  <span>128</span>
                </button>
                <button class="flex items-center space-x-1 hover:text-indigo-600 dark:hover:text-indigo-400 transform hover:scale-105 transition-transform">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                  <span>34</span>
                </button>
              </div>
              <button class="flex items-center space-x-1 hover:text-purple-600 dark:hover:text-purple-400 transform hover:scale-105 transition-transform">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 14.406 9.689 15 10.5 15c.811 0 1.618-.594 1.816-1.658L14.24 10.5h-4.48l1.316 2.842z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                <span>Share</span>
              </button>
            </div>
          </div>
        </div>
        <div class="hidden md:block w-fit text-blue-500 dark:text-blue-400 md:absolute left-1/2 -ml-3 top-1/2 -translate-y-1/2 bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-2 rounded-full border-2 border-blue-300 dark:border-blue-600 shadow-md"></div>
      </article>

      <!-- Post 2 -->
      <article class="relative md:flex md:items-start md:even:flex-row-reverse group">
        <div class="flex-shrink-0 w-full md:w-1/2 p-4 md:p-0 md:group-odd:pr-8 md:group-even:pl-8">
          <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg border border-white/20 dark:border-gray-700/20 rounded-xl shadow-lg p-6 space-y-4 transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-2xl hover:border-white/30 dark:hover:border-gray-600/30">
            <div class="flex items-center space-x-3 mb-4">
              <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-indigo-400 dark:border-indigo-500 shadow-md">
              <div>
                <h3 class="font-semibold text-lg text-gray-900 dark:text-white">Sarah Chen</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">@sarah_c_design &#x2022; 4 hours ago</p>
              </div>
            </div>
            <p class="text-gray-800 dark:text-gray-100 leading-relaxed">
              New design mockups are finally ready! So excited to get feedback on the new UX flow. What do you all think of the dark mode implementation?
            </p>
            <img src="https://picsum.photos/600/400?random=2" alt="Post Image" class="w-full h-auto rounded-lg object-cover border border-white/10 dark:border-gray-700/10 shadow-sm">
            <div class="flex justify-between items-center text-gray-700 dark:text-gray-200 mt-4">
              <div class="flex space-x-4">
                <button class="flex items-center space-x-1 hover:text-blue-600 dark:hover:text-blue-400 transform hover:scale-105 transition-transform">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                  <span>210</span>
                </button>
                <button class="flex items-center space-x-1 hover:text-indigo-600 dark:hover:text-indigo-400 transform hover:scale-105 transition-transform">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                  <span>58</span>
                </button>
              </div>
              <button class="flex items-center space-x-1 hover:text-purple-600 dark:hover:text-purple-400 transform hover:scale-105 transition-transform">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 14.406 9.689 15 10.5 15c.811 0 1.618-.594 1.816-1.658L14.24 10.5h-4.48l1.316 2.842z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                <span>Share</span>
              </button>
            </div>
          </div>
        </div>
        <div class="hidden md:block w-fit text-indigo-500 dark:text-indigo-400 md:absolute left-1/2 -ml-3 top-1/2 -translate-y-1/2 bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-2 rounded-full border-2 border-indigo-300 dark:border-indigo-600 shadow-md"></div>
      </article>

      <!-- Post 3 -->
      <article class="relative md:flex md:items-start md:even:flex-row-reverse group">
        <div class="flex-shrink-0 w-full md:w-1/2 p-4 md:p-0 md:group-odd:pr-8 md:group-even:pl-8">
          <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg border border-white/20 dark:border-gray-700/20 rounded-xl shadow-lg p-6 space-y-4 transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-2xl hover:border-white/30 dark:hover:border-gray-600/30">
            <div class="flex items-center space-x-3 mb-4">
              <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-purple-500 shadow-md">
              <div>
                <h3 class="font-semibold text-lg text-gray-900 dark:text-white">Michael Lee</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">@mike_dev &#x2022; 8 hours ago</p>
              </div>
            </div>
            <p class="text-gray-800 dark:text-gray-100 leading-relaxed">
              Coding late tonight, building out new features for the app! Energy drinks and good music are getting me through. Almost there! 💻 #FrontendDev #CodingLife
            </p>
            <div class="flex justify-between items-center text-gray-700 dark:text-gray-200 mt-4">
              <div class="flex space-x-4">
                <button class="flex items-center space-x-1 hover:text-blue-600 dark:hover:text-blue-400 transform hover:scale-105 transition-transform">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                  <span>95</span>
                </button>
                <button class="flex items-center space-x-1 hover:text-indigo-600 dark:hover:text-indigo-400 transform hover:scale-105 transition-transform">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                  <span>21</span>
                </button>
              </div>
              <button class="flex items-center space-x-1 hover:text-purple-600 dark:hover:text-purple-400 transform hover:scale-105 transition-transform">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 14.406 9.689 15 10.5 15c.811 0 1.618-.594 1.816-1.658L14.24 10.5h-4.48l1.316 2.842z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                <span>Share</span>
              </button>
            </div>
          </div>
        </div>
        <div class="hidden md:block w-fit text-purple-500 dark:text-purple-400 md:absolute left-1/2 -ml-3 top-1/2 -translate-y-1/2 bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-2 rounded-full border-2 border-purple-300 dark:border-purple-600 shadow-md"></div>
      </article>
    </div>
  </div>
</div>

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

ダッシュボード用のレスポンシブタイムラインコンポーネントで、マイクロインタラクションとパステル調の配色、ダークテーマのサポートを備えています。スタイリングに Tailwind CSS を使用し、picsum.photos のプレースホルダー画像と randomuser.me のアバターが含まれています。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-8 text-center">Dashboard Timeline</h1>

  <div class="relative max-w-2xl mx-auto">
    <!-- Vertical line -->
    <div class="absolute left-1/2 transform -translate-x-1/2 w-1 bg-pastel-200 dark:bg-pastel-700 h-full"></div>

    <!-- Timeline Item 1 -->
    <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-pastel-400 dark:bg-pastel-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl w-5/12 px-6 py-4 transition-transform duration-300 ease-in-out hover:scale-105">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">New User Registration</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-600 dark:text-gray-300 text-opacity-100">John Doe just registered an account. Welcome him aboard!</p>
        <img src="https://picsum.photos/seed/user1/400/200" alt="Placeholder Image" class="mt-4 rounded-md w-full h-32 object-cover">
      </div>
    </div>

    <!-- Timeline Item 2 -->
    <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-pastel-400 dark:bg-pastel-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl w-5/12 px-6 py-4 transition-transform duration-300 ease-in-out hover:scale-105">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Sales Report Generated</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-600 dark:text-gray-300 text-opacity-100">Monthly sales report for Q3 is now available for review.</p>
        <div class="flex items-center mt-4">
          <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
          <span class="text-gray-700 dark:text-gray-300 text-sm">Report by: Jane Smith</span>
        </div>
      </div>
    </div>

    <!-- Timeline Item 3 -->
    <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-pastel-400 dark:bg-pastel-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl w-5/12 px-6 py-4 transition-transform duration-300 ease-in-out hover:scale-105">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Server Maintenance</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-600 dark:text-gray-300 text-opacity-100">Scheduled server maintenance completed successfully.</p>
        <img src="https://picsum.photos/seed/server/400/200" alt="Placeholder Image" class="mt-4 rounded-md w-full h-32 object-cover">
      </div>
    </div>

    <!-- Timeline Item 4 -->
    <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-pastel-400 dark:bg-pastel-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl w-5/12 px-6 py-4 transition-transform duration-300 ease-in-out hover:scale-105">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">New Feature Release</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-600 dark:text-gray-300 text-opacity-100">Exciting new analytics features have been rolled out!</p>
        <div class="flex items-center mt-4">
          <img src="https://randomuser.me/api/portraits/women/50.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
          <span class="text-gray-700 dark:text-gray-300 text-sm">Announced by: Sarah Lee</span>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
  /* Custom Pastel Colors */
  .bg-pastel-200 { background-color: #e2e8f0; } /* Light Blue-Gray */
  .dark\:bg-pastel-700 { background-color: #4a5568; } /* Dark Blue-Gray */
  .bg-pastel-400 { background-color: #9f7aea; } /* Medium Purple */
  .dark\:bg-pastel-600 { background-color: #6b46c1; } /* Darker Purple */

  /* Responsive adjustments for timeline */
  @media (max-width: 768px) {
    .right-timeline, .left-timeline {
      justify-content: flex-end;
    }
    .right-timeline .order-1, .left-timeline .order-1 {
      width: 10/12;
    }
    .right-timeline .z-20, .left-timeline .z-20 {
      transform: translateX(50%);
    }
    .right-timeline,
    .left-timeline {
      left: 0;
    }
    .left-timeline {
      flex-direction: row;
    }
    /* Adjust the vertical line for mobile */
    .absolute.left-1\/2 {
      left: 50%; /* Keep it centered for simplicity, or adjust for responsiveness */
    }
  }
</style>

ソーシャルメディアタイムラインコンポーネント

マテリアルデザインの原則に基づいて設計された、ソーシャルメディア用のシンプルでレスポンシブなタイムラインコンポーネント。アースカラーを使用し、ダークモードのサポートが含まれています。各タイムライン項目には、ユーザーのアバター、名前、投稿タイトル、およびソーシャルメディアフィードに典型的なプレースホルダー画像が表示されます。

開けるプレビュー

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-8">
  <div class="container mx-auto max-w-2xl">
    <h1 class="text-4xl font-bold text-stone-800 dark:text-stone-200 mb-8 text-center">Social Feed Timeline</h1>

    <!-- Timeline Item 1 -->
    <div class="relative mb-8 last:mb-0">
      <div class="hidden md:block absolute left-1/2 -ml-px w-0.5 h-full bg-stone-300 dark:bg-stone-700"></div>

      <div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse">
        <div class="w-10 h-10 rounded-full bg-stone-500 dark:bg-stone-600 flex items-center justify-center relative z-10 md:absolute md:left-1/2 md:-ml-5">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="rounded-full w-9 h-9 border-2 border-white dark:border-stone-900">
        </div>
        <div class="w-full md:w-5/12 bg-white dark:bg-stone-800 rounded-lg shadow-md p-6 md:p-8 ml-4 md:ml-0 md:mr-auto md:even:ml-auto md:even:mr-0">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-2">John Doe posted an update</h3>
          <p class="text-stone-600 dark:text-stone-400 mb-4">Exploring the beautiful trails today! #nature #hiking</p>
          <img src="https://picsum.photos/600/400?random=1" alt="Post Image" class="rounded-md w-full h-auto object-cover">
          <div class="text-sm text-stone-500 dark:text-stone-500 mt-4">2 hours ago</div>
        </div>
      </div>
    </div>

    <!-- Timeline Item 2 -->
    <div class="relative mb-8 last:mb-0">
      <div class="hidden md:block absolute left-1/2 -ml-px w-0.5 h-full bg-stone-300 dark:bg-stone-700"></div>
      <div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse">
        <div class="w-10 h-10 rounded-full bg-stone-500 dark:bg-stone-600 flex items-center justify-center relative z-10 md:absolute md:left-1/2 md:-ml-5">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="rounded-full w-9 h-9 border-2 border-white dark:border-stone-900">
        </div>
        <div class="w-full md:w-5/12 bg-white dark:bg-stone-800 rounded-lg shadow-md p-6 md:p-8 ml-4 md:ml-0 md:mr-auto md:even:ml-auto md:even:mr-0">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-2">Jane Smith shared a new recipe</h3>
          <p class="text-stone-600 dark:text-stone-400 mb-4">Delighted with this new homemade bread recipe! So satisfying. #baking #foodie</p>
          <img src="https://picsum.photos/600/400?random=2" alt="Post Image" class="rounded-md w-full h-auto object-cover">
          <div class="text-sm text-stone-500 dark:text-stone-500 mt-4">5 hours ago</div>
        </div>
      </div>
    </div>

    <!-- Timeline Item 3 -->
    <div class="relative mb-8 last:mb-0">
      <div class="hidden md:block absolute left-1/2 -ml-px w-0.5 h-full bg-stone-300 dark:bg-stone-700"></div>
      <div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse">
        <div class="w-10 h-10 rounded-full bg-stone-500 dark:bg-stone-600 flex items-center justify-center relative z-10 md:absolute md:left-1/2 md:-ml-5">
          <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Avatar" class="rounded-full w-9 h-9 border-2 border-white dark:border-stone-900">
        </div>
        <div class="w-full md:w-5/12 bg-white dark:bg-stone-800 rounded-lg shadow-md p-6 md:p-8 ml-4 md:ml-0 md:mr-auto md:even:ml-auto md:even:mr-0">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-2">Mike Johnson attended an event</h3>
          <p class="text-stone-600 dark:text-stone-400 mb-4">Great time at the local tech meetup! Learned a lot. #tech #community</p>
          <img src="https://picsum.photos/600/400?random=3" alt="Post Image" class="rounded-md w-full h-auto object-cover">
          <div class="text-sm text-stone-500 dark:text-stone-500 mt-4">1 day ago</div>
        </div>
      </div>
    </div>

  </div>
</div>

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

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

開けるプレビュー

                <div class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-black py-10 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center text-gray-900 dark:text-white mb-16 drop-shadow-lg">
      Company Milestones
    </h1>

    <div class="relative">
      <div class="hidden md:block absolute w-1 h-full bg-blue-400 dark:bg-purple-600 left-1/2 transform -translate-x-1/2 rounded-full shadow-lg"></div>

      <!-- Timeline Item - Left Aligned -->
      <div class="mb-12 flex flex-col md:flex-row items-center justify-between md:odd:flex-row-reverse w-full">
        <div class="md:w-1/2 flex justify-start md:justify-end mb-6 md:mb-0">
          <div class="relative w-full md:w-4/5 lg:w-3/4 p-6 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-2xl shadow-xl border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20 transform hover:scale-105 transition-all duration-300">
            <div class="absolute md:top-1/2 md:-right-4 w-8 h-8 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-full shadow-md transform md:-translate-y-1/2 hidden md:block"></div>
            <div class="absolute md:top-1/2 md:-left-4 w-8 h-8 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-full shadow-md transform md:-translate-y-1/2 md:hidden block top-[-20px] left-1/2 -translate-x-1/2"></div>
            <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-3">Foundation & Early Growth</h3>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed">
              Established in 20XX, we quickly grew our client base by focusing on innovative solutions and customer satisfaction. Our initial team laid the groundwork for future success and expansion.
            </p>
            <span class="block text-sm text-gray-600 dark:text-gray-400 mt-4">January 20XX</span>
          </div>
        </div>
        <div class="md:w-1/12 md:flex md:justify-center hidden"></div>
        <div class="md:w-1/2 flex justify-end md:justify-start"></div>
      </div>

      <!-- Timeline Item - Right Aligned -->
      <div class="mb-12 flex flex-col md:flex-row items-center justify-between md:odd:flex-row-reverse w-full">
        <div class="md:w-1/2 flex justify-end md:justify-start mb-6 md:mb-0">
          <div class="relative w-full md:w-4/5 lg:w-3/4 p-6 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-2xl shadow-xl border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20 transform hover:scale-105 transition-all duration-300">
            <div class="absolute md:top-1/2 md:-left-4 w-8 h-8 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full shadow-md transform md:-translate-y-1/2 hidden md:block"></div>
             <div class="absolute md:top-1/2 md:-right-4 w-8 h-8 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full shadow-md transform md:-translate-y-1/2 md:hidden block top-[-20px] left-1/2 -translate-x-1/2"></div>
            <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-3">Technological Advancements</h3>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed">
              Introduced cutting-edge AI and machine learning capabilities, revolutionizing our product offerings and providing clients with unparalleled insights and efficiency.
            </p>
            <span class="block text-sm text-gray-600 dark:text-gray-400 mt-4">June 20XX</span>
          </div>
        </div>
        <div class="md:w-1/12 md:flex md:justify-center hidden"></div>
        <div class="md:w-1/2 flex justify-start md:justify-end"></div>
      </div>
      
      <!-- Timeline Item - Left Aligned (again) -->
      <div class="mb-12 flex flex-col md:flex-row items-center justify-between md:odd:flex-row-reverse w-full">
        <div class="md:w-1/2 flex justify-start md:justify-end mb-6 md:mb-0">
          <div class="relative w-full md:w-4/5 lg:w-3/4 p-6 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-2xl shadow-xl border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20 transform hover:scale-105 transition-all duration-300">
            <div class="absolute md:top-1/2 md:-right-4 w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full shadow-md transform md:-translate-y-1/2 hidden md:block"></div>
            <div class="absolute md:top-1/2 md:-left-4 w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full shadow-md transform md:-translate-y-1/2 md:hidden block top-[-20px] left-1/2 -translate-x-1/2"></div>
            <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-3">Global Expansion</h3>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed">
              Successfully launched operations in several international markets, establishing our presence on a global scale and expanding our diverse customer base.
            </p>
            <span class="block text-sm text-gray-600 dark:text-gray-400 mt-4">November 20XX</span>
          </div>
        </div>
        <div class="md:w-1/12 md:flex md:justify-center hidden"></div>
        <div class="md:w-1/2 flex justify-end md:justify-start"></div>
      </div>

       <!-- Timeline Item - Right Aligned (again) -->
      <div class="mb-12 flex flex-col md:flex-row items-center justify-between md:odd:flex-row-reverse w-full">
        <div class="md:w-1/2 flex justify-end md:justify-start mb-6 md:mb-0">
          <div class="relative w-full md:w-4/5 lg:w-3/4 p-6 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-2xl shadow-xl border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20 transform hover:scale-105 transition-all duration-300">
            <div class="absolute md:top-1/2 md:-left-4 w-8 h-8 bg-gradient-to-br from-green-400 to-teal-500 rounded-full shadow-md transform md:-translate-y-1/2 hidden md:block"></div>
             <div class="absolute md:top-1/2 md:-right-4 w-8 h-8 bg-gradient-to-br from-green-400 to-teal-500 rounded-full shadow-md transform md:-translate-y-1/2 md:hidden block top-[-20px] left-1/2 -translate-x-1/2"></div>
            <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-3">Sustainable Initiatives</h3>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed">
              Launched comprehensive sustainability programs, significantly reducing our carbon footprint and reinforcing our commitment to environmental responsibility.
            </p>
            <span class="block text-sm text-gray-600 dark:text-gray-400 mt-4">March 20XX</span>
          </div>
        </div>
        <div class="md:w-1/12 md:flex md:justify-center hidden"></div>
        <div class="md:w-1/2 flex justify-start md:justify-end"></div>
      </div>


    </div>
  </div>
</div>

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

ポートフォリオ内の作品や製品を紹介するためのミニマリスト/フラットデザインのタイムラインコンポーネントで、Tailwind CSS を使用して応答性とダークモードのサポートで設計されています。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-900 p-6">
    <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">My Portfolio Timeline</h2>
    <div class="relative">
        <div class="flex flex-col">
            <!-- Timeline Item 1 -->
            <div class="flex items-center mb-8">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Title 1</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of the project or work done. It showcases the skills and methods used in the project.</p>
                    <div class="mt-2">
                        <img src="https://picsum.photos/200/100" alt="Project Image" class="rounded-lg shadow-md">
                    </div>
                </div>
            </div>
            <!-- Timeline Item 2 -->
            <div class="flex items-center mb-8">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Title 2</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of the project or work done. It showcases the skills and methods used in the project.</p>
                    <div class="mt-2">
                        <img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="rounded-lg shadow-md">
                    </div>
                </div>
            </div>
            <!-- Timeline Item 3 -->
            <div class="flex items-center mb-8">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Title 3</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of the project or work done. It showcases the skills and methods used in the project.</p>
                    <div class="mt-2">
                        <img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="rounded-lg shadow-md">
                    </div>
                </div>
            </div>
            <!-- Timeline Item 4 -->
            <div class="flex items-center mb-8">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Title 4</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of the project or work done. It showcases the skills and methods used in the project.</p>
                    <div class="mt-2">
                        <img src="https://picsum.photos/200/100?random=3" alt="Project Image" class="rounded-lg shadow-md">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

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

開けるプレビュー

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

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

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-900 py-12 font-sans">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-2xl">
    <h1 class="text-3xl sm:text-4xl font-bold text-center text-gray-800 dark:text-gray-100 mb-8 sm:mb-12">
      Community Feed
    </h1>
    
    <div class="space-y-8 sm:space-y-12">
      
      <!-- Post 1 -->
      <div class="bg-white dark:bg-gray-800 shadow-xl dark:shadow-2xl dark:shadow-gray-900/50 rounded-xl p-4 sm:p-6 transition-shadow duration-300 hover:shadow-2xl dark:hover:shadow-gray-700/60">
        <!-- Post Header -->
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center space-x-3 sm:space-x-4">
            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100 text-sm sm:text-base">Sarah Miller</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 2 hours ago</p>
            </div>
          </div>
          <button class="text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
            </svg>
          </button>
        </div>

        <!-- Post Content Text -->
        <div class="mb-4">
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm sm:text-base">
            Exploring the city vibes today! Found this amazing little cafe. ☕️ Highly recommend the almond croissant.
            The architecture around here is stunning. So much history! #CityLife #CafeHopping #UrbanExploration
          </p>
        </div>

        <!-- Post Content Image -->
        <div class="mb-5 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
          <img src="https://picsum.photos/seed/citycafe/800/500" alt="Cafe image" class="w-full h-auto object-cover max-h-[500px]">
        </div>

        <!-- Stats -->
        <div class="flex items-center justify-between text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-3 px-1">
          <div><span>1.2k Likes</span></div>
          <div><span>87 Comments</span></div>
        </div>

        <!-- Actions -->
        <div class="border-t border-gray-200 dark:border-gray-700 pt-3">
          <div class="flex items-center justify-around text-gray-600 dark:text-gray-400">
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Like</span>
            </button>
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Comment</span>
            </button>
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12s-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Share</span>
            </button>
          </div>
        </div>
      </div>
      <!-- End Post 1 -->

      <!-- Post 2 -->
      <div class="bg-white dark:bg-gray-800 shadow-xl dark:shadow-2xl dark:shadow-gray-900/50 rounded-xl p-4 sm:p-6 transition-shadow duration-300 hover:shadow-2xl dark:hover:shadow-gray-700/60">
        <!-- Post Header -->
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center space-x-3 sm:space-x-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100 text-sm sm:text-base">Alex Johnson</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 5 hours ago</p>
            </div>
          </div>
          <button class="text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
            </svg>
          </button>
        </div>

        <!-- Post Content Text -->
        <div class="mb-4">
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm sm:text-base">
            Just finished a great workout session. Feeling energized! 💪 Remember to stay hydrated folks. #FitnessMotivation #HealthyLifestyle
          </p>
        </div>
        
        <!-- Post Content Image (Optional - No image for this post to show variation) -->
        <!-- <div class="mb-5 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
          <img src="https://picsum.photos/seed/workout/800/400" alt="Workout image" class="w-full h-auto object-cover max-h-[500px]">
        </div> -->

        <!-- Stats -->
        <div class="flex items-center justify-between text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-3 px-1">
          <div><span>850 Likes</span></div>
          <div><span>45 Comments</span></div>
        </div>

        <!-- Actions -->
        <div class="border-t border-gray-200 dark:border-gray-700 pt-3">
          <div class="flex items-center justify-around text-gray-600 dark:text-gray-400">
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Like</span>
            </button>
             <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Comment</span>
            </button>
             <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12s-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Share</span>
            </button>
          </div>
        </div>
      </div>
      <!-- End Post 2 -->

      <!-- Post 3 -->
      <div class="bg-white dark:bg-gray-800 shadow-xl dark:shadow-2xl dark:shadow-gray-900/50 rounded-xl p-4 sm:p-6 transition-shadow duration-300 hover:shadow-2xl dark:hover:shadow-gray-700/60">
        <!-- Post Header -->
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center space-x-3 sm:space-x-4">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100 text-sm sm:text-base">Linda K.</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 1 day ago</p>
            </div>
          </div>
          <button class="text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
            </svg>
          </button>
        </div>

        <!-- Post Content Text -->
        <div class="mb-4">
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm sm:text-base">
            Spent the afternoon reading in the park. Such a peaceful escape from the hustle and bustle. What are you reading currently?
            #BookLover #PeacefulMoments #NatureReads 🌳📖
          </p>
        </div>

        <!-- Post Content Image -->
        <div class="mb-5 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
          <img src="https://picsum.photos/seed/parkreading/800/550" alt="Park reading image" class="w-full h-auto object-cover max-h-[500px]">
        </div>

        <!-- Stats -->
        <div class="flex items-center justify-between text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-3 px-1">
          <div><span>980 Likes</span></div>
          <div><span>152 Comments</span></div>
        </div>

        <!-- Actions -->
        <div class="border-t border-gray-200 dark:border-gray-700 pt-3">
          <div class="flex items-center justify-around text-gray-600 dark:text-gray-400">
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Like</span>
            </button>
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Comment</span>
            </button>
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12s-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Share</span>
            </button>
          </div>
        </div>
      </div>
      <!-- End Post 3 -->

    </div>
  </div>
</div>

レトロ/ビンテージタイムラインコンポーネント

レトロ/ビンテージデザイン、鮮やかな色、ダークモードのサポートを備えたレスポンシブタイムラインコンポーネント。ポートフォリオの展示に適しています。

開けるプレビュー

                <div class="container mx-auto px-4 py-8">
  <div class="relative wrap overflow-hidden p-10 h-full">
    <div class="border-2-2 absolute border-opacity-20 border-gray-700 h-full border" style="left: 50%;"></div>
    <!-- right timeline -->
    <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-400 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-blue-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-900 text-xl">Project Title 1</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        <img src="https://picsum.photos/seed/picsum/300/200" alt="Project Image" class="mt-4 rounded-lg">
      </div>
    </div>

    <!-- left timeline -->
    <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-purple-400 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-purple-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-900 text-xl">Project Title 2</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
         <img src="https://picsum.photos/seed/picsum/300/200" alt="Project Image" class="mt-4 rounded-lg">
      </div>
    </div>
    
     <!-- right timeline -->
    <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-green-400 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-green-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-900 text-xl">Project Title 3</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
         <img src="https://picsum.photos/seed/picsum/300/200" alt="Project Image" class="mt-4 rounded-lg">
      </div>
    </div>

    <!-- left timeline -->
    <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-red-400 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-red-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-900 text-xl">Project Title 4</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
         <img src="https://picsum.photos/seed/picsum/300/200" alt="Project Image" class="mt-4 rounded-lg">
      </div>
    </div>

  </div>
</div>