検索コンポーネント

すべてのコンポーネント

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

ドロップダウンメニューコンポーネント

ポートフォリオに適したマテリアルデザインにインスパイアされたドロップダウンメニューコンポーネントで、類似の色、応答性、Tailwind CSSを使用したダークモードのサポートが特徴です。

                <div class="relative w-full md:w-64">
  <button class="flex items-center justify-between w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100" id="options-menu" aria-haspopup="true" aria-expanded="true">
    <span>Options</span>
    <svg class="w-5 h-5 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
    </svg>
  </button>

  <div class="absolute right-0 w-full mt-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 dark:bg-gray-800 hidden" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">Account settings</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">Support</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">License</a>
      <form method="POST" action="#">
        <button type="submit" class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">Sign out</button>
      </form>
    </div>
  </div>
</div>

エラーメッセージコンポーネント

マイクロインタラクション、グレースケールの配色、複雑なインターフェイス、レスポンシブデザイン、ダークテーマのサポートを備えたソーシャルメディア用のエラーメッセージコンポーネント。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md p-6 bg-white rounded-lg shadow-xl dark:bg-gray-800 transform transition-all duration-300 hover:scale-105">
    <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-gray-400 to-gray-600 rounded-t-lg animate-pulse"></div>
    
    <div class="flex items-center justify-between mb-4 border-b pb-4 border-gray-200 dark:border-gray-700">
      <div class="flex items-center space-x-3">
        <svg class="w-8 h-8 text-gray-600 dark:text-gray-400" 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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">System Error</h3>
      </div>
      <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none transform transition-transform duration-200 hover:rotate-90">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
      </button>
    </div>

    <div class="mb-6">
      <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">An unexpected error occurred. Please try again later or contact support if the issue persists.</p>
      
      <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-md text-sm text-gray-500 dark:text-gray-300 font-mono overflow-auto max-h-24">
        Error Code: 500 <br>
        Timestamp: 2023-10-27 10:30:45 <br>
        Request ID: abcd-1234-efgh-5678
      </div>
    </div>

    <div class="flex justify-end space-x-3">
      <button class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500 transform scale-100 hover:scale-105 transition-transform duration-200">
        Dismiss
      </button>
      <button class="px-4 py-2 text-sm font-medium text-white bg-gray-700 rounded-md hover:bg-gray-800 dark:bg-gray-500 dark:hover:bg-gray-400 transform scale-100 hover:scale-105 transition-transform duration-200">
        Report Issue
      </button>
    </div>

    <div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-gray-600 to-gray-400 rounded-b-lg animate-pulse-slow"></div>

  </div>
</div>

<style>
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
  }
  .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
  .animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
</style>

Glassmorphism コンテンツリンクにスキップ

Glassmorphism は、ダッシュボードのアーストーンを備えたコンテンツリンクコンポーネントにスキップします。

開けるプレビュー

                <a href="#main-content" class="skip-to-content-link sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:p-3 focus:rounded-lg focus:bg-white focus:bg-opacity-30 focus:backdrop-filter focus:backdrop-blur-lg focus:shadow-lg focus:text-stone-800 dark:focus:bg-stone-800 dark:focus:bg-opacity-30 dark:focus:text-stone-200">Skip to main content</a>

Glassmorphism アラートメッセージ

Tailwind CSS で構築された、ダークモードのサポートと類似の配色を備えた e コマースサイト用のレスポンシブ Glassmorphism アラートメッセージコンポーネント。

開けるプレビュー

                <div class="relative min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900">
  <!-- Analogous Colors: Using shades of blue-green and green for a soothing feel -->
  <div class="relative w-full max-w-md bg-white dark:bg-gray-800 backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 rounded-lg shadow-xl overflow-hidden border border-opacity-30 border-white dark:border-opacity-30 dark:border-gray-700">
    <div class="absolute inset-0 bg-gradient-to-br from-green-300 to-blue-400 opacity-20 dark:from-green-700 dark:to-blue-700 dark:opacity-30 rounded-lg pointer-events-none"></div>
    
    <div class="relative p-6 md:p-8 flex items-start space-x-4">
      <!-- Icon -->
      <div class="flex-shrink-0">
        <svg class="h-8 w-8 text-green-700 dark:text-green-300" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
      </div>
      
      <!-- Content -->
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Order Confirmed!</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">
          Your order #12345 has been successfully placed and will be shipped within 24 hours. You will receive an email confirmation shortly.
        </p>
        <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
          <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-150 ease-in-out dark:bg-green-500 dark:hover:bg-green-600 dark:focus:ring-green-400">
            View Order
          </a>
          <a href="#" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
            Continue Shopping
          </a>
        </div>
      </div>

      <!-- Close Button (optional, but common for alerts) -->
      <button type="button" class="absolute top-4 right-4 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400">
        <span class="sr-only">Dismiss</span>
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>
  </div>
</div>

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

3Dで設計されたログインフォームコンポーネントは、eコマースに適しており、ダークテーマのサポートと応答性を備え、Tailwind CSSで構築されています。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition-all duration-300 hover:scale-105">
    <div class="absolute inset-0 bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 opacity-20 dark:opacity-40 rounded-lg transform -rotate-3 translate-x-2 translate-y-2 blur-sm"></div>
    <div class="relative z-10">
      <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Welcome Back!</h2>
      <p class="text-center text-gray-600 dark:text-gray-300 mb-8">Sign in to your e-commerce account</p>

      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Email Address</label>
          <input type="email" id="email" name="email" placeholder="[email protected]" class="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-transparent transition duration-200 ease-in-out text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 shadow-sm transform translate-z-0.5">
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Password</label>
          <input type="password" id="password" name="password" placeholder="••••••••" class="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-pink-500 dark:focus:ring-pink-400 focus:border-transparent transition duration-200 ease-in-out text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 shadow-sm transform translate-z-0.5">
        </div>

        <div class="flex items-center justify-between">
          <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-500 focus:ring-purple-500 dark:focus:ring-purple-400 border-gray-300 rounded transform translate-z-0.5">
            <label for="remember_me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200">Remember me</label>
          </div>
          <a href="#" class="text-sm font-medium text-pink-600 dark:text-pink-400 hover:text-pink-500 dark:hover:text-pink-300 transition duration-200 ease-in-out">Forgot your password?</a>
        </div>

        <button type="submit" class="w-full py-3 px-4 rounded-lg bg-red-600 dark:bg-red-500 text-white font-semibold text-lg shadow-lg hover:bg-red-700 dark:hover:bg-red-600 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 transform translate-z-0.5 transition duration-300 ease-in-out hover:-translate-y-0.5">
          Sign In
        </button>
      </form>

      <div class="mt-8 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400">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 duration-200 ease-in-out">Sign Up</a>
        </p>
      </div>
    </div>
  </div>
</div>

Glassmorphism Like/Reaction Buttons コンポーネント

ポートフォリオのGlassmorphism Like / Reaction Buttonsコンポーネント - シンプル、レスポンシブ、ダークテーマ

開けるプレビュー

                <div
  class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900"
>
  <div
    class="flex space-x-4 p-4 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20"
  >
    <!-- Like Button -->
    <button
      class="flex items-center space-x-2 px-4 py-2 bg-blue-500 bg-opacity-70 dark:bg-blue-700 dark:bg-opacity-70 text-white rounded-full transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-5 w-5"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm3-1a1 1 0 100-2 1 1 0 000 2zm3 1a1 1 0 100-2 1 1 0 000 2zm-3 4a1 1 0 100-2 1 1 0 000 2z"
          clip-rule="evenodd"
        />
      </svg>
      <span class="font-semibold">Like</span>
    </button>

    <!-- Heart Reaction Button -->
    <button
      class="flex items-center space-x-2 px-4 py-2 bg-red-500 bg-opacity-70 dark:bg-red-700 dark:bg-opacity-70 text-white rounded-full transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-75"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-5 w-5"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
          clip-rule="evenodd"
        />
      </svg>
      <span class="font-semibold">Love</span>
    </button>

    <!-- Laugh Reaction Button -->
    <button
      class="flex items-center space-x-2 px-4 py-2 bg-yellow-500 bg-opacity-70 dark:bg-yellow-700 dark:bg-opacity-70 text-white rounded-full transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-75"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-5 w-5"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm3-1a1 1 0 100-2 1 1 0 000 2zm3 1a1 1 0 100-2 1 1 0 000 2zm-3 4a1 1 0 100-2 1 1 0 000 2z"
          clip-rule="evenodd"
        />
      </svg>
      <span class="font-semibold">Haha</span>
    </button>
  </div>
</div>

RetroLoginFormComponent

レスポンシブ、ダークテーマ対応、アースカラーのレトロ/ビンテージログインフォーム、ビジネス/企業のWebサイトに適しています。最小限の要素を使用します。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center bg-stone-100 dark:bg-stone-900">
  <div class="max-w-md w-full p-8 bg-amber-100 dark:bg-amber-900 rounded-lg shadow-lg">
    <h2 class="text-center text-3xl font-extrabold text-stone-800 dark:text-stone-200 mb-6">Welcome Back</h2>
    <form class="space-y-6">
      <div>
        <label for="email" class="sr-only">Email address</label>
        <input id="email" name="email" type="email" autocomplete="email" required class="apperance-none relative block w-full px-3 py-2 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-300 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 sm:text-sm bg-stone-50 dark:bg-stone-800" placeholder="Email address">
      </div>
      <div>
        <label for="password" class="sr-only">Password</label>
        <input id="password" name="password" type="password" autocomplete="current-password" required class="apperance-none relative block w-full px-3 py-2 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-300 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 sm:text-sm bg-stone-50 dark:bg-stone-800" placeholder="Password">
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-stone-300 dark:border-stone-700 rounded">
          <label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-100">Remember me</label>
        </div>
        <div class="text-sm">
          <a href="#" class="font-medium text-amber-600 hover:text-amber-500">Forgot your password?</a>
        </div>
      </div>
      <div>
        <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-amber-700 hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-800 dark:hover:bg-amber-700">
          Sign in
        </button>
      </div>
    </form>
  </div>
</div>

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

ダークモードUI、単色の配色、およびTailwind CSSを使用したソーシャルメディアの適度な複雑さを備えた検索ボックスコンポーネント。ダークテーマをサポートするレスポンシブデザイン。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md w-full space-y-8">
    <div>
      <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
        Search Your Friends
      </h2>
    </div>
    <div class="mt-8 relative">
      <input type="text" placeholder="Search..." class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md leading-5 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm">
      <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
        <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
        </svg>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-md mt-4">
      <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="px-4 py-4 sm:px-6 flex items-center space-x-3">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <div class="flex-1 min-w-0">
            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">John Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400 truncate">@johndoe</p>
          </div>
        </li>
        <li class="px-4 py-4 sm:px-6 flex items-center space-x-3">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
          <div class="flex-1 min-w-0">
            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">Jane Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400 truncate">@janesmith</p>
          </div>
        </li>
         <li class="px-4 py-4 sm:px-6 flex items-center space-x-3">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
          <div class="flex-1 min-w-0">
            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">Peter Jones</p>
            <p class="text-sm text-gray-500 dark:text-gray-400 truncate">@peterj</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

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

ダークトライアドの配色と適度な複雑さを備えたソーシャルメディア用の製品カードコンポーネント。ダークモードをサポートするレスポンシブデザインにTailwind CSSを使用し、画像とアバターのプレースホルダーが含まれています。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
  <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-8">Social Media Product Cards</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/600/400" alt="Product Image">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Cool Gadget Pro</h3>
          <span class="text-lg font-bold text-teal-500 dark:text-teal-400">$299</span>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Elevate your digital experience with this cutting-edge gadget, featuring advanced capabilities.</p>
        <div class="flex items-center mb-4">
          <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <span class="text-gray-700 dark:text-gray-300 text-sm">By John Doe</span>
        </div>
        <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
          <span>❤️ 1.2K Likes</span>
          <span>💬 245 Comments</span>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-300">View Details</button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/600/400" alt="Product Image">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Smartwatch Elegance</h3>
          <span class="text-lg font-bold text-rose-500 dark:text-rose-400">$179</span>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Stay connected and stylish with this elegant smartwatch, designed for modern living.</p>
        <div class="flex items-center mb-4">
          <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <span class="text-gray-700 dark:text-gray-300 text-sm">By Jane Smith</span>
        </div>
        <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
          <span>❤️ 980 Likes</span>
          <span>💬 180 Comments</span>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-300">View Details</button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/600/400" alt="Product Image">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Wireless Headphones</h3>
          <span class="text-lg font-bold text-amber-500 dark:text-amber-400">$120</span>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Immerse yourself in rich audio with these comfortable and high-fidelity wireless headphones.</p>
        <div class="flex items-center mb-4">
          <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
          <span class="text-gray-700 dark:text-gray-300 text-sm">By Peter Jones</span>
        </div>
        <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
          <span>❤️ 1.5K Likes</span>
          <span>💬 300 Comments</span>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-300">View Details</button>
      </div>
    </div>
  </div>
</div>

ダッシュボードコンポーネント

ポートフォリオ用のシンプルなモノクロダークモードダッシュボードコンポーネントで、Tailwind CSS で構築されています。レスポンシブデザインが特徴で、単色のさまざまな色合いを使用して、なめらかでミニマルな外観になっています。

開けるプレビュー

                <div class="min-h-screen bg-gray-900 text-gray-100 p-8">
    <div class="max-w-7xl mx-auto">
        <h1 class="text-4xl font-bold mb-8 text-gray-500">Dashboard</h1>

        <!-- Stats Section -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
            <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
                <h2 class="text-xl font-semibold text-gray-400">Projects Completed</h2>
                <p class="text-5xl font-bold text-gray-300 mt-2">42</p>
            </div>
            <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
                <h2 class="text-xl font-semibold text-gray-400">Clients</h2>
                <p class="text-5xl font-bold text-gray-300 mt-2">15</p>
            </div>
            <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
                <h2 class="text-xl font-semibold text-gray-400">Awards</h2>
                <p class="text-5xl font-bold text-gray-300 mt-2">3</p>
            </div>
        </div>

        <!-- Recent Work Section -->
        <div class="bg-gray-800 p-8 rounded-lg shadow-lg mb-12">
            <h2 class="text-3xl font-semibold text-gray-400 mb-6">Recent Work</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="bg-gray-700 rounded-lg overflow-hidden shadow-md">
                    <img src="https://picsum.photos/seed/project1/400/250" alt="Project 1" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-semibold text-gray-300">Project Alpha</h3>
                        <p class="text-gray-400 mt-2">A sleek web design for a tech startup.</p>
                    </div>
                </div>
                <div class="bg-gray-700 rounded-lg overflow-hidden shadow-md">
                    <img src="https://picsum.photos/seed/project2/400/250" alt="Project 2" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-semibold text-gray-300">Project Beta</h3>
                        <p class="text-gray-400 mt-2">Mobile app development for an e-commerce brand.</p>
                    </div>
                </div>
                <div class="bg-gray-700 rounded-lg overflow-hidden shadow-md">
                    <img src="https://picsum.photos/seed/project3/400/250" alt="Project 3" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-semibold text-gray-300">Project Gamma</h3>
                        <p class="text-gray-400 mt-2">Branding and logo design for a local business.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Testimonials Section -->
        <div class="bg-gray-800 p-8 rounded-lg shadow-lg">
            <h2 class="text-3xl font-semibold text-gray-400 mb-6">Testimonials</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="bg-gray-700 p-6 rounded-lg shadow-md">
                    <div class="flex items-center mb-4">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client 1" class="w-12 h-12 rounded-full mr-4">
                        <div>
                            <p class="font-semibold text-gray-300">John Doe</p>
                            <p class="text-sm text-gray-400">CEO, Tech Solutions</p>
                        </div>
                    </div>
                    <p class="text-gray-400 italic">"The work delivered was exceptional and exceeded our expectations. Highly recommend!"</p>
                </div>
                <div class="bg-gray-700 p-6 rounded-lg shadow-md">
                    <div class="flex items-center mb-4">
                        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client 2" class="w-12 h-12 rounded-full mr-4">
                        <div>
                            <p class="font-semibold text-gray-300">Jane Smith</p>
                            <p class="text-sm text-gray-400">Marketing Director, Global Corp</p>
                        </div>
                    </div>
                    <p class="text-gray-400 italic">"Professional, timely, and truly understood our vision. A pleasure to work with."</p>
                </div>
            </div>
        </div>
    </div>
</div>

1 ... 102 103 104 105 106 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント