検索コンポーネント

すべてのコンポーネント

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

ページネーションコンポーネント

ポートフォリオのマイクロインタラクションを持つページネーションコンポーネントで、トライアドカラースキームを使用。ダークテーマをサポートし、JavaScriptを使用しないレスポンシブデザイン。

                <nav class="flex justify-center items-center space-x-2 my-8 dark:bg-gray-900 bg-white p-4 rounded-lg shadow-lg" aria-label="Pagination">
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 leading-5 rounded-md hover:bg-purple-100 dark:hover:bg-purple-700 focus:outline-none focus:ring focus:border-purple-300 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300">
    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
    </svg>
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:bg-green-100 dark:hover:bg-green-700 focus:outline-none focus:ring focus:border-green-300 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300">
    1
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-blue-600 leading-5 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition ease-in-out duration-150 dark:bg-blue-600 dark:border-blue-600 dark:text-gray-100 transform scale-105 shadow-md">
    2
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:bg-red-100 dark:hover:bg-red-700 focus:outline-none focus:ring focus:border-red-300 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300">
    3
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 leading-5 rounded-md hover:bg-purple-100 dark:hover:bg-purple-700 focus:outline-none focus:ring focus:border-purple-300 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300">
    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
    </svg>
  </a>
</nav>

タグクラウドコンポーネント

タグクラウドコンポーネントのダークモード

開けるプレビュー

                <div class="dark:bg-gray-900 dark:text-gray-200 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-6 text-amber-600 dark:text-amber-400">Popular Product Tags</h2>
    <div class="flex flex-wrap gap-3">
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Electronics</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Home Goods</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Apparel</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Books</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Sports & Outdoors</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Beauty</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Toys</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Automotive</a>
    </div>
  </div>
</div>

OAuth ボタンコンポーネント

Brutalist OAuth Buttons Component は、補色スキームのポートフォリオ用です。ダークモードのサポートによるレスポンシブ。

開けるプレビュー

                <div class="min-h-screen bg-neutral-100 p-8 flex items-center justify-center dark:bg-neutral-900">
  <div class="max-w-4xl w-full bg-white border-4 border-black p-10 shadow-[8px_8px_0_0_#000] dark:bg-neutral-800 dark:border-white dark:shadow-[8px_8px_0_0_#fff] relative">
    <div class="absolute top-0 left-0 -mt-2 -ml-2 w-4 h-4 bg-red-500 border-2 border-black dark:bg-red-700 dark:border-white"></div>
    <div class="absolute top-0 right-0 -mt-2 -mr-2 w-4 h-4 bg-red-500 border-2 border-black dark:bg-red-700 dark:border-white"></div>
    <div class="absolute bottom-0 left-0 -mb-2 -ml-2 w-4 h-4 bg-red-500 border-2 border-black dark:bg-red-700 dark:border-white"></div>
    <div class="absolute bottom-0 right-0 -mb-2 -mr-2 w-4 h-4 bg-red-500 border-2 border-black dark:bg-red-700 dark:border-white"></div>

    <h2 class="text-5xl md:text-7xl font-extrabold text-blue-700 mb-8 text-center uppercase tracking-tighter dark:text-orange-400 leading-none">
      Connect Your Profile
      <span class="block text-2xl md:text-4xl text-black dark:text-white mt-2">Showcase Your Brilliance</span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <button class="w-full flex items-center justify-center px-8 py-4 border-4 border-black text-xl font-bold uppercase bg-yellow-400 text-black shadow-[6px_6px_0_0_#000] transition-all duration-150 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none dark:bg-yellow-600 dark:text-white dark:border-white dark:shadow-[6px_6px_0_0_#fff]">
        <img src="https://www.svgrepo.com/show/506497/google.svg" alt="Google" class="w-6 h-6 mr-3 filter dark:invert">
        Sign in with Google
      </button>

      <button class="w-full flex items-center justify-center px-8 py-4 border-4 border-black text-xl font-bold uppercase bg-green-400 text-black shadow-[6px_6px_0_0_#000] transition-all duration-150 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none dark:bg-green-600 dark:text-white dark:border-white dark:shadow-[6px_6px_0_0_#fff]">
        <img src="https://www.svgrepo.com/show/506499/github.svg" alt="GitHub" class="w-6 h-6 mr-3 filter dark:invert">
        Sign in with GitHub
      </button>

      <button class="w-full flex items-center justify-center px-8 py-4 border-4 border-black text-xl font-bold uppercase bg-purple-400 text-black shadow-[6px_6px_0_0_#000] transition-all duration-150 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none dark:bg-purple-600 dark:text-white dark:border-white dark:shadow-[6px_6px_0_0_#fff]">
        <img src="https://www.svgrepo.com/show/506518/linkedin.svg" alt="LinkedIn" class="w-6 h-6 mr-3 filter dark:invert">
        Sign in with LinkedIn
      </button>

      <button class="w-full flex items-center justify-center px-8 py-4 border-4 border-black text-xl font-bold uppercase bg-pink-400 text-black shadow-[6px_6px_0_0_#000] transition-all duration-150 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none dark:bg-pink-600 dark:text-white dark:border-white dark:shadow-[6px_6px_0_0_#fff]">
        <img src="https://www.svgrepo.com/show/506506/twitter.svg" alt="X" class="w-6 h-6 mr-3 filter dark:invert">
        Sign in with X
      </button>
    </div>

    <div class="mt-10 text-center">
      <p class="text-lg text-black dark:text-white font-mono">Or, connect manually:</p>
      <input type="email" placeholder="Your Email" class="mt-4 w-full md:w-3/4 p-4 border-4 border-black bg-neutral-200 text-black placeholder-neutral-700 focus:outline-none focus:ring-4 focus:ring-red-500 dark:bg-neutral-700 dark:text-white dark:placeholder-neutral-400 dark:border-white dark:focus:ring-orange-400">
      <input type="password" placeholder="Your Password" class="mt-4 w-full md:w-3/4 p-4 border-4 border-black bg-neutral-200 text-black placeholder-neutral-700 focus:outline-none focus:ring-4 focus:ring-red-500 dark:bg-neutral-700 dark:text-white dark:placeholder-neutral-400 dark:border-white dark:focus:ring-orange-400">
      <button class="mt-6 w-full md:w-3/4 px-8 py-4 border-4 border-black text-xl font-bold uppercase bg-red-500 text-white shadow-[6px_6px_0_0_#000] transition-all duration-150 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none dark:bg-orange-600 dark:text-white dark:border-white dark:shadow-[6px_6px_0_0_#fff]">
        Log In
      </button>
    </div>

    <div class="mt-10 text-center">
      <p class="text-sm text-black dark:text-white font-mono">
        By connecting, you agree to our <a href="#" class="underline text-blue-700 dark:text-orange-400 hover:text-blue-900 dark:hover:text-orange-600">Terrible Terms</a> and <a href="#" class="underline text-blue-700 dark:text-orange-400 hover:text-blue-900 dark:hover:text-orange-600">Questionable Privacy Policy</a>.
      </p>
    </div>
  </div>
</div>

ショッピングカートコンポーネント

パステルカラーの配色、レスポンシブモード、ダークモードをサポートするSkeuomorphicショッピングカートコンポーネント。

開けるプレビュー

                <div class="p-4 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans">

  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-700 rounded-2xl shadow-xl p-8 transform transition duration-300 hover:scale-105">
    <h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center drop-shadow-md">🛒 Your Skeuomorphic Cart </h1>

    <!-- Cart Item 1 -->
    <div class="flex items-center bg-gradient-to-br from-rose-50 to-rose-100 dark:from-gray-600 dark:to-gray-700 rounded-xl p-6 mb-6 shadow-lg transform transition duration-300 hover:shadow-2xl hover:-translate-y-1">
      <img src="https://picsum.photos/seed/item1/150/150" alt="Product Image" class="w-32 h-32 object-cover rounded-lg shadow-md border-4 border-rose-200 dark:border-gray-500 mr-6">
      <div class="flex-grow">
        <h2 class="text-2xl font-bold text-rose-800 dark:text-rose-200 mb-2">Vintage Leather Briefcase</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">A classic briefcase for the modern professional.</p>
        <div class="flex items-center justify-between">
          <span class="text-3xl font-extrabold text-rose-900 dark:text-rose-100">$129.00</span>
          <div class="flex items-center">
            <button class="bg-rose-300 dark:bg-rose-600 text-white p-3 rounded-full shadow-lg hover:bg-rose-400 dark:hover:bg-rose-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-rose-200 dark:focus:ring-rose-500 active:bg-rose-500 w-10 h-10 flex items-center justify-center text-xl font-bold">-</button>
            <span class="text-2xl font-bold text-gray-800 dark:text-gray-100 mx-4">1</span>
            <button class="bg-rose-300 dark:bg-rose-600 text-white p-3 rounded-full shadow-lg hover:bg-rose-400 dark:hover:bg-rose-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-rose-200 dark:focus:ring-rose-500 active:bg-rose-500 w-10 h-10 flex items-center justify-center text-xl font-bold">+</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Cart Item 2 -->
    <div class="flex items-center bg-gradient-to-br from-teal-50 to-teal-100 dark:from-gray-600 dark:to-gray-700 rounded-xl p-6 mb-6 shadow-lg transform transition duration-300 hover:shadow-2xl hover:-translate-y-1">
      <img src="https://picsum.photos/seed/item2/150/150" alt="Product Image" class="w-32 h-32 object-cover rounded-lg shadow-md border-4 border-teal-200 dark:border-gray-500 mr-6">
      <div class="flex-grow">
        <h2 class="text-2xl font-bold text-teal-800 dark:text-teal-200 mb-2">Handcrafted Ceramic Mug</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Perfect for your morning coffee or tea.</p>
        <div class="flex items-center justify-between">
          <span class="text-3xl font-extrabold text-teal-900 dark:text-teal-100">$25.00</span>
          <div class="flex items-center">
            <button class="bg-teal-300 dark:bg-teal-600 text-white p-3 rounded-full shadow-lg hover:bg-teal-400 dark:hover:bg-teal-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-teal-200 dark:focus:ring-teal-500 active:bg-teal-500 w-10 h-10 flex items-center justify-center text-xl font-bold">-</button>
            <span class="text-2xl font-bold text-gray-800 dark:text-gray-100 mx-4">2</span>
            <button class="bg-teal-300 dark:bg-teal-600 text-white p-3 rounded-full shadow-lg hover:bg-teal-400 dark:hover:bg-teal-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-teal-200 dark:focus:ring-teal-500 active:bg-teal-500 w-10 h-10 flex items-center justify-center text-xl font-bold">+</button>
          </div>

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

    <!-- Cart Summary -->
    <div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-600 dark:to-gray-700 rounded-xl p-8 mt-8 shadow-lg border-t-4 border-blue-200 dark:border-gray-500">
      <div class="flex justify-between items-center mb-4">
        <span class="text-2xl font-semibold text-gray-700 dark:text-gray-200">Subtotal:</span>
        <span class="text-2xl font-extrabold text-blue-800 dark:text-blue-200">$179.00</span>
      </div>
      <div class="flex justify-between items-center mb-6">
        <span class="text-2xl font-semibold text-gray-700 dark:text-gray-200">Shipping:</span>
        <span class="text-2xl font-extrabold text-blue-800 dark:text-blue-200">$10.00</span>
      </div>
      <div class="flex justify-between items-center border-t-2 border-blue-200 dark:border-gray-500 pt-6">
        <span class="text-3xl font-bold text-gray-800 dark:text-gray-100">Total:</span>
        <span class="text-3xl font-extrabold text-blue-900 dark:text-blue-100">$189.00</span>
      </div>
      <button class="w-full bg-blue-500 dark:bg-blue-700 text-white text-3xl font-bold py-4 rounded-xl mt-8 shadow-xl hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 active:bg-blue-700">
        Proceed to Checkout
      </button>
    </div>
  </div>
</div>

Neumorphic Tabsコンポーネント

ブログコンテンツ用のグレースケールのニューモーフィックタブコンポーネントで、レスポンシブデザインとダークモードがサポートされています。

開けるプレビュー

                <div class="flex flex-col bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-2xl mx-auto my-10"> 
  
  <!-- Tab Buttons --> 
  <div class="flex space-x-4 mb-6"> 
  
    <button class="flex-1 py-3 px-6 rounded-lg text-gray-800 dark:text-gray-200 
                   bg-gray-300 dark:bg-gray-700 
                   shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark 
                   hover:shadow-neumorphic-button-light-hover dark:hover:shadow-neumorphic-button-dark-hover 
                   focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 
                   active:shadow-neumorphic-button-light-active dark:active:shadow-neumorphic-button-dark-active">
      Recent Articles
    </button>

    <button class="flex-1 py-3 px-6 rounded-lg text-gray-600 dark:text-gray-400 
                   bg-gray-200 dark:bg-gray-800 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-button-light-hover dark:hover:shadow-neumorphic-button-dark-hover 
                   focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">
      Popular Posts
    </button>

    <button class="flex-1 py-3 px-6 rounded-lg text-gray-600 dark:text-gray-400 
                   bg-gray-200 dark:bg-gray-800 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-button-light-hover dark:hover:shadow-neumorphic-button-dark-hover 
                   focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">
      Categories
    </button>
    
  </div> 
  
  <!-- Tab Content (Recent Articles) --> 
  <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg 
              shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark 
              text-gray-700 dark:text-gray-300"> 
    <h3 class="text-xl font-semibold mb-4">The Art of Neumorphism in Web Design</h3> 
    <p class="mb-4">Explore the subtle and tactile design trend that is Neumorphism. Learn how to create soft, extruded, and impressed elements that bring a unique depth to your user interfaces.</p> 
    
    <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full mr-3 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <span>John Doe • October 26, 2023</span>
    </div>
    
  </div> 
  
  <!-- You would typically have other tab content divs here, hidden by default and shown with JavaScript --> 
  <!-- For this example, only one tab content is shown as per the no JavaScript constraint --> 
  
</div>

<!-- Custom Styles for Neumorphism (add to your CSS or a style block) -->
<style>
  /* Light Neumorphic Shadows */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }

  .shadow-neumorphic-inset-light {
    box-shadow: inset 6px 6px 12px #b0b0b0, inset -6px -6px 12px #ffffff;
  }

  .shadow-neumorphic-button-light {
    box-shadow: 4px 4px 8px #b0b0b0, -4px -4px 8px #ffffff;
  }

  /* Light Neumorphic Button Hover States */
  .shadow-neumorphic-button-light-hover {
    box-shadow: 2px 2px 4px #b0b0b0, -2px -2px 4px #ffffff;
  }

  /* Light Neumorphic Button Active States (pressed in) */
  .shadow-neumorphic-button-light-active {
    box-shadow: inset 2px 2px 4px #b0b0b0, inset -2px -2px 4px #ffffff;
  }

  /* Dark Neumorphic Shadows */
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #2a2a2a, -6px -6px 12px #3a3a3a;
  }

  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 6px 6px 12px #2a2a2a, inset -6px -6px 12px #3a3a3a;
  }

  .dark .shadow-neumorphic-button-dark {
    box-shadow: 4px 4px 8px #2a2a2a, -4px -4px 8px #3a3a3a;
  }

  /* Dark Neumorphic Button Hover States */
  .dark .shadow-neumorphic-button-dark-hover {
    box-shadow: 2px 2px 4px #2a2a2a, -2px -2px 4px #3a3a3a;
  }

  /* Dark Neumorphic Button Active States (pressed in) */
  .dark .shadow-neumorphic-button-dark-active {
    box-shadow: inset 2px 2px 4px #2a2a2a, inset -2px -2px 4px #3a3a3a;
  }
</style>

スキューモーフィックコンテナコンポーネント

ポートフォリオ用に設計されたグレースケールカラースキームのスキューモーフィックコンテナコンポーネントで、レスポンシブデザインとダークテーマのサポートが特徴です。

開けるプレビュー

                <div class="relative dark:bg-gray-900 bg-gray-200 p-8 rounded-xl shadow-2xl dark:shadow-gray-700 m-4 sm:m-8 lg:m-12">
  <!-- Top-left highlight -->
  <div class="absolute top-0 left-0 w-20 h-20 bg-gradient-to-br from-gray-100 to-transparent rounded-tl-xl opacity-30 dark:from-gray-700"></div>
  <!-- Bottom-right shadow -->
  <div class="absolute bottom-0 right-0 w-20 h-20 bg-gradient-to-tl from-gray-300 to-transparent rounded-br-xl opacity-30 dark:from-gray-800"></div>

  <div class="relative z-10">
    <h2 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-6 text-center">
      My Portfolio
    </h2>
    <p class="text-gray-600 dark:text-gray-300 text-lg leading-relaxed mb-8 text-center">
      Welcome to my digital space. Explore my work and get to know my professional journey.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Project Card 1 -->
      <div class="bg-gray-300 dark:bg-gray-800 rounded-lg p-6 shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-gray-400 dark:border-gray-700">
        <img src="https://picsum.photos/seed/project1/400/300" alt="Project 1" class="rounded-md mb-4 w-full h-48 object-cover shadow-inner dark:shadow-gray-900">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Project Alpha</h3>
        <p class="text-gray-700 dark:text-gray-300 text-base">A detailed look into an innovative web solution built for scalability and performance.</p>
      </div>

      <!-- Project Card 2 -->
      <div class="bg-gray-300 dark:bg-gray-800 rounded-lg p-6 shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-gray-400 dark:border-gray-700">
        <img src="https://picsum.photos/seed/project2/400/300" alt="Project 2" class="rounded-md mb-4 w-full h-48 object-cover shadow-inner dark:shadow-gray-900">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Design Showcase</h3>
        <p class="text-gray-700 dark:text-gray-300 text-base">Exploring user-centric design principles through a series of interactive prototypes.</p>
      </div>

      <!-- Project Card 3 -->
      <div class="bg-gray-300 dark:bg-gray-800 rounded-lg p-6 shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-gray-400 dark:border-gray-700">
        <img src="https://picsum.photos/seed/project3/400/300" alt="Project 3" class="rounded-md mb-4 w-full h-48 object-cover shadow-inner dark:shadow-gray-900">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Mobile App Development</h3>
        <p class="text-gray-700 dark:text-gray-300 text-base">From concept to deployment: a robust mobile application for everyday productivity.</p>
      </div>
    </div>

    <div class="mt-12 text-center">
      <a href="#" class="inline-block bg-gray-400 dark:bg-gray-700 text-gray-800 dark:text-gray-100 font-bold py-3 px-8 rounded-full shadow-md hover:bg-gray-500 dark:hover:bg-gray-600 transition-colors duration-300 transform hover:scale-105">
        View All Projects
      </a>
    </div>

    <div class="mt-12 pt-8 border-t border-gray-400 dark:border-gray-700 text-center">
      <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">About Me</h3>
      <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-8">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-gray-400 dark:border-gray-600 shadow-lg">
        <p class="text-gray-700 dark:text-gray-300 max-w-lg text-base">
          I am a passionate developer with expertise in creating dynamic and responsive web applications. I thrive on bringing innovative ideas to life through clean and efficient code.
        </p>
      </div>
    </div>
  </div>
</div>

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

類似の配色を持つソーシャルメディア用のシンプルなダークモードデータ視覚化コンポーネント。

開けるプレビュー

                <div class="bg-gray-900 min-h-screen p-4 text-gray-200">
  <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg p-6">
    <h2 class="text-xl font-bold mb-4 text-blue-300">Social Media Engagement</h2>
    <div class="space-y-4">
      <div class="flex items-center justify-between">
        <span class="text-gray-400">Likes:</span>
        <span class="text-blue-400 font-semibold">12,345</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-gray-400">Comments:</span>
        <span class="text-green-400 font-semibold">890</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-gray-400">Shares:</span>
        <span class="text-teal-400 font-semibold">321</span>
      </div>
      <div class="w-full bg-gray-700 rounded-full h-2.5 mt-4">
        <div class="bg-gradient-to-r from-blue-400 via-green-400 to-teal-400 h-2.5 rounded-full" style="width: 75%;"></div>
      </div>
      <p class="text-sm text-gray-500 text-center mt-2">Overall Engagement: 75%</p>
    </div>
  </div>
</div>

製品カードコンポーネント

Skeuomorphismデザインスタイル、アースカラーの配色、複雑なインタラクションを備えたレスポンシブ製品カードコンポーネントで、ポートフォリオに適しています。ダークテーマのサポートが含まれており、スタイリングにTailwind CSSを使用します。画像はpicsum.photosから、アバターは randomuser.me から提供されています。

開けるプレビュー

                <div class="bg-stone-100  dark:bg-stone-900 min-h-screen p-8 flex flex-wrap items-center justify-center font-sans">

  <!-- Product Card 1 -->
  <div class="w-full md:w-1/2 lg:w-1/3 p-4">
    <div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 rounded-3xl shadow-2xl p-8 transform transition-transform duration-500 hover:scale-105 hover:shadow-stone-500/50 dark:hover:shadow-stone-900/50 border-t border-l border-stone-200 dark:border-stone-700 relative overflow-hidden">
      <div class="absolute inset-0 bg-pattern-texture opacity-10 pointer-events-none"></div>
      <div class="relative z-10">
        <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="rounded-2xl mb-6 shadow-xl border border-stone-500">
        <h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-3 text-center tracking-wide">Earthen Vessel</h2>
        <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 text-center">Hand-crafted ceramic vessel, ideal for home decor or as a unique gift. Each piece is organically formed and fired to perfection.</p>
        
        <div class="flex items-center justify-center mb-6">
          <div class="flex items-center space-x-2 text-yellow-600 dark:text-yellow-400">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span class="text-stone-800 dark:text-stone-200 text-lg font-semibold">4.9</span>
            <span class="text-stone-600 dark:text-stone-400 text-md">(128 Reviews)</span>
          </div>
        </div>

        <div class="flex justify-around items-center mb-6">
          <div class="text-stone-800 dark:text-stone-100">
            <span class="block text-sm opacity-80">Dimensions:</span>
            <span class="text-lg font-bold">15x10 cm</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Weight:</span>
            <span class="text-lg font-bold">0.8 kg</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Material:</span>
            <span class="text-lg font-bold">Clay</span>
          </div>
        </div>

        <div class="flex items-center justify-between mb-8 pb-4 border-b border-stone-400/50 dark:border-stone-600/50">
          <div class="flex items-center -space-x-3">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/47.jpg" alt="Customer Avatar">
            <span class="text-stone-700 dark:text-stone-300 text-sm pl-2">+25 Happy customers</span>
          </div>
          <span class="text-4xl font-extrabold text-stone-900 dark:text-stone-50">$79.00</span>
        </div>
        
        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-lg shadow-green-700/40 dark:shadow-green-600/40 transform active:scale-95 transition-all duration-200 border-b-2 border-green-900 dark:border-green-800">
            Add to Cart
          </button>
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-stone-800 dark:text-stone-200 bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500 shadow-lg shadow-stone-400/40 dark:shadow-stone-800/40 transform active:scale-95 transition-all duration-200 border-b-2 border-stone-400 dark:border-stone-700">
            View Details
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Product Card 2 -->
  <div class="w-full md:w-1/2 lg:w-1/3 p-4">
    <div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 rounded-3xl shadow-2xl p-8 transform transition-transform duration-500 hover:scale-105 hover:shadow-stone-500/50 dark:hover:shadow-stone-900/50 border-t border-l border-stone-200 dark:border-stone-700 relative overflow-hidden">
      <div class="absolute inset-0 bg-pattern-texture opacity-10 pointer-events-none"></div>
      <div class="relative z-10">
        <img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="rounded-2xl mb-6 shadow-xl border border-stone-500">
        <h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-3 text-center tracking-wide">Rustic Planter</h2>
        <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 text-center">A robust planter crafted from recycled oak barrels, perfect for adding a touch of nature indoors or out.</p>
        
        <div class="flex items-center justify-center mb-6">
          <div class="flex items-center space-x-2 text-yellow-600 dark:text-yellow-400">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span class="text-stone-800 dark:text-stone-200 text-lg font-semibold">4.7</span>
            <span class="text-stone-600 dark:text-stone-400 text-md">(95 Reviews)</span>
          </div>
        </div>

        <div class="flex justify-around items-center mb-6">
          <div class="text-stone-800 dark:text-stone-100">
            <span class="block text-sm opacity-80">Dimensions:</span>
            <span class="text-lg font-bold">50x40 cm</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Weight:</span>
            <span class="text-lg font-bold">5.2 kg</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Material:</span>
            <span class="text-lg font-bold">Oak Wood</span>
          </div>
        </div>

        <div class="flex items-center justify-between mb-8 pb-4 border-b border-stone-400/50 dark:border-stone-600/50">
          <div class="flex items-center -space-x-3">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/55.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/62.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer Avatar">
            <span class="text-stone-700 dark:text-stone-300 text-sm pl-2">+18 Happy customers</span>
          </div>
          <span class="text-4xl font-extrabold text-stone-900 dark:text-stone-50">$120.00</span>
        </div>
        
        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-lg shadow-green-700/40 dark:shadow-green-600/40 transform active:scale-95 transition-all duration-200 border-b-2 border-green-900 dark:border-green-800">
            Add to Cart
          </button>
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-stone-800 dark:text-stone-200 bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500 shadow-lg shadow-stone-400/40 dark:shadow-stone-800/40 transform active:scale-95 transition-all duration-200 border-b-2 border-stone-400 dark:border-stone-700 ">
            View Details
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Product Card 3 -->
  <div class="w-full md:w-1/2 lg:w-1/3 p-4">
    <div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 rounded-3xl shadow-2xl p-8 transform transition-transform duration-500 hover:scale-105 hover:shadow-stone-500/50 dark:hover:shadow-stone-900/50 border-t border-l border-stone-200 dark:border-stone-700 relative overflow-hidden">
      <div class="absolute inset-0 bg-pattern-texture opacity-10 pointer-events-none"></div>
      <div class="relative z-10">
        <img src="https://picsum.photos/400/300?random=3" alt="Product Image" class="rounded-2xl mb-6 shadow-xl border border-stone-500">
        <h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-3 text-center tracking-wide">Terra Cotta Mug</h2>
        <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 text-center">A charming terra cotta mug, perfect for your morning coffee or evening tea. Hand-painted with natural dyes.</p>
        
        <div class="flex items-center justify-center mb-6">
          <div class="flex items-center space-x-2 text-yellow-600 dark:text-yellow-400">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span class="text-stone-800 dark:text-stone-200 text-lg font-semibold">4.6</span>
            <span class="text-stone-600 dark:text-stone-400 text-md">(72 Reviews)</span>
          </div>
        </div>

        <div class="flex justify-around items-center mb-6">
          <div class="text-stone-800 dark:text-stone-100">
            <span class="block text-sm opacity-80">Dimensions:</span>
            <span class="text-lg font-bold">10x8 cm</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Weight:</span>
            <span class="text-lg font-bold">0.3 kg</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Material:</span>
            <span class="text-lg font-bold">Terra Cotta</span>
          </div>
        </div>

        <div class="flex items-center justify-between mb-8 pb-4 border-b border-stone-400/50 dark:border-stone-600/50">
          <div class="flex items-center -space-x-3">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/81.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/84.jpg" alt="Customer Avatar">
            <span class="text-stone-700 dark:text-stone-300 text-sm pl-2">+10 Happy customers</span>
          </div>
          <span class="text-4xl font-extrabold text-stone-900 dark:text-stone-50">$25.00</span>
        </div>
        
        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-lg shadow-green-700/40 dark:shadow-green-600/40 transform active:scale-95 transition-all duration-200 border-b-2 border-green-900 dark:border-green-800">
            Add to Cart
          </button>
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-stone-800 dark:text-stone-200 bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500 shadow-lg shadow-stone-400/40 dark:shadow-stone-800/40 transform active:scale-95 transition-all duration-200 border-b-2 border-stone-400 dark:border-stone-700">
            View Details
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- You might need to add this to your tailwind.config.js for the texture pattern -->
   <style>
    .bg-pattern-texture {
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.1'%3E%3Cpath fill-rule='evenodd' d='M0 0h10v10H0V0zm10 0h10v10H10V0zM0 10h10v10H0V10zm10 10h10v-10H10v10z'/%3E%3C/g%3E%3C/svg%3E");
    }

    .dark .bg-pattern-texture {
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath fill-rule='evenodd' d='M0 0h10v10H0V0zm10 0h10v10H10V0zM0 10h10v10H0V10zm10 10h10v-10H10v10z'/%3E%3C/g%3E%3C/svg%3E");
    }
  </style>

</div>

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

ブログやコンテンツサイトに適したミニマリスト/フラットデザインのレスポンシブで複雑なログインフォーム。単色の配色、ダークテーマのサポート、およびHTMLとTailwind CSSだけで実装された複数のインタラクティブ要素が特徴です。

開けるプレビュー

                <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-xl w-full max-w-md">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Login to Your Account</h2>

    <div class="flex justify-center mb-6">
      <img src="https://picsum.photos/100" alt="Blog Logo" class="rounded-full w-24 h-24 object-cover border-4 border-gray-200 dark:border-gray-700">
    </div>

    <form>
      <div class="mb-5">
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-3 rounded-md bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 text-gray-900 dark:text-white transition duration-200" placeholder="[email protected]">
      </div>
      <div class="mb-5">
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
        <input type="password" id="password" class="w-full px-4 py-3 rounded-md bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 text-gray-900 dark:text-white transition duration-200" placeholder="••••••••">
      </div>

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

      <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-200">
        Login
      </button>
    </form>

    <div class="mt-8 text-center text-gray-600 dark:text-gray-400">
      <p>Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 font-medium transition duration-200">Sign Up</a></p>
    </div>

    <div class="mt-6 flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4">
      <button class="w-full sm:w-auto bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white font-bold py-2 px-4 rounded-md flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-200">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12.0003 4.75C9.0935 4.75 6.647 6.0211 5.09348 7.98926L2.36865 5.26442C4.24689 3.03348 7.02705 1.75 12.0003 1.75C16.8967 1.75 20.9157 3.4283 23.6393 5.92015L20.6125 8.947C18.667 7.0425 15.6033 5.92015 12.0003 5.92015C9.80036 5.92015 7.84687 6.69344 6.37508 8.01639L5 6.77258V6.7725C5 6.81846 5 6.86445 5 6.91042Z" clip-rule="evenodd" fill-rule="evenodd"/>
          <path d="M4.75 9.99997C4.75 10.974 4.887 11.9167 5.13847 12.8021L7.75549 11.3995C7.66982 11.0858 7.58784 10.741 7.58784 9.99997C7.58784 8.24357 8.35821 6.67104 9.68965 5.56832L6.96482 2.84348C5.2323 4.41595 4.75 7.0396 4.75 9.99997Z" clip-rule="evenodd" fill-rule="evenodd"/>
          <path d="M22.25 10C22.25 11.9604 21.6881 14.1568 20.3607 16.3607L18.0625 14.0625C19.2605 12.6377 19.8291 11.2335 19.8291 10C19.8291 8.35848 19.2605 6.7552 18.0625 5.33045L20.3607 3.03225C21.6881 5.23616 22.25 7.43261 22.25 10Z" clip-rule="evenodd" fill-rule="evenodd"/>
          <path d="M12.0003 19.25C14.7397 19.25 17.0664 18.2329 18.667 16.2925L20.6125 18.238C18.667 20.1425 15.6033 21.25 12.0003 21.25C7.02705 21.25 4.24689 19.9665 2.36865 17.7355L5.09348 15.0107C6.647 16.9788 9.0935 18.25 12.0003 18.25C14.1997 18.25 16.1532 17.4767 17.625 16.1538L16.2163 17.4116L18.9163 17.2916L17.625 18.25L12.0003 19.25Z" clip-rule="evenodd" fill-rule="evenodd"/>
        </svg>
        Login with Google
      </button>
      <button class="w-full sm:w-auto bg-blue-800 hover:bg-blue-900 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold py-2 px-4 rounded-md flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-blue-800 dark:focus:ring-blue-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-200">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M14 13.5h2.7L17 10h-3V7.9c0-.8.2-1.3 1.3-1.3H17V4.3c-.4 0-1.7-.1-2.9-.1-3.1 0-5.2 1.9-5.2 5.3v2.7H7v3h2.1V22h4.9v-8.5z"/>
        </svg>
        Login with Facebook
      </button>
    </div>
  </div>
</div>

コンテナコンポーネント(ダッシュボード、'ダッシュボード')

ダークテーマをサポートするレスポンシブコンテナコンポーネントで、マイクロインタラクションと類似の配色を備えたダッシュボード用に設計されています。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="max-w-7xl mx-auto">
    <!-- Header/Navigation Placeholder -->
    <header class="flex justify-between items-center py-4 px-6 bg-white dark:bg-gray-800 rounded-lg shadow mb-6">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Dashboard Overview</h1>
      <nav>
        <ul class="flex space-x-4">
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Home</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Analytics</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Settings</a></li>
        </ul>
      </nav>
    </header>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Card 1: Sales Overview -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-transform duration-200 hover:scale-105 active:scale-95">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Sales Overview</h2>
          <span class="text-green-500 dark:text-green-400 text-sm font-medium">+12%</span>
        </div>
        <p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-2">$12,345</p>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Total sales this month</p>
        <div class="mt-4 h-24 bg-gradient-to-r from-blue-300 to-blue-500 dark:from-blue-600 dark:to-blue-800 rounded"></div>
      </div>

      <!-- Card 2: User Activity -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-transform duration-200 hover:scale-105 active:scale-95">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">User Activity</h2>
          <span class="text-yellow-500 dark:text-yellow-400 text-sm font-medium">85% Engaged</span>
        </div>
        <div class="flex items-center space-x-3 mb-2">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
          <p class="text-2xl font-bold text-gray-900 dark:text-gray-50">1,234</p>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Active users today</p>
        <div class="mt-4 grid grid-cols-5 gap-2">
          <div class="h-8 bg-purple-300 dark:bg-purple-600 rounded"></div>
          <div class="h-8 bg-purple-400 dark:bg-purple-700 rounded"></div>
          <div class="h-8 bg-purple-500 dark:bg-purple-800 rounded"></div>
          <div class="h-8 bg-purple-400 dark:bg-purple-700 rounded"></div>
          <div class="h-8 bg-purple-300 dark:bg-purple-600 rounded"></div>
        </div>
      </div>

      <!-- Card 3: Traffic Sources -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-transform duration-200 hover:scale-105 active:scale-95">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Traffic Sources</h2>
          <span class="text-red-500 dark:text-red-400 text-sm font-medium">Geo-targeted</span>
        </div>
        <ul class="space-y-2 mb-4">
          <li class="flex justify-between text-gray-700 dark:text-gray-300">
            <span>Direct</span>
            <span class="font-semibold">30%</span>
          </li>
          <li class="flex justify-between text-gray-700 dark:text-gray-300">
            <span>Referral</span>
            <span class="font-semibold">25%</span>
          </li>
          <li class="flex justify-between text-gray-700 dark:text-gray-300">
            <span>Organic Search</span>
            <span class="font-semibold">45%</span>
          </li>
        </ul>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
          <div class="bg-indigo-500 h-2 rounded-full" style="width: 45%;"></div>
        </div>
      </div>

      <!-- Card 4: Recent Orders (Full Width on Small Screens) -->
      <div class="md:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-transform duration-200 hover:scale-105 active:scale-95">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Recent Orders</h2>
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
            <thead class="bg-gray-50 dark:bg-gray-700">
              <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Order ID</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Customer</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Amount</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
              </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
              <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#ORD001</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Alice Smith</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">$199.99</td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
                    Completed
                  </span>
                </td>
              </tr>
              <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#ORD002</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Bob Johnson</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">$89.50</td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100">
                    Pending
                  </span>
                </td>
              </tr>
              <!-- More rows... -->
            </tbody>
          </table>
        </div>
      </div>

      <!-- Card 5: Quick Stats (Image Placeholder) -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col items-center justify-center text-center transform transition-transform duration-200 hover:scale-105 active:scale-95">
        <img class="w-32 h-32 object-cover rounded-full mb-4 ring-2 ring-blue-400 dark:ring-blue-600" src="https://picsum.photos/256/256?random=1" alt="Placeholder Image">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Project Progress</h2>
        <p class="text-4xl font-bold text-blue-600 dark:text-blue-400">75%</p>
        <p class="text-gray-600 dark:text-gray-400 text-sm mt-1">Completed tasks</p>
      </div>

    </div>

    <!-- Footer Placeholder -->
    <footer class="mt-6 py-4 text-center text-gray-600 dark:text-gray-400 text-sm">
      &copy; 2023 Dashboard Inc. All rights reserved.
    </footer>
  </div>
</div>

1 ... 110 111 112 113 114 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント