検索コンポーネント

すべてのコンポーネント

利用可能なすべてのTailwind CSSコンポーネントを参照する

2要素認証コンポーネント

マテリアルデザインの美学、類似の配色、レスポンシブなダークテーマのサポートを備えたシンプルな2要素認証コンポーネント。

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div
      class="absolute inset-0 bg-gradient-to-r from-cyan-400 to-light-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"
    ></div>
    <div class="relative px-4 py-10 bg-white dark:bg-gray-800 shadow-lg sm:rounded-3xl sm:p-20">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Two-Factor Authentication</h1>
        </div>
        <div class="divide-y divide-gray-200">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 dark:text-gray-300 sm:text-lg sm:leading-7">
            <p>Please enter the 6-digit code sent to your device.</p>
            <div class="relative">
              <input
                autocomplete="off"
                id="code"
                name="code"
                type="text"
                class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 focus:outline-none focus:borer-rose-600"
                placeholder="XXXXXX"
                maxlength="6"
              />
              <label
                for="code"
                class="absolute left-0 -top-3.5 text-gray-600 dark:text-gray-400 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-440 peer-placeholder-shown:top-2 transition-all"
                >Verification Code</label
              >
            </div>
            <p class="text-xs text-gray-500 dark:text-gray-400">Can't find your code? Check your spam folder.</p>
          </div>
          <div class="pt-6 text-base leading-6 space-y-4 sm:text-lg sm:leading-7">
            <button
              class="bg-cyan-500 dark:bg-cyan-600 text-white rounded-md px-6 py-2 hover:bg-cyan-600 dark:hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"
            >
              Verify
            </button>
            <a href="#" class="ml-4 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
              >Resend Code</a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

コンテンツリンクにスキップする

鮮やかな色、レスポンシブデザイン、ダークモードのサポートを備えた、eコマース用のコンテンツリンクコンポーネントへのミニマリストのスキップ。

開けるプレビュー

                <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:bg-pink-500 focus:text-white focus:p-3 focus:rounded-lg focus:z-50 dark:focus:bg-purple-700 dark:focus:text-yellow-300">Skip to main content</a>

ナビゲーションコンポーネントコンポーネント

ダッシュボード用のレトロなビンテージナビゲーションコンポーネントで、補色による複雑なレイアウト、レスポンシブデザイン、Tailwind CSS を使用したダークテーマのサポートが特徴です。これには、ロゴ、ナビゲーションリンク、検索バー、およびユーザープロファイル情報が含まれます。

開けるプレビュー

                <nav class="bg-gradient-to-r from-purple-800 to-indigo-800 dark:from-gray-900 dark:to-gray-700 p-4 shadow-lg">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <div class="flex items-center space-x-4">
      <a href="#" class="text-white text-3xl font-bold font-mono tracking-wider">RETRO-DASH</a>
      <div class="hidden md:flex space-x-6 ml-8">
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Dashboard</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
      </div>
    </div>

    <div class="flex items-center space-x-6 mt-4 md:mt-0">
      <div class="relative">
        <input type="text" placeholder="Search..." class="bg-purple-700 dark:bg-gray-800 text-white placeholder-purple-300 dark:placeholder-gray-500 rounded-full py-2 pl-4 pr-10 focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-gray-600 transition duration-300 ease-in-out w-48 md:w-64">
        <svg class="w-5 h-5 text-purple-300 dark:text-gray-500 absolute right-3 top-2.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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </div>

      <div class="relative group">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-purple-400 dark:border-gray-600 cursor-pointer">
        <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-xl py-1 hidden group-hover:block transition duration-300 ease-in-out z-10">
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-gray-700">Profile</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-gray-700">Settings</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-gray-700">Logout</a>
        </div>
      </div>

      <button class="md:hidden text-white focus:outline-none">
        <svg class="w-8 h-8" 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 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>

    <div class="w-full md:hidden mt-4">
      <div class="flex flex-col space-y-2">
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Dashboard</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
      </div>
    </div>
  </div>
</nav>

アクティビティフィードコンポーネント

類似の配色、適度な複雑さ、レスポンシブデザイン、ダークテーマのサポートを備えたビジネス/企業Webサイト向けのブルータリストアクティビティフィードコンポーネント。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-mono">
  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 border-4 border-black dark:border-gray-700 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#4a5568] p-6 space-y-6">
    <h1 class="text-3xl md:text-4xl font-extrabold text-black dark:text-gray-100 uppercase border-b-4 border-black dark:border-gray-700 pb-2 mb-6">
      Activity Feed
    </h1>

    <!-- Activity Item 1 -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-yellow-100 dark:bg-yellow-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">John Doe</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">created a new <span class="text-red-700 dark:text-red-400 font-semibold">project proposal</span>.</p>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">2 hours ago</p>
      </div>
    </div>

    <!-- Activity Item 2 -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-pink-100 dark:bg-pink-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">Jane Smith</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">updated <span class="text-blue-700 dark:text-blue-400 font-semibold">marketing strategy document</span>.</p>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">5 hours ago</p>
      </div>
    </div>

    <!-- Activity Item 3 -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-green-100 dark:bg-green-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">Michael Brown</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">completed <span class="text-purple-700 dark:text-purple-400 font-semibold">Q3 financial report</span>.</p>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">1 day ago</p>
      </div>
    </div>

    <!-- Activity Item 4 - With an image -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-orange-100 dark:bg-orange-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">Sarah Davis</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">uploaded new images to <span class="text-teal-700 dark:text-teal-400 font-semibold">product showcase</span>:</p>
        <div class="mt-2 grid grid-cols-2 gap-2">
          <img class="w-full h-24 object-cover border-2 border-black dark:border-gray-700" src="https://picsum.photos/id/237/200/150" alt="Product Image 1">
          <img class="w-full h-24 object-cover border-2 border-black dark:border-gray-700" src="https://picsum.photos/id/238/200/150" alt="Product Image 2">
        </div>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">3 days ago</p>
      </div>
    </div>

    <!-- Activity Item 5 - Complex with multiple actions -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-purple-100 dark:bg-purple-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">David Wilson</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">reviewed <span class="text-indigo-700 dark:text-indigo-400 font-semibold">client feedback report</span> and left 3 comments:</p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-400 text-sm mt-2 space-y-1">
          <li>"Consider revising section 3.1 for clarity."</li>
          <li>"Great work on the data analysis!"</li>
          <li>"Meeting scheduled to discuss next steps."</li>
        </ul>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">1 week ago</p>
      </div>
    </div>

  </div>
</div>

データテーブルコンポーネント

Glassmorphismデータテーブルコンポーネントは、ポートフォリオの鮮やかな色で、ダークモードのサポートで応答性があります。JavaScriptは必要なく、Tailwind CSSを使用したHTMLのみ。

開けるプレビュー

                <div class="H-screen w-full bg-gradient-to-br from-purple-800 via-pink-600 to-red-500 p-8 dark:from-gray-900 dark:via-gray-800 dark:to-black">
  <div class="mx-auto max-w-4xl rounded-lg bg-white bg-opacity-10 p-8 shadow-lg backdrop-blur-lg dark:bg-gray-700 dark:bg-opacity-20">
    <h2 class="mb-6 text-center text-4xl font-bold text-white drop-shadow-lg dark:text-gray-200">My Projects</h2>
    <div class="overflow-x-auto">
      <table class="min-w-full rounded-lg bg-white bg-opacity-5 text-left text-sm text-white shadow-md backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-5">
        <thead>
          <tr class="bg-gray-700 bg-opacity-20 text-gray-200 dark:bg-gray-900 dark:bg-opacity-30">
            <th class="px-6 py-3">Project Name</th>
            <th class="px-6 py-3">Category</th>
            <th class="px-6 py-3">Status</th>
            <th class="px-6 py-3">Preview</th>
          </tr>
        </thead>
        <tbody>
          <tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
            <td class="px-6 py-4">Vibrant Dash</td>
            <td class="px-6 py-4">Dashboard UI</td>
            <td class="px-6 py-4"><span class="rounded-full bg-green-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Completed</span></td>
            <td class="px-6 py-4">
              <img src="https://picsum.photos/seed/vibrantdash/100/60" alt="Vibrant Dash Preview" class="h-10 w-16 rounded object-cover shadow-md" />
            </td>
          </tr>
          <tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
            <td class="px-6 py-4">AquaFlow Landing</td>
            <td class="px-6 py-4">Website</td>
            <td class="px-6 py-4"><span class="rounded-full bg-yellow-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">In Progress</span></td>
            <td class="px-6 py-4">
              <img src="https://picsum.photos/seed/aquaflow/100/60" alt="AquaFlow Landing Preview" class="h-10 w-16 rounded object-cover shadow-md" />
            </td>
          </tr>
          <tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
            <td class="px-6 py-4">Neon Chatbot</td>
            <td class="px-6 py-4">Application</td>
            <td class="px-6 py-4"><span class="rounded-full bg-blue-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Planned</span></td>
            <td class="px-6 py-4">
              <img src="https://picsum.photos/seed/neonchatbot/100/60" alt="Neon Chatbot Preview" class="h-10 w-16 rounded object-cover shadow-md" />
            </td>
          </tr>
          <tr class="hover:bg-gray-600 hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
            <td class="px-6 py-4">Retro Portfolio</td>
            <td class="px-6 py-4">Portfolio</td>
            <td class="px-6 py-4"><span class="rounded-full bg-green-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Completed</span></td>
            <td class="px-6 py-4">
              <img src="https://picsum.photos/seed/retroportfolio/100/60" alt="Retro Portfolio Preview" class="h-10 w-16 rounded object-cover shadow-md" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

ヒートマップコンポーネント

ポートフォリオに適した、類似の配色を持つ 3D ヒートマップコンポーネント。応答性が高く、ダークモードをサポートしています。

開けるプレビュー

                <div class="p-8 dark:bg-gray-900 min-h-screen">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-6 text-center">3D Heat Map Portfolio</h2>
    
    <!-- Responsive Grid for Heat Map Squares -->
    <div class="grid grid-cols-7 sm:grid-cols-14 md:grid-cols-21 lg:grid-cols-28 gap-1">
      {[...Array(98)].map((_, i) => (
        <div key={i} class="w-6 h-6 rounded-md shadow-md transform hover:scale-110 transition-transform duration-200"
             style={`background-color: hsl(${10 + i * 2}, 70%, ${50 + (i % 2) * 5}%); transform: rotateX(15deg) rotateY(15deg);`}></div>
      ))}
    </div>
    
    <div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Project 1 -->
      <div class="bg-gradient-to-br from-green-300 to-teal-400 dark:from-green-700 dark:to-teal-800 p-6 rounded-lg shadow-xl transform transition duration-300 hover:scale-105">
        <h3 class="text-2xl font-semibold text-white mb-3">Project Alpha Insights</h3>
        <p class="text-white text-opacity-90 leading-relaxed">Showcasing data trends with a unique 3D heat map visualization. This interactive element provides deep insights into user engagement over time, making complex data easily digestible for stakeholders.</p>
        <img src="https://picsum.photos/400/250?random=1" alt="Project Alpha" class="mt-4 rounded-lg shadow-md">
      </div>
      
      <!-- Project 2 -->
      <div class="bg-gradient-to-br from-blue-300 to-indigo-400 dark:from-blue-700 dark:to-indigo-800 p-6 rounded-lg shadow-xl transform transition duration-300 hover:scale-105">
        <h3 class="text-2xl font-semibold text-white mb-3">User Flow Analytics</h3>
        <p class="text-white text-opacity-90 leading-relaxed">A detailed heat map demonstrating user navigation paths on a e-commerce platform. The 3D perspective highlights popular routes and potential bottlenecks, informing design optimizations.</p>
        <img src="https://picsum.photos/400/250?random=2" alt="Project Beta" class="mt-4 rounded-lg shadow-md">
      </div>
    </div>

    <div class="mt-12 text-center">
      <h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Meet the Creator</h3>
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-24 h-24 rounded-full mx-auto mb-4 shadow-lg">
      <p class="text-gray-700 dark:text-gray-300 text-lg">John Doe, Data Visualization Specialist</p>
      <p class="text-gray-600 dark:text-gray-400 text-md mt-2">"Passionate about transforming complex data into beautiful and intuitive visual stories."</p>
    </div>
  </div>
</div>

スキューモーフィックソーシャルメディアチャート

スキューモーフィックにインスパイアされたシンプルなソーシャルメディア用のチャートコンポーネントで、補色とレスポンシブデザインを備えています。

開けるプレビュー

                <div class="p-4 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 rounded-lg shadow-xl border border-gray-300 dark:border-gray-700">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Engagement Over Time</h2>
  <div class="flex items-end justify-between h-40 mb-4">
    <!-- Bar 1 (e.g., Likes) -->
    <div class="flex-1 mx-1 bg-blue-500 dark:bg-blue-700 rounded-t-lg shadow-inner" style="height: 70%;"></div>
    <!-- Bar 2 (e.g., Comments) -->
    <div class="flex-1 mx-1 bg-red-500 dark:bg-red-700 rounded-t-lg shadow-inner" style="height: 90%;"></div>
    <!-- Bar 3 (e.g., Shares) -->
    <div class="flex-1 mx-1 bg-green-500 dark:bg-green-700 rounded-t-lg shadow-inner" style="height: 50%;"></div>
    <!-- Bar 4 (e.g., Views) -->
    <div class="flex-1 mx-1 bg-yellow-500 dark:bg-yellow-700 rounded-t-lg shadow-inner" style="height: 80%;"></div>
  </div>
  <div class="flex justify-between text-xs text-gray-600 dark:text-gray-400">
    <span>Likes</span>
    <span>Comments</span>
    <span>Shares</span>
    <span>Views</span>
  </div>
</div>

レーティングシステムコンポーネント

Curdy/Vintageレーティングシステムコンポーネント、補色スキーム、Responsive、ダークモードサポート付きEコマース用。JavaScriptは必要なく、Tailwind CSSを使用したHTMLのみ。

開けるプレビュー

                <div class="bg-gray-200 dark:bg-gray-800 p-8 min-h-screen flex items-center justify-center font-mono">
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 max-w-md w-full border-4 border-purple-500 dark:border-yellow-400 transform rotate-3 hover:rotate-0 transition-transform duration-300">
    <div class="text-center mb-6">
      <h2 class="text-3xl font-bold text-purple-700 dark:text-yellow-300 mb-2">Rate Our Product!</h2>
      <p class="text-gray-600 dark:text-gray-400">Share your thoughts on this awesome vintage item.</p>
    </div>

    <div class="flex justify-center items-center mb-6 space-x-2">
      <label for="rating" class="sr-only">Rating</label>
      <input type="range" id="rating" name="rating" min="1" max="5" value="4" class="slider w-full h-2 rounded-lg appearance-none cursor-pointer bg-gradient-to-r from-purple-400 to-red-400 dark:from-yellow-400 dark:to-green-400 thumb-retro" style="--slider-track-color: #d1d5db; --slider-thumb-color: #8b5cf6;">
      <span class="text-2xl font-bold text-purple-700 dark:text-yellow-300" id="rating-value">4</span>
    </div>

    <div class="grid grid-cols-5 gap-2 mb-6">
      <button class="rating-star group relative w-12 h-12 flex items-center justify-center bg-gray-300 dark:bg-gray-700 rounded-full text-2xl text-gray-500 dark:text-gray-400 hover:bg-purple-400 hover:text-white dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition-all duration-200 shadow-md transform hover:scale-110">
        <span class="star-icon">⭐</span>
        <span class="tooltip absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Terrible</span>
      </button>
      <button class="rating-star group relative w-12 h-12 flex items-center justify-center bg-gray-300 dark:bg-gray-700 rounded-full text-2xl text-gray-500 dark:text-gray-400 hover:bg-purple-400 hover:text-white dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition-all duration-200 shadow-md transform hover:scale-110">
        <span class="star-icon">⭐⭐</span>
        <span class="tooltip absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Bad</span>
      </button>
      <button class="rating-star group relative w-12 h-12 flex items-center justify-center bg-gray-300 dark:bg-gray-700 rounded-full text-2xl text-gray-500 dark:text-gray-400 hover:bg-purple-400 hover:text-white dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition-all duration-200 shadow-md transform hover:scale-110">
        <span class="star-icon">⭐⭐⭐</span>
        <span class="tooltip absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Okay</span>
      </button>
      <button class="rating-star group relative w-12 h-12 flex items-center justify-center bg-gray-300 dark:bg-gray-700 rounded-full text-2xl text-gray-500 dark:text-gray-400 hover:bg-purple-400 hover:text-white dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition-all duration-200 shadow-md transform hover:scale-110">
        <span class="star-icon">⭐⭐⭐⭐</span>
        <span class="tooltip absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Good</span>
      </button>
      <button class="rating-star group relative w-12 h-12 flex items-center justify-center bg-gray-300 dark:bg-gray-700 rounded-full text-2xl text-gray-500 dark:text-gray-400 hover:bg-purple-400 hover:text-white dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition-all duration-200 shadow-md transform hover:scale-110">
        <span class="star-icon">⭐⭐⭐⭐⭐</span>
        <span class="tooltip absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Excellent</span>
      </button>
    </div>

    <div class="mb-6">
      <label for="feedback" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Feedback:</label>
      <textarea id="feedback" name="feedback" rows="4" class="shadow appearance-none border border-gray-400 dark:border-gray-600 rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-yellow-300 bg-gray-100 dark:bg-gray-700 resize-none placeholder-gray-500 dark:placeholder-gray-400 font-mono" placeholder="Tell us more about your experience..."></textarea>
    </div>

    <div class="flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0 sm:space-x-4">
      <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg focus:outline-none focus:shadow-outline transition-all duration-200 transform hover:scale-105 shadow-lg border-2 border-purple-800 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:text-gray-900 dark:border-yellow-700 w-full sm:w-auto">
        Submit Rating
      </button>
      <button class="bg-gray-400 hover:bg-gray-500 text-white font-bold py-3 px-6 rounded-lg focus:outline-none focus:shadow-outline transition-all duration-200 transform hover:scale-105 shadow-lg border-2 border-gray-600 dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-800 w-full sm:w-auto">
        Cancel
      </button>
    </div>
  </div>
</div>

<style>
  /* Retro slider thumb styles */
  .thumb-retro::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #8b5cf6; /* Purple */
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid #f9fafb; /* White */
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.4); /* Purple glow */
    transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
  }

  .dark .thumb-retro::-webkit-slider-thumb {
    background: #fbbf24; /* Yellow */
    border-color: #111827; /* Dark gray */
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.4); /* Yellow glow */
  }

  .thumb-retro::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #8b5cf6; /* Purple */
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid #f9fafb; /* White */
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.4); /* Purple glow */
    transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
  }

  .dark .thumb-retro::-moz-range-thumb {
    background: #fbbf24; /* Yellow */
    border-color: #111827; /* Dark gray */
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.4); /* Yellow glow */
  }

  /* Tooltip for stars */
  .group .tooltip {
    display: none;
  }

  .group:hover .tooltip {
    display: block;
  }

  /* Custom styles for star rating selection (active state - optional, can be done with JS) */
  .rating-star:hover .star-icon {
    animation: pulse-star 0.3s ease-in-out infinite alternate;
  }

  @keyframes pulse-star {
    from { transform: scale(1); }
    to { transform: scale(1.2); }
  }

  /* Hide the default range input track */
  input[type="range"]::-webkit-slider-runnable-track {
    background: var(--slider-track-color);
    border-radius: 9999px;
  }

  input[type="range"]::-moz-range-track {
    background: var(--slider-track-color);
    border-radius: 9999px;
  }
</style>

メディア埋め込みコンポーネント

Skeuomorphism でデザインされたレスポンシブメディア埋め込みコンポーネントで、単色の配色を使用します。ビデオプレーヤー、トランスクリプトセクション、ソーシャル共有ボタンが含まれています。このデザインはダークモードをサポートし、Tailwind CSSで構築されています。

開けるプレビュー

                <div class="p-8 bg-gray-200 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-3xl shadow-2xl p-6 w-full max-w-4xl transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.02] border border-gray-300 dark:border-gray-600">
    <div class="relative pb-[56.25%] h-0 mb-6 rounded-2xl overflow-hidden shadow-xl border border-gray-300 dark:border-gray-700">
      <iframe class="absolute top-0 left-0 w-full h-full rounded-2xl" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="md:col-span-2">
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-4 tracking-tight drop-shadow-sm">The Art of Skeuomorphism in UI Design</h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          Skeuomorphism, as a design principle, involves incorporating ornamental design cues from physical objects into digital interfaces. It aims to make new functions familiar and intuitive by mimicking real-world counterparts. This approach often uses textures, shadows, and highlights to give digital elements a tangible feel, enhancing user comprehension and engagement, especially in blog and content consumption platforms.
        </p>

        <div class="border-t border-b border-gray-400 dark:border-gray-600 py-4 mb-6 flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <img class="w-10 h-10 rounded-full shadow-lg border-2 border-gray-300 dark:border-gray-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
            <span class="font-semibold text-gray-800 dark:text-gray-200">John Doe</span>
          </div>
          <div class="flex space-x-3 text-gray-600 dark:text-gray-400">
            <a href="#" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 11H9V9h2V7h2v2h2v2h-2v2h-2v-2z"/></svg>
            </a>
            <a href="#" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
            </a>
          </div>
        </div>

        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3">Transcript</h3>
        <div class="bg-gray-300 dark:bg-gray-700 p-5 rounded-xl shadow-inner border border-gray-400 dark:border-gray-600 h-64 overflow-y-auto custom-scrollbar">
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[00:00]</span> Welcome to our deep dive into Skeuomorphism, a fascinating design trend that continues to influence digital interfaces.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[00:15]</span> Originally, skeuomorphism helped users transition from physical to digital tools by replicating familiar real-world cues.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[00:30]</span> Think about the early calculator apps that looked exactly like physical calculators, with their three-dimensional buttons and LCD displays.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[00:45]</span> This design philosophy provides a sense of tangibility and familiarity, making complex digital interactions feel more intuitive.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[01:00]</span> While minimalism has gained prominence, skeuomorphism still finds its place, especially in applications where a sense of realism or traditional aesthetics is key.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[01:15]</span> For content platforms and blogs, it can enhance readability by visually separating content blocks and interactive elements.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[01:30]</span> This component demonstrates how skeuomorphic principles, combined with a monochromatic palette, can create a rich, inviting, and highly functional media embed.
          </p>
          <p class="text-gray-800 dark:text-gray-200">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[01:45]</span> We hope this component inspires you to explore the depths of design.
          </p>
        </div>
      </div>

      <div class="md:col-span-1">
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3">Related Content</h3>
        <div class="space-y-4">
          <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-md border border-gray-400 dark:border-gray-600 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-lg">
            <img class="rounded-lg mb-3 shadow border border-gray-300 dark:border-gray-500" src="https://picsum.photos/400/225?random=1" alt="Related image 1">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">The Revival of Vintage Design</h4>
            <p class="text-sm text-gray-700 dark:text-gray-300">Explore how old-school aesthetics are making a comeback in modern design.</p>
          </div>
          <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-md border border-gray-400 dark:border-gray-600 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-lg">
            <img class="rounded-lg mb-3 shadow border border-gray-300 dark:border-gray-500" src="https://picsum.photos/400/225?random=2" alt="Related image 2">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">Monochromatic Magic in UI</h4>
            <p class="text-sm text-gray-700 dark:text-gray-300">Discover the power of single-color palettes in creating cohesive interfaces.</p>
          </div>
          <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-md border border-gray-400 dark:border-gray-600 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-lg">
            <img class="rounded-lg mb-3 shadow border border-gray-300 dark:border-gray-500" src="https://picsum.photos/400/225?random=3" alt="Related image 3">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">Responsive Design Best Practices</h4>
            <p class="text-sm text-gray-700 dark:text-gray-300">Learn how to build websites that look great on any device, anywhere.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .custom-scrollbar::-webkit-scrollbar {
    width: 12px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: #ccc;
    border-radius: 10px;
  }

  .dark .custom-scrollbar::-webkit-scrollbar-track {
    background: #4a5568;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
    border: 3px solid #ccc;
  }

  .dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #a0aec0;
    border: 3px solid #4a5568;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }

  .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #cbd5e0;
  }
</style>

ログイン/サインアップコンポーネント

Tailwind CSSで構築された、マイクロインタラクション、類似の配色、ダークテーマのサポートを備えたeコマース向けのレスポンシブログイン/サインアップコンポーネント。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-md w-full relative overflow-hidden">
    
    <!-- Analogous Color Scheme Elements (example: blues and greens) -->
    <div class="absolute top-0 left-0 w-24 h-24 bg-blue-200 dark:bg-blue-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
    <div class="absolute top-0 right-0 w-24 h-24 bg-green-200 dark:bg-green-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
    <div class="absolute -bottom-8 left-20 w-24 h-24 bg-teal-200 dark:bg-teal-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>

    <div class="relative z-10">
      <div class="flex justify-center mb-6">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-white" id="form-title">Login</h2>
      </div>

      <!-- Login Form -->
      <form id="login-form">
        <div class="mb-4">
          <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
          <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 dark:border-gray-600 transition duration-300 ease-in-out transform focus:scale-105" placeholder="[email protected]">
        </div>
        <div class="mb-6">
          <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
          <input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 dark:border-gray-600 transition duration-300 ease-in-out transform focus:scale-105" placeholder="********">
        </div>
        <div class="flex items-center justify-between mb-6">
          <input type="submit" value="Login" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full transition duration-300 ease-in-out transform hover:scale-105 active:scale-95">
        </div>
        <p class="text-center text-gray-600 dark:text-gray-400 text-sm">
          Don't have an account? <a href="#" class="text-blue-500 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600 font-bold transition duration-300 ease-in-out opacity-75 hover:opacity-100" id="signup-link">Sign up</a>
        </p>
      </form>

      <!-- Signup Form (hidden by default) -->
      <form id="signup-form" class="hidden">
        <div class="mb-4">
          <label for="signup-name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Name</label>
          <input type="text" id="signup-name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 dark:border-gray-600 transition duration-300 ease-in-out transform focus:scale-105" placeholder="John Doe">
        </div>
        <div class="mb-4">
          <label for="signup-email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
          <input type="email" id="signup-email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 dark:border-gray-600 transition duration-300 ease-in-out transform focus:scale-105" placeholder="[email protected]">
        </div>
        <div class="mb-6">
          <label for="signup-password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
          <input type="password" id="signup-password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 dark:border-gray-600 transition duration-300 ease-in-out transform focus:scale-105" placeholder="********">
        </div>
        <div class="flex items-center justify-between mb-6">
          <input type="submit" value="Sign Up" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full transition duration-300 ease-in-out transform hover:scale-105 active:scale-95">
        </div>
        <p class="text-center text-gray-600 dark:text-gray-400 text-sm">
          Already have an account? <a href="#" class="text-green-500 hover:text-green-800 dark:text-green-400 dark:hover:text-green-600 font-bold transition duration-300 ease-in-out opacity-75 hover:opacity-100" id="login-link">Login</a>
        </p>
      </form>
    </div>
  </div>
</div>

<!-- Just a little bit of inline CSS for the blob animation - usually this would be in a CSS file -->
<style>
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }
</style>

<script>
  // This script is for toggling between login and signup forms
  // In a real application, this would be handled by a JavaScript framework or library
  const loginForm = document.getElementById('login-form');
  const signupForm = document.getElementById('signup-form');
  const loginLink = document.getElementById('login-link');
  const signupLink = document.getElementById('signup-link');
  const formTitle = document.getElementById('form-title');

  signupLink.addEventListener('click', (e) => {
    e.preventDefault();
    loginForm.classList.add('hidden');
    signupForm.classList.remove('hidden');
    formTitle.textContent = 'Sign Up';
  });

  loginLink.addEventListener('click', (e) => {
    e.preventDefault();
    signupForm.classList.add('hidden');
    loginForm.classList.remove('hidden');
    formTitle.textContent = 'Login';
  });
</script>

1 ... 117 118 119 120 121 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント