すべてのコンポーネント

データ視覚化コンポーネントコンポーネント

ソーシャルメディア用のレトロビンテージデータ視覚化コンポーネントで、補色スキームと適度な複雑さが特徴です。レスポンシブで、Tailwind CSSを使用したダークモードをサポートしています。

                <div class="p-8 bg-gradient-to-br from-purple-700 to-indigo-900 min-h-screen dark:from-gray-900 dark:to-black font-mono">
  <div class="max-w-4xl mx-auto bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:flex">
    <div class="md:flex-shrink-0 p-6 md:w-1/3 bg-purple-800 dark:bg-gray-900 text-white flex flex-col justify-between">
      <div>
        <h2 class="text-3xl font-bold mb-4 text-yellow-300 dark:text-cyan-400">Activity Monitor</h2>
        <p class="text-purple-200 dark:text-gray-400 mb-6">Your social media pulse, vintage style.</p>
        <div class="mb-4">
          <p class="text-xl font-semibold text-yellow-300 dark:text-cyan-400">Followers Gained</p>
          <p class="text-4xl">1,234</p>
        </div>
        <div>
          <p class="text-xl font-semibold text-yellow-300 dark:text-cyan-400">Likes This Week</p>
          <p class="text-4xl">5,678</p>
        </div>
      </div>
      <div class="mt-8">
        <div class="w-16 h-16 rounded-full overflow-hidden mx-auto border-4 border-yellow-300 dark:border-cyan-400">
          <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-full h-full object-cover">
        </div>
        <p class="text-center text-sm mt-2 text-purple-300 dark:text-gray-400">Logged in as @RetroUser</p>
      </div>
    </div>

    <div class="p-6 md:w-2/3 flex flex-col justify-between">
      <div>
        <h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-gray-200">Engagement Overview</h3>
        
        <!-- Graph Placeholder - Simplified for HTML Only -->
        <div class="bg-purple-200 dark:bg-gray-700 rounded-lg p-4 mb-6 relative">
          <div class="h-48 w-full bg-gradient-to-t from-red-600 to-pink-500 dark:from-red-800 dark:to-pink-700 rounded-md relative overflow-hidden">
            <div class="absolute bottom-0 left-0 right-0 h-1/4 bg-red-700 opacity-75 animate-pulse"></div>
            <div class="absolute bottom-0 right-1/4 w-1/3 h-1/2 bg-yellow-400 opacity-75 animate-pulse" style="animation-delay: 0.5s;"></div>
            <div class="absolute bottom-0 left-1/2 w-1/4 h-3/4 bg-green-400 opacity-75 animate-pulse" style="animation-delay: 1s;"></div>
            <div class="absolute bottom-0 w-1/6 h-full bg-blue-400 opacity-75 animate-pulse" style="animation-delay: 1.5s;"></div>
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-400 text-center mt-2">Activity Trend (Simulated)</p>
        </div>

        <div class="grid grid-cols-2 gap-4 text-center">
          <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg">
            <p class="text-lg font-semibold text-purple-600 dark:text-gray-300">Posts</p>
            <p class="text-3xl text-purple-800 dark:text-gray-100">87</p>
          </div>
          <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg">
            <p class="text-lg font-semibold text-purple-600 dark:text-gray-300">Shares</p>
            <p class="text-3xl text-purple-800 dark:text-gray-100">321</p>
          </div>
        </div>
      </div>
      
      <div class="mt-8 text-sm text-gray-500 dark:text-gray-400 text-center">
        <p>&copy; 2023 Retro Social Analytics. All rights reserved.</p>
      </div>
    </div>
  </div>
</div>

Neumorphism Grid Layout コンポーネント

プレビューを開く

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8 flex items-center justify-center">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card 1 -->
    <div class="rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-700 p-6 transform hover:scale-105 transition duration-300">
      <img src="https://picsum.photos/400/200?random=1" alt="Image 1" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Post Title 1</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm">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 mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark mr-3">
        <span class="text-gray-700 dark:text-gray-200 text-sm">John Doe</span>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-700 p-6 transform hover:scale-105 transition duration-300">
      <img src="https://picsum.photos/400/200?random=2" alt="Image 2" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Post Title 2</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark mr-3">
        <span class="text-gray-700 dark:text-gray-200 text-sm">Jane Smith</span>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-700 p-6 transform hover:scale-105 transition duration-300">
      <img src="https://picsum.photos/400/200?random=3" alt="Image 3" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Post Title 3</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark mr-3">
        <span class="text-gray-700 dark:text-gray-200 text-sm">Peter Jones</span>
      </div>
    </div>
  </div>

  <!-- You'll need to extend your tailwind.config.js to include neumorphic shadows like this: -->
  <!--
  module.exports = {
    darkMode: 'class',
    theme: {
      extend: {
        boxShadow: {
          'neumorphic-light': '9px 9px 18px #a1a1a1, -9px -9px 18px #ffffff',
          'neumorphic-dark': '9px 9px 18px #4a4a4a, -9px -9px 18px #000000',
          'inner-neumorphic-light': 'inset 5px 5px 10px #a1a1a1, inset -5px -5px 10px #ffffff',
          'inner-neumorphic-dark': 'inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #000000',
        }
      },
    },
    plugins: [],
  }
  -->
</div>

レトロポートフォリオナビゲーション

パステルカラースキーム、レスポンシブ、ダークモードをサポートするポートフォリオ用のレトロ/ビンテージナビゲーションコンポーネント。

プレビューを開く

                <nav class="bg-gradient-to-r from-pink-200 via-purple-200 to-indigo-200 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 p-6 shadow-lg font-mono">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse mb-4 md:mb-0">
      <span class="self-center text-3xl font-semibold whitespace-nowrap text-gray-800 dark:text-gray-100">
        My Portfolio
      </span>
    </a>
    <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
      <span class="sr-only">Open main menu</span>
      <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
      </svg>
    </button>
    <div class="hidden w-full md:block md:w-auto" id="navbar-default">
      <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-transparent dark:bg-gray-800 dark:border-gray-700">
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 dark:text-gray-100 md:dark:hover:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-gray-100 md:dark:hover:bg-transparent transition duration-300 ease-in-out" aria-current="page">Home</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 dark:text-gray-100 md:dark:hover:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-gray-100 md:dark:hover:bg-transparent transition duration-300 ease-in-out">Projects</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 dark:text-gray-100 md:dark:hover:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-gray-100 md:dark:hover:bg-transparent transition duration-300 ease-in-out">About</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 dark:text-gray-100 md:dark:hover:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-gray-100 md:dark:hover:bg-transparent transition duration-300 ease-in-out">Contact</a>
        </li>
        <li>
          <div class="relative group">
            <button id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 md:w-auto dark:text-gray-100 md:dark:hover:text-purple-400 dark:focus:text-gray-100 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Dropdown
              <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
              </svg>
            </button>
            <!-- Dropdown menu -->
            <div id="dropdownNavbar" class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600 absolute group-hover:block">
              <ul class="py-2 text-sm text-gray-700 dark:text-gray-400" aria-labelledby="dropdownLargeButton">
                <li>
                  <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
                </li>
                <li>
                  <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
                </li>
                <li>
                  <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
                </li>
              </ul>
              <div class="py-1">
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Sign out</a>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

パスワードリセットコンポーネント

ダークモード UI を備えたレスポンシブパスワードリセットコンポーネントで、類似の配色が使用されます。eコマースアプリケーション向けに設計されています。

プレビューを開く

                <div class="min-h-screen flex items-center justify-center bg-gray-900">
  <div class="bg-gray-800 p-8 rounded-lg shadow-xl w-96">
    <h2 class="text-3xl font-bold text-teal-400 mb-6 text-center">Reset Password</h2>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-gray-300 text-sm font-semibold mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-2 bg-gray-700 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-300 text-sm font-semibold mb-2">New Password</label>
        <input type="password" id="password" class="w-full px-4 py-2 bg-gray-700 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Enter new password">
      </div>
      <div class="mb-6">
        <label for="confirm-password" class="block text-gray-300 text-sm font-semibold mb-2">Confirm New Password</label>
        <input type="password" id="confirm-password" class="w-full px-4 py-2 bg-gray-700 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Confirm new password">
      </div>
      <button type="submit" class="w-full bg-teal-600 text-white py-3 rounded-lg font-semibold hover:bg-teal-700 transition duration-300">Reset Password</button>
    </form>
  </div>
</div>

トライアドダークモードのプログレスバー

ダークモード用のシンプルでトライアドカラーのプログレスバーコンポーネントで、ブログやコンテンツの消費に適しています。Tailwind CSSを使用したレスポンシブデザインを特徴とし、JavaScriptなしでダークテーマをサポートするためのdark:プレフィックスを利用しています。

プレビューを開く

                <div class="dark:bg-gray-900 p-4">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Reading Progress</h2>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-purple-500 h-2.5 rounded-full" style="width: 45%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-yellow-500 h-2.5 rounded-full" style="width: 60%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
    <div class="dark:bg-emerald-500 h-2.5 rounded-full" style="width: 75%;"></div>
  </div>
</div>

フィルターコンポーネント

複雑で応答性の高いGlassmorphismスタイルのフィルターコンポーネントで、ビジネス/企業のWebサイト向けの類似の配色を備えています。半透明の要素とぼかし効果が特徴で、Tailwind CSS を使用した完全なダークモードがサポートされています。JavaScriptは含まれていません。

プレビューを開く

                <div class="2xl:container 2xl:mx-auto">
  <div class="py-12 px-4">
    <div class="lg:flex justify-between">
      <div class="lg:w-4/12">
        <h1 class="text-3xl font-semibold text-gray-800 dark:text-white">Filter by Category</h1>
        <p class="text-base text-gray-600 dark:text-gray-300 mt-4">Explore a wide range of products tailored to your needs. From electronics to fashion, find exactly what you are looking for.</p>
        <div class="w-full bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 flex items-center justify-between mt-8">
          <input type="text" class="w-full bg-transparent text-base focus:outline-none placeholder-gray-600 text-gray-600 dark:text-gray-300 dark:placeholder-gray-300 py-4 px-4" placeholder="Search by name" />
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <circle cx="10" cy="10" r="7"></circle>
            <line x1="21" y1="21" x2="15" y2="15"></line>
          </svg>
        </div>
        <div class="mt-10">
          <div class="flex flex-col space-y-4">
            <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
              <span class="ml-2">All Categories</span>
            </label>
            <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
              <span class="ml-2">Electronics</span>
            </label>
            <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
              <span class="ml-2">Fashion</span>
            </label>
            <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
              <span class="ml-2">Home & Kitchen</span>
            </label>
            <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
              <span class="ml-2">Books</span>
            </label>
          </div>
        </div>
        <p class="text-base text-gray-600 dark:text-gray-300 mt-8">Price Range</p>
        <div class="flex items-center justify-between mt-4">
          <input type="number" placeholder="Min" class="w-2/5 bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 text-base text-gray-600 dark:text-gray-300 py-2 px-2 focus:outline-none" />
          <input type="number" placeholder="Max" class="w-2/5 bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 text-base text-gray-600 dark:text-gray-300 py-2 px-2 focus:outline-none" />
        </div>
        <p class="text-base text-gray-600 dark:text-gray-300 mt-8">Customer Reviews</p>
        <div class="flex flex-col space-y-4 mt-4">
          <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
            <input type="radio" name="Customer Reviews" class="form-radio h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded-full dark:border-gray-700 dark:bg-gray-700">
            <span class="ml-2">5 Stars</span>
          </label>
          <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
            <input type="radio" name="Customer Reviews" class="form-radio h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded-full dark:border-gray-700 dark:bg-gray-700">
            <span class="ml-2">4 Stars & Up</span>
          </label>
          <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
            <input type="radio" name="Customer Reviews" class="form-radio h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded-full dark:border-gray-700 dark:bg-gray-700">
            <span class="ml-2">3 Stars & Up</span>
          </label>
        </div>
        <button class="w-full bg-indigo-600 dark:bg-indigo-700 text-white text-base font-semibold py-4 px-4 rounded mt-8">Apply Filters</button>
        <button class="w-full bg-transparent border border-gray-300 dark:border-gray-700 text-gray-800 dark:text-white text-base font-semibold py-4 px-4 rounded mt-4">Clear All</button>
      </div>
      <div class="lg:w-8/12 lg:ml-12 lg:mr-0 lg:mt-0 mt-6">
        <div class="flex items-center justify-between">
          <p class="text-base text-gray-600 dark:text-gray-300">Showing 1-12 of 200 products</p>
          <div class="flex items-center space-x-2">
            <select class="w-40 bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 text-base text-gray-600 dark:text-gray-300 py-2 px-2 focus:outline-none">
              <option value="popularity">Sort by Popularity</option>
              <option value="price_asc">Price: Low to High</option>
              <option value="price_desc">Price: High to Low</option>
            </select>
          </div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 mt-8">
          <!-- Product Card 1 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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 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"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=1" alt="Product Image" />
              <div class="absolute bottom-0 left-0 bg-indigo-600 dark:bg-indigo-700 text-white text-xs font-semibold px-3 py-1 rounded-tr-lg">
                New
              </div>
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$32.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 2 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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 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"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=2" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$45.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 3 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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 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"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=3" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$28.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 4 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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 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"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=4" alt="Product Image" />
              <div class="absolute bottom-0 left-0 bg-yellow-500 dark:bg-yellow-600 text-white text-xs font-semibold px-3 py-1 rounded-tr-lg">
                Sale
              </div>
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$50.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 5 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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 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"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=5" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$65.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 6 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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 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"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=6" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$19.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 7 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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 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"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=7" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$99.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 8 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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 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"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=8" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$75.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 9 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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 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"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=9" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$88.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 10 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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 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"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=10" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$120.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 11 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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 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"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=11" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$25.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 12 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" 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 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"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=12" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$30.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
        </div>
        <div class="flex justify-center mt-8">
          <nav aria-label="Pagination">
            <ul class="flex">
              <li>
                <a href="#" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</a>
              </li>
              <li>
                <a href="#" class="px-3 py-2 leading-tight text-gray-600 bg-indigo-100 border border-indigo-300 hover:bg-indigo-200 hover:text-indigo-800 dark:bg-indigo-700 dark:border-indigo-600 dark:text-white dark:hover:bg-indigo-600 dark:hover:text-white">1</a>
              </li>
              <li>
                <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
              </li>
              <li>
                <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">3</a>
              </li>
              <li>
                <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</a>
              </li>
            </ul>
          </nav>
        </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>

検索ボックスコンポーネント

ミニマリスト/フラットなデザイン、鮮やかな配色、複雑なインタラクションを備えたレスポンシブ検索ボックスコンポーネントで、ビジネス/企業のWebサイトに適しています。ダークモードをサポートし、Tailwind CSSで構築されています。

プレビューを開く

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Search for Services</h2>

    <!-- Search Input with Advanced Options -->
    <div class="relative mb-6">
      <input type="text" placeholder="Search..." class="w-full py-3 pl-4 pr-12 text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded-lg focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600 transition duration-300">
      <button class="absolute inset-y-0 right-0 flex items-center pr-4 text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 transition duration-300">
        <svg class="h-6 w-6" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </button>
    </div>

    <!-- Filter and Sort Options -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
      <div>
        <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Category</label>
        <select id="category" class="w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-500">
          <option>All Categories</option>
          <option>Marketing</option>
          <option>Development</option>
          <option>Design</option>
          <option>Consulting</option>
        </select>
      </div>
      <div>
        <label for="sort" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Sort By</label>
        <select id="sort" class="w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-500">
          <option>Relevance</option>
          <option>Date Posted</option>
          <option>Rating</option>
        </select>
      </div>
    </div>

    <!-- Price Range Slider (Conceptual - without JS) -->
    <div class="mb-6">
      <label for="price-range" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Price Range</label>
      <div class="flex items-center space-x-4">
        <span class="text-gray-600 dark:text-gray-400">$50</span>
        <input type="range" id="price-range" min="0" max="1000" value="500" class="w-full h-2 bg-purple-300 dark:bg-purple-700 rounded-lg appearance-none cursor-pointer thumb-purple-500 dark:thumb-purple-400">
        <span class="text-gray-600 dark:text-gray-400">$1000+</span>
      </div>
    </div>

    <!-- Tags/Keywords Input -->
    <div class="mb-6">
      <label for="keywords" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Keywords</label>
      <input type="text" id="keywords" placeholder="Enter keywords (e.g.,

フッターコンポーネント

ブログ/コンテンツ Web サイト用のニューモーフィックフッターコンポーネント、モノクロカラースキーム、ダークモードサポート付き。これは、適度に複雑なコンポーネントです。応答性が高いです。

プレビューを開く

                <footer class="dark:bg-gray-800 bg-gray-200 text-gray-700 dark:text-gray-300 py-10 px-4 md:px-8 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    
    <div class="col-span-1">
      <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">About Us</h3>
      <p class="text-sm leading-relaxed">We are a passionate team dedicated to delivering high-quality content and insights on various topics. Stay tuned for more!</p>
    </div>
    
    <div class="col-span-1">
      <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Quick Links</h3>
      <ul class="text-sm space-y-2">
        <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Home</a></li>
        <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Blog</a></li>
        <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">About</a></li>
        <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Contact</a></li>
      </ul>
    </div>
    
    <div class="col-span-1">
      <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Subscribe</h3>
      <p class="text-sm mb-4">Get the latest articles and updates directly in your inbox.</p>
      <div class="flex">
        <input type="email" placeholder="Your email" class="w-full px-4 py-2 rounded-l-md focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
        <button class="bg-gray-400 dark:bg-gray-600 text-white px-4 py-2 rounded-r-md hover:bg-gray-500 dark:hover:bg-gray-700 transition-colors duration-200 shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark">Subscribe</button>
      </div>
    </div>
  </div>
  
  <div class="border-t border-gray-300 dark:border-gray-700 mt-8 pt-8 text-center text-sm">
    &copy; 2023 Your Blog Name. All rights reserved.
  </div>
</footer>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #222222;
  }
  .shadow-inner-neumorphic-light {
    box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #222222;
  }
  .shadow-neumorphic-btn-light {
    box-shadow: 3px 3px 6px #b0b0b0, -3px -3px 6px #ffffff;
  }
  .dark .shadow-neumorphic-btn-dark {
    box-shadow: 3px 3px 6px #4a4a4a, -3px -3px 6px #222222;
  }
</style>

ソーシャルログインコンポーネント

Skeuomorphic デザイン、アーストーン、ダークモードをサポートするレスポンシブレイアウトを備えたシンプルなソーシャルログインコンポーネント。このコンポーネントは、ブログやコンテンツ消費Webサイトに適しており、視覚的に魅力的でユーザーフレンドリーなログインエクスペリエンスを提供します。

プレビューを開く

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
  <div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 p-8 rounded-xl shadow-2xl border-t border-l border-stone-200 dark:border-stone-600 transform transition-all duration-300 hover:scale-105 active:scale-95">
    <h2 class="text-center text-stone-800 dark:text-stone-100 text-2xl font-semibold mb-6 drop-shadow-md">Join Us</h2>
    <div class="space-y-4">
      <button class="w-full flex items-center justify-center bg-brown-500 hover:bg-brown-600 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-brown-400 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
        <img src="https://www.google.com/images/branding/googleg/2x/googleg_standard_color_64dp.png" alt="Google icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with Google
      </button>
      <button class="w-full flex items-center justify-center bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/1024px-2021_Facebook_icon.svg.png" alt="Facebook icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with Facebook
      </button>
      <button class="w-full flex items-center justify-center bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/X_logo_2023.svg/512px-X_logo_2023.svg.png" alt="X icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with X
      </button>
    </div>
    <p class="text-center text-stone-700 dark:text-stone-300 text-sm mt-6">
      By joining, you agree to our <a href="#" class="text-brown-600 hover:text-brown-700 dark:text-brown-400 dark:hover:text-brown-500 font-medium">Terms of Service</a>.
    </p>
  </div>
</div>

カテゴリ

すべてのコンポーネント