検索コンポーネント

すべてのコンポーネント

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

ユーザーメンションコンポーネント

ユーザーが、Tailwind CSS を使用して、単色の配色、シンプルなレイアウト、レスポンシブデザイン、ダークテーマのサポートを特徴とするダッシュボードのコンポーネントについて言及します。

                <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
  <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">User Mentions</h3>
  <div class="space-y-3">
    <div class="flex items-center justify-between p-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
      <div class="flex items-center space-x-3">
        <img class="w-8 h-8 rounded-full" src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <p class="text-sm text-gray-700 dark:text-gray-300">@john_doe mentioned you in <span class="font-medium text-blue-500">#project-alpha</span></p>
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">2m ago</span>
    </div>

    <div class="flex items-center justify-between p-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
      <div class="flex items-center space-x-3">
        <img class="w-8 h-8 rounded-full" src="https://www.randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
        <p class="text-sm text-gray-700 dark:text-gray-300">@jane_smith replied to your comment in <span class="font-medium text-blue-500">#design-feedback</span></p>
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">1h ago</span>
    </div>

    <div class="flex items-center justify-between p-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
      <div class="flex items-center space-x-3">
        <img class="w-8 h-8 rounded-full" src="https://www.randomuser.me/api/portraits/men/78.jpg" alt="Avatar">
        <p class="text-sm text-gray-700 dark:text-gray-300">@peter_jones invited you to <span class="font-medium text-blue-500">#new-feature</span></p>
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
    </div>
  </div>
  <button class="mt-4 w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition-colors duration-200">
    View All Mentions
  </button>
</div>

トップに戻るボタン - ブルータリズム

ポートフォリオ用のブルータリズムの「Back to Top」ボタンコンポーネントで、トライアドの配色とシンプルなデザインが特徴です。レスポンシブで、Tailwind CSSを使用したダークモードをサポートしています。

開けるプレビュー

                <a href="#" class="fixed bottom-4 right-4 bg-red-500 text-yellow-300 border-4 border-black dark:bg-red-700 dark:text-yellow-100 dark:border-white transition-all duration-300 hover:bg-red-600 hover:text-yellow-400 dark:hover:bg-red-800 dark:hover:text-yellow-200 p-4 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] z-50">
    <span class="font-extrabold text-xl uppercase">↑<br/>Top</span>
</a>

フッターナビゲーションコンポーネント

ダッシュボード用に設計されたレスポンシブフッターナビゲーションコンポーネントで、鮮やかな色のスキューモーフィックスタイルが特徴です。ナビゲーションリンク、ロゴ、ソーシャルメディアアイコンが含まれており、Tailwind CSSを使用した完全なダークモードがサポートされています。このデザインは、インタラクティブなホバー効果を備えた適度な複雑さを目指しています。

開けるプレビュー

                
<footer class="bg-gradient-to-br from-gray-200 to-gray-400 text-gray-800 p-6 shadow-2xl relative overflow-hidden dark:from-gray-900 dark:to-gray-700 dark:text-gray-200">
  <!-- Background Ornaments for Skeuomorphism -->
  <div class="absolute inset-0 pointer-events-none">
    <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-gradient-to-br from-yellow-300 to-orange-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:from-yellow-600 dark:to-orange-700"></div>
    <div class="absolute top-1/2 right-1/4 w-32 h-32 bg-gradient-to-br from-pink-400 to-red-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:from-pink-700 dark:to-red-800"></div>
    <div class="absolute bottom-1/4 left-1/3 w-32 h-32 bg-gradient-to-br from-green-300 to-blue-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 dark:from-green-600 dark:to-blue-700"></div>
  </div>


  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center relative z-10">
    <!-- Logo Section -->
    <div class="mb-4 md:mb-0 transform hover:scale-105 transition duration-300">
      <a href="#" class="flex items-center space-x-3 3d-text">
        <!-- Skeuomorphic Logo Placeholder -->
        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg shadow-inner flex items-center justify-center p-2 dark:from-blue-700 dark:to-purple-800">
          <svg class="w-8 h-8 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="M9.75 17L9 20l-1 1h4c0 0 0 0 0 0 0-1 0-2 0-3 0-4 0-5 0-6 0-1 0-2 0-3 0-4 0-5 0-6 0-1 0-2 0-3 0-4 0-5 0-6 0-1 0-2 0-3 0-4 0-5 0-6 0-1 M15 17l-1 1h-4c0 0 0 0 0 0v-4l4-4V7a2 2 0 00-2-2H9a2 2 0 00-2 2v4l-4 4V17a2 2 0 002 2h4l4-4z"></path></svg>
        </div>
        <span class="text-3xl font-extrabold text-gray-900 drop-shadow-lg dark:text-white">Dashboard</span>
      </a>
    </div>

    <!-- Navigation Links -->
    <nav class="mb-4 md:mb-0">
      <ul class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8 text-lg font-medium">
        <li><a href="#" class="hover:text-blue-600 transition duration-300 ease-in-out transform hover:-translate-y-1 block py-2 px-3 rounded-md active-link dark:hover:text-blue-400 3d-button">Home</a></li>
        <li><a href="#" class="hover:text-green-600 transition duration-300 ease-in-out transform hover:-translate-y-1 block py-2 px-3 rounded-md hover-effect-1 dark:hover:text-green-400 3d-button">Analytics</a></li>
        <li><a href="#" class="hover:text-purple-600 transition duration-300 ease-in-out transform hover:-translate-y-1 block py-2 px-3 rounded-md hover-effect-2 dark:hover:text-purple-400 3d-button">Reports</a></li>
        <li><a href="#" class="hover:text-orange-600 transition duration-300 ease-in-out transform hover:-translate-y-1 block py-2 px-3 rounded-md hover-effect-3 dark:hover:text-orange-400 3d-button">Settings</a></li>
      </ul>
    </nav>

    <!-- Social Media Icons -->
    <div class="flex space-x-4">
      <a href="#" class="text-gray-700 hover:text-blue-500 transform hover:scale-110 transition duration-300 dark:text-gray-300 dark:hover:text-blue-400 3d-icon">
        <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.873V14.89h-2.54V12h2.54V9.77c0-2.508 1.493-3.89 3.776-3.89 1.094 0 2.24.195 2.24.195v2.45h-1.24c-1.209 0-1.583.75-1.583 1.518V12h2.773l-.443 2.89h-2.33V22h5.517c3.544-.66 6.257-3.957 6.257-7.981C22 6.477 17.523 2 12 2z"></path></svg>
      </a>
      <a href="#" class="text-gray-700 hover:text-red-600 transform hover:scale-110 transition duration-300 dark:text-gray-300 dark:hover:text-red-500 3d-icon">
        <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.071 1.17.06 1.74.24 2.19.418.46.18.82.35 1.13.66.31.31.48.67.66 1.13.17.45.35 1.02.418 2.19.059 1.266.071 1.646.071 4.85s-.012 3.584-.071 4.85c-.06 1.17-.24 1.74-.418 2.19-.18.46-.35.82-.66 1.13-.31.31-.67.48-1.13.66-.45.17-.99.35-2.19.418-1.266.059-1.646.071-4.85.071s-3.584-.012-4.85-.071c-1.17-.06-1.74-.24-2.19-.418-.46-.18-.82-.35-1.13-.66-.31-.31-.48-.67-.66-1.13-.17-.45-.35-.99-.418-2.19-.059-1.266-.071-1.646-.071-4.85s.012-3.584.071-4.85c.06-1.17.24-1.74.418-2.19.18-.46.35-.82.66-1.13.31-.31.67-.48 1.13-.66.45-.17.99-.35 2.19-.418C8.416 2.175 8.796 2.163 12 2.163zm0 3.868c-3.34 0-6.04 2.7-6.04 6.04s2.7 6.04 6.04 6.04 6.04-2.7 6.04-6.04-2.7-6.04-6.04-6.04zM12 16.347c-2.4 0-4.347-1.946-4.347-4.347 0-2.4 1.946-4.347 4.347-4.347s4.347 1.946 4.347 4.347c0 2.4-1.946 4.347-4.347 4.347zm6.757-9.52c-.67 0-1.21-.54-1.21-1.21s.54-1.21 1.21-1.21 1.21.54 1.21 1.21-.54 1.21-1.21 1.21z"></path></svg>
      </a>
      <a href="#" class="text-gray-700 hover:text-blue-700 transform hover:scale-110 transition duration-300 dark:text-gray-300 dark:hover:text-blue-600 3d-icon">
        <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24"><path d="M22.46 6h-6.28l.8-.93c.18-.21.28-.48.28-.76a1.185 1.185 0 00-1.18-.54h-1.63c-.11-.06-.23-.1-.36-.12-.13-.02-.27-.03-.4-.03H3.61c-1.39 0-2 1.01-2 2.4V20h22.46c.86 0 1.54-.68 1.54-1.54v-10.45c0-.86-.68-1.54-1.54-1.54zm-2.46 8H5v-2h15v2zm0-4H5V8h15v2z"></path></svg>
      </a>
    </div>
  </div>

  <!-- Copyright and additional links -->
  <div class="mt-6 pt-4 border-t border-gray-300 text-center text-gray-600 text-sm dark:border-gray-600 dark:text-gray-400 relative z-10">
    <p>&copy; 2023 Dashboard Inc. All rights reserved.</p>
    <div class="flex justify-center space-x-4 mt-2">
      <a href="#" class="hover:underline hover:text-gray-800 dark:hover:text-gray-200">Privacy Policy</a>
      <a href="#" class="hover:underline hover:text-gray-800 dark:hover:text-gray-200">Terms of Service</a>
    </div>
  </div>

  <!-- Styles for Skeuomorphism and Vibrancy -->
  <style>
    @keyframes blob {
      0% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(30px, -50px) scale(1.1); }
      66% { transform: translate(-20px, 20px) scale(0.9); }
      100% { transform: translate(0, 0) scale(1); }
    }

    .animate-blob {
      animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

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

    .animation-delay-4000 {
      animation-delay: 4s;
    }

    .3d-text {
      text-shadow: 1px 1px 0px rgba(255,255,255,0.7), 2px 2px 0px rgba(0,0,0,0.5);
      color: #333;
    }

    .dark .3d-text {
        text-shadow: 1px 1px 0px rgba(0,0,0,0.7), 2px 2px 0px rgba(255,255,255,0.2);
        color: #eee;
    }

    .3d-button {
        background-color: #d1d5db; /* Light gray */
        border-radius: 0.5rem;
        box-shadow: inset 0px 1px 0px rgba(255,255,255,0.8), 0px 3px 5px rgba(0,0,0,0.3), inset 0px -2px 0px rgba(0,0,0,0.15);
        transition: all 0.2s ease-in-out;
    }

    .3d-button:hover {
        transform: translateY(-2px);
        box-shadow: inset 0px 1px 0px rgba(255,255,255,0.9), 0px 5px 8px rgba(0,0,0,0.4), inset 0px -1px 0px rgba(0,0,0,0.2);
    }

    .dark .3d-button {
        background-color: #4a5568; /* Darker gray */
        box-shadow: inset 0px 1px 0px rgba(255,255,255,0.1), 0px 3px 5px rgba(0,0,0,0.7), inset 0px -2px 0px rgba(0,0,0,0.3);
    }

    .dark .3d-button:hover {
        transform: translateY(-2px);
        box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2), 0px 5px 8px rgba(0,0,0,0.8), inset 0px -1px 0px rgba(0,0,0,0.4);
    }

    .3d-icon {
        filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
    }

    .dark .3d-icon {
        filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.7));
    }

    /* Specific vibrant color hover effects for navigation */
    .active-link {
      color: #3b82f6; /* blue-500 */
      font-weight: bold;
      text-shadow: 0px 0px 8px rgba(59, 130, 246, 0.6);
    }
    .dark .active-link {
      color: #60a5fa; /* blue-400 */
      text-shadow: 0px 0px 8px rgba(96, 165, 250, 0.6);
    }
  </style>
</footer>

コメントセクションコンポーネント

鮮やかな色、適度な複雑さ、レスポンシブデザイン、ダークテーマのサポートを備えたeコマース向けのミニマリスト/フラットデザインのコメントセクションコンポーネント。

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Customer Reviews</h2>

  <!-- Comment 1 -->
  <div class="mb-6 flex">
    <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    <div>
      <div class="flex items-center mb-2">
        <p class="font-semibold text-blue-600 dark:text-blue-400">Sarah J.</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm ml-4">2 days ago</p>
      </div>
      <div class="flex items-center mb-2">
        <span class="text-yellow-400">★★★★★</span>
      </div>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed">"Absolutely love this product! The quality is superb and it arrived so quickly. Highly recommend!"</p>
    </div>
  </div>

  <!-- Comment 2 -->
  <div class="mb-6 flex">
    <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
    <div>
      <div class="flex items-center mb-2">
        <p class="font-semibold text-blue-600 dark:text-blue-400">Mark T.</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm ml-4">5 days ago</p>
      </div>
      <div class="flex items-center mb-2">
        <span class="text-yellow-400">★★★★☆</span>
      </div>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed">"Good product overall. It does what it says. Shipping was a bit slow, but worth the wait."</p>
    </div>
  </div>

  <!-- Comment Form (moderate complexity interactive feature) -->
  <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Leave a Review</h3>
    <form>
      <div class="mb-4">
        <label for="rating" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Rating</label>
        <select id="rating" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 dark:text-white dark:border-gray-600">
          <option>★★★★★ - Excellent</option>
          <option>★★★★☆ - Very Good</option>
          <option>★★★☆☆ - Good</option>
          <option>★★☆☆☆ - Fair</option>
          <option>★☆☆☆☆ - Poor</option>
        </select>
      </div>
      <div class="mb-4">
        <label for="comment" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Comment</label>
        <textarea id="comment" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 dark:text-white dark:border-gray-600" placeholder="Share your thoughts..."></textarea>
      </div>
      <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">
        Submit Review
      </button>
    </form>
  </div>
</div>

ユーザープロファイルコンポーネント

ブルータリズムデザイン、単色の配色、ソーシャルメディア用のシンプルな複雑さを備えたユーザープロファイルコンポーネント。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-brutalism rounded-none overflow-hidden">
    <div class="p-6">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-3xl font-bold text-black dark:text-white uppercase">Profiles</h2>
        <svg class="w-8 h-8 text-black 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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
      </div>
      
      <div class="space-y-6">
        <!-- Profile 1 -->
        <div class="flex items-center space-x-4 border-2 border-black dark:border-white p-4 bg-gray-200 dark:bg-gray-700">
          <img class="w-16 h-16 object-cover border-2 border-black dark:border-white" src="https://randomuser.me/api/portraits/men/80.jpg" alt="User Avatar">
          <div>
            <h3 class="text-xl font-bold text-black dark:text-white uppercase">John Doe</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300">Online</p>
          </div>
        </div>

        <!-- Profile 2 -->
        <div class="flex items-center space-x-4 border-2 border-black dark:border-white p-4 bg-gray-200 dark:bg-gray-700">
          <img class="w-16 h-16 object-cover border-2 border-black dark:border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <h3 class="text-xl font-bold text-black dark:text-white uppercase">Jane Smith</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300">Offline</p>
          </div>
        </div>

        <!-- Profile 3 -->
        <div class="flex items-center space-x-4 border-2 border-black dark:border-white p-4 bg-gray-200 dark:bg-gray-700">
          <img class="w-16 h-16 object-cover border-2 border-black dark:border-white" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
          <div>
            <h3 class="text-xl font-bold text-black dark:text-white uppercase">Peter Jones</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300">Online</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .shadow-brutalism {
    box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 1);
  }
  .dark .shadow-brutalism {
    box-shadow: 8px 8px 0px 0px rgba(255, 255, 255, 1);
  }
</style>

ブルータリスト製品カード

eコマース用のシンプルなインタラクティブ製品カードコンポーネントで、グレースケールのブルータリズムデザインが施されています。商品画像、タイトル、価格、「カートに入れる」ボタンが特徴です。このコンポーネントは応答性が高く、ダークモードをサポートしています。ホバー効果は、対話性のために含まれています。

開けるプレビュー

                <div class="dark:bg-gray-900 bg-gray-100 p-4 font-mono antialiased flex items-center justify-center min-h-screen">
  <div class="relative dark:bg-black bg-white border-2 border-black dark:border-white w-full max-w-sm mx-auto shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff]">
    <div class="overflow-hidden border-b-2 border-black dark:border-white">
      <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover transition-transform duration-300 ease-in-out hover:scale-105">
    </div>
    <div class="p-4 relative">
      <h3 class="text-xl dark:text-white text-black font-bold mb-2 uppercase">Product Title Here</h3>
      <p class="text-black dark:text-gray-300 text-sm mb-4">A short and punchy description of the product, highlighting its brutalist appeal.</p>
      <div class="flex justify-between items-center mb-4">
        <span class="text-2xl dark:text-white text-black font-extrabold">$99.99</span>
        <button class="bg-black dark:bg-white text-white dark:text-black uppercase text-sm py-2 px-4 border-2 border-black dark:border-white font-bold hover:bg-gray-800 dark:hover:bg-gray-300 transition-colors duration-200 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">Add to Cart</button>
      </div>
    </div>
    <div class="absolute -top-2 -right-2 bg-black dark:bg-white text-white dark:text-black px-2 py-1 text-xs font-bold uppercase border-2 border-black dark:border-white">New</div>
  </div>
</div>

ログインフォームコンポーネント

マイクロインタラクションと類似の配色を備えた複雑で応答性の高いログインフォームコンポーネントで、ビジネス/企業のWebサイトに適しています。ダークモードをサポートし、スタイリングにTailwind CSSを使用します。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl flex flex-col md:flex-row w-full max-w-4xl overflow-hidden">

    <!-- Image Section -->
    <div class="md:w-1/2 p-0 relative">
      <img src="https://picsum.photos/800/600?random=1" alt="Login Illustration" class="w-full h-full object-cover">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-800 to-transparent opacity-75"></div>
      <div class="absolute bottom-6 left-6 text-white text-3xl font-bold">Welcome Back!</div>
    </div>

    <!-- Login Form Section -->
    <div class="md:w-1/2 p-8 md:p-12 space-y-8 flex flex-col justify-center">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center">Login to Your Account</h2>

      <form class="space-y-6">

        <!-- Email Input with Microinteraction -->
        <div class="relative group">
          <input type="email" id="email" class="peer h-12 w-full border-b-2 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white placeholder-transparent focus:outline-none focus:border-purple-600 dark:focus:border-purple-400 bg-transparent" placeholder="Email address" />
          <label for="email" class="absolute left-0 -top-3.5 text-gray-600 dark:text-gray-400 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3 peer-focus:-top-3.5 peer-focus:text-purple-600 dark:peer-focus:text-purple-400 peer-focus:text-sm">Email address</label>
          <svg class="absolute right-3 top-3 text-gray-400 dark:text-gray-500 group-focus-within:text-purple-600 dark:group-focus-within:text-purple-400 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
        </div>

        <!-- Password Input with Microinteraction -->
        <div class="relative group animate-fade-in-up">
          <input type="password" id="password" class="peer h-12 w-full border-b-2 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white placeholder-transparent focus:outline-none focus:border-purple-600 dark:focus:border-purple-400 bg-transparent" placeholder="Password" />
          <label for="password" class="absolute left-0 -top-3.5 text-gray-600 dark:text-gray-400 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3 peer-focus:-top-3.5 peer-focus:text-purple-600 dark:peer-focus:text-purple-400 peer-focus:text-sm">Password</label>
          <svg class="absolute right-3 top-3 text-gray-400 dark:text-gray-500 group-focus-within:text-purple-600 dark:group-focus-within:text-purple-400 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
        </div>

        <!-- Remember Me & Forgot Password -->
        <div class="flex items-center justify-between text-sm">
          <div class="flex items-center">
            <input id="remember_me" name="remember_me" type="checkbox" class="h-4 w-4 text-purple-600 dark:text-purple-400 focus:ring-purple-500 border-gray-300 rounded dark:border-gray-600">
            <label for="remember_me" class="ml-2 block text-gray-900 dark:text-gray-300">Remember me</label>
          </div>
          <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200">Forgot your password?</a>
        </div>

        <!-- Login Button with Microinteraction -->
        <div>
          <button type="submit" class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-lg font-medium rounded-md text-white bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-offset-gray-800 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
              <svg class="h-6 w-6 text-purple-200 group-hover:text-purple-100 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
              </svg>
            </span>
            Sign in
          </button>
        </div>
      </form>

      <!-- Social Login Options (Example Microinteraction) -->
      <div class="relative">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
        </div>
      </div>

      <div class="flex justify-center space-x-4">
        <button class="flex items-center justify-center p-3 border border-gray-300 dark:border-gray-600 rounded-full shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800 transform hover:-translate-y-1 transition-transform duration-200">
          <img class="h-5 w-5 mr-2" src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google">
          Google
        </button>
        <button class="flex items-center justify-center p-3 border border-gray-300 dark:border-gray-600 rounded-full shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 transform hover:-translate-y-1 transition-transform duration-200">
          <img class="h-5 w-5 mr-2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Facebook_Logo_%282019%29.png/1200px-Facebook_Logo_%282019%29.png" alt="Facebook">
          Facebook
        </button>
      </div>

      <div class="text-center text-sm text-gray-600 dark:text-gray-400 mt-6">
        Don't have an account? 
        <a href="#" class="font-medium text-purple-600 dark:text-purple-400 hover:text-purple-500 dark:hover:text-purple-300 transition-colors duration-200">Sign up</a>
      </div>

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

<!-- To enable micro-interactions, you would typically use JavaScript. 
     However, for the purpose of this request, some CSS-only micro-interactions 
     are simulated using Tailwind's `group` and `peer` modifiers, 
     and `hover` / `active` / `focus` pseudo-classes for basic animations. 
     More complex animations would require a JS framework like React/Vue/Angular, 
     or plain JS with Web Animations API or CSS keyframe animations. -->

Like/Reaction Buttons コンポーネント

Tailwind CSS を使用したダークモードをサポートするレスポンシブな Like/Reaction Buttons コンポーネント。ダッシュボードに適した補色スキームが特徴で、インタラクティブなリアクションボタンには適度な複雑さがあります。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-900">
  <div class="dark:bg-gray-800 p-4 rounded-lg shadow-xl">
    <div class="flex space-x-2">
      <!-- Like Button -->
      <button class="flex items-center space-x-1 p-2 rounded-full dark:bg-blue-600 text-white hover:dark:bg-blue-700 transition duration-300">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.857 2.14L18 17v-2.14a2 2 0 00-.857-1.857L14 10zM4 10h4.764a2 2 0 011.857 2.14L8 17v-2.14a2 2 0 00-.857-1.857L4 10zM9 16l-3 3m0 0l-3-3m3 3V4"></path></svg>
        <span>Like</span>
        <span class="dark:text-blue-200">1.2K</span>
      </button>

      <!-- Reactions Dropdown (simplified) -->
      <div class="relative group">
        <button class="flex items-center space-x-1 p-2 rounded-full dark:bg-green-600 text-white hover:dark:bg-green-700 transition duration-300">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m0 0H9m12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>React</span>
        </button>
        <!-- This dropdown would typically be controlled by JavaScript, but for HTML-only, it's always visible on hover for demonstration -->
        <div class="hidden group-hover:block absolute left-0 mt-2 w-48 dark:bg-gray-700 rounded-md shadow-lg py-1 z-10">
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">👍 Like</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">❤️ Love</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😂 Laugh</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😮 Wow</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😢 Sad</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😡 Angry</a>
        </div>
      </div>
    </div>
  </div>
</div>

オーディオプレーヤーコンポーネント

マイクロインタラクション、アーストーンの配色、適度な複雑さ、ダークテーマのサポートを備えたレスポンシブオーディオプレーヤーコンポーネントで、ビジネス/企業のWebサイトに適しています。

開けるプレビュー

                <div class="p-4 bg-stone-100 dark:bg-stone-900 rounded-lg shadow-xl max-w-md mx-auto my-10 transform transition duration-500 hover:scale-105">
  <div class="flex items-center space-x-4">
    <div class="flex-shrink-0">
      <img class="h-16 w-16 rounded-lg object-cover shadow-lg" src="https://picsum.photos/seed/audio-art/100/100" alt="Album Art">
    </div>
    <div class="flex-grow">
      <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-200">Whispering Pines</h3>
      <p class="text-sm text-stone-600 dark:text-stone-400">Nature Sounds Co.</p>
    </div>
    <button class="p-3 rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 transform transition duration-300 hover:scale-110 hover:bg-stone-400 dark:hover:bg-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
      <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
        <path d="M8 5v14l11-7z"/>
      </svg>
    </button>
  </div>

  <div class="mt-5">
    <div class="flex items-center space-x-3">
      <span class="text-xs text-stone-600 dark:text-stone-400">0:45</span>
      <div class="flex-grow bg-stone-300 dark:bg-stone-700 rounded-full h-2">
        <div class="bg-amber-700 dark:bg-amber-500 h-2 rounded-full" style="width: 45%;"></div>
      </div>
      <span class="text-xs text-stone-600 dark:text-stone-400">3:20</span>
    </div>

    <div class="flex justify-between items-center mt-4">
      <button class="p-2 rounded-full text-stone-600 dark:text-stone-400 transform transition duration-300 hover:scale-110 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none">
        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
      </button>
      <button class="p-2 rounded-full text-stone-600 dark:text-stone-400 transform transition duration-300 hover:scale-110 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none">
        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18 18l-8.5-6L18 6v12zM6 6v12h2V6H6z"/></svg>
      </button>
      <button class="p-2 rounded-full text-stone-600 dark:text-stone-400 transform transition duration-300 hover:scale-110 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none">
        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 4.5V19.5M19.5 12H4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </button>
      
      <div class="relative group">
        <button class="p-2 rounded-full text-stone-600 dark:text-stone-400 transform transition duration-300 hover:scale-110 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none">
          <svg class="h-5 w-5" 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-1 15v-7h2v7h-2zm0-9V7h2v1h-2z"/></svg>
        </button>
        <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-stone-700 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">Volume Control</span>
      </div>
    </div>
  </div>
</div>

通知コンポーネント

ダークモードをサポートするシンプルでレスポンシブな通知コンポーネントで、グレースケールのカラースキームのスキューモーフィックスタイルで設計されています。最小限のデザインスキルを披露するポートフォリオに最適です。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden transform duration-300 hover:scale-105">
    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 flex items-center justify-between">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Notifications</h3>
      <span class="text-sm text-gray-500 dark:text-gray-400">3 New</span>
    </div>
    <div class="p-4 space-y-4">

      <!-- Notification Item 1 -->
      <div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
        <img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">John Doe commented on your post.</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
        </div>
      </div>

      <!-- Notification Item 2 -->
      <div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
        <img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Jane Smith liked your photo.</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p>
        </div>
      </div>

      <!-- Notification Item 3 -->
      <div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
        <img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">You have a new message from Bob Johnson.</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
        </div>
      </div>

    </div>
    <div class="px-6 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-right">
      <a href="#" class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transform duration-200 hover:underline">View All Notifications</a>
    </div>
  </div>
</div>

1 ... 126 127 128 129 130 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント