すべてのコンポーネント

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

ダークテーマをサポートする、eコマース用のミニマリストでレスポンシブなフィルターコンポーネント。カテゴリ、価格帯、カラーフィルターが含まれます。

                <div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 rounded-lg shadow-md">
  <h3 class="text-lg font-semibold mb-4">Filter Products</h3>
  
  <div class="mb-6">
    <h4 class="text-md font-medium mb-2">Categories</h4>
    <ul class="space-y-2 text-sm">
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Electronics</a></li>
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Apparel</a></li>
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Home Goods</a></li>
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Books</a></li>
    </ul>
  </div>

  <div class="mb-6">
    <h4 class="text-md font-medium mb-2">Price Range</h4>
    <input type="range" min="0" max="1000" value="500" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer">
    <div class="flex justify-between text-sm mt-1">
      <span>$0</span>
      <span>$1000+</span>
    </div>
  </div>

  <div class="mb-6">
    <h4 class="text-md font-medium mb-2">Color</h4>
    <div class="flex space-x-2">
      <span class="block w-6 h-6 rounded-full bg-black cursor-pointer border-2 border-gray-300 dark:border-gray-600"></span>
      <span class="block w-6 h-6 rounded-full bg-white cursor-pointer border-2 border-gray-400 dark:border-gray-500"></span>
      <span class="block w-6 h-6 rounded-full bg-gray-500 cursor-pointer border-2 border-gray-300 dark:border-gray-600"></span>
    </div>
  </div>

  <button class="w-full bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors duration-300">
    Apply Filters
  </button>
</div>

列コンポーネント

ダッシュボードの列コンポーネントで、補色の 3D デザインが特徴です。シンプルなレイアウト、ダークモードのサポート、スタイル設定にTailwind CSSを使用する3つのレスポンシブカラムが含まれています。JavaScriptは含まれていません。

プレビューを開く

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="container mx-auto grid gap-8 md:grid-cols-3">

    <!-- Column 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Sales Overview</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Visualize your sales performance with key metrics.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Chart Placeholder</p>
        </div>
      </div>
    </div>

    <!-- Column 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-red-400 to-pink-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Customer Insights</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Understand your customer base and their behavior.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Graph Placeholder</p>
        </div>
      </div>
    </div>

    <!-- Column 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-green-400 to-teal-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Product Performance</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Monitor the performance of your products.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Data Placeholder</p>
        </div>
      </div>
    </div>

  </div>
</div>

ダッシュボードレイアウトコンポーネント

マテリアルデザインの美学を備えたレスポンシブダッシュボードレイアウト(サイドバー、ヘッダー、メインコンテンツエリアなど)。ダークモードをサポートし、補色を使用してバランスの取れた外観を実現します。複雑さは中程度で、純粋にCSSとTailwindクラスで実現されるインタラクティブのような機能を備えています。

プレビューを開く

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col md:flex-row">

    <!-- Sidebar -->
    <div class="w-full md:w-64 bg-white dark:bg-gray-800 shadow-lg md:shadow-none p-4 space-y-4 flex flex-col items-center md:items-start">
        <div class="text-2xl font-bold text-indigo-600 dark:text-orange-400">Dashboard</div>
        <nav class="space-y-2 w-full">
            <a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-home"></i><span>Home</span></a>
            <a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-chart-line"></i><span>Analytics</span></a>
            <a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-cog"></i><span>Settings</span></a>
        </nav>
    </div>

    <!-- Main Content Area -->
    <div class="flex-1 flex flex-col">

        <!-- Header -->
        <header class="w-full bg-white dark:bg-gray-800 shadow-md p-4 flex justify-between items-center">
            <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Overview</h1>
            <div class="flex items-center space-x-4">
                <button class="text-gray-600 dark:text-gray-300 focus:outline-none"><i class="fas fa-bell"></i></button>
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-indigo-500 dark:border-orange-400">
            </div>
        </header>

        <!-- Content Grid -->
        <main class="flex-1 p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

            <!-- Card 1 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col justify-between transform transition duration-300 hover:scale-105">
                <div>
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Total Sales</h2>
                    <p class="text-3xl font-bold text-indigo-600 dark:text-orange-400 mt-2">$12,345</p>
                </div>
                <p class="text-sm text-gray-500 dark:text-gray-400">+5% from last month</p>
            </div>

            <!-- Card 2 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col justify-between transform transition duration-300 hover:scale-105">
                <div>
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">New Users</h2>
                    <p class="text-3xl font-bold text-indigo-600 dark:text-orange-400 mt-2">2,145</p>
                </div>
                <p class="text-sm text-gray-500 dark:text-gray-400">+12% from last week</p>
            </div>

            <!-- Card 3 (Image Card) -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 flex flex-col transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/400/200?random=1" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Data Visualization</h2>
                <p class="text-sm text-gray-600 dark:text-gray-300 mt-2 flex-grow">A quick look at the latest data trends and insights.</p>
                <button class="mt-4 self-end px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-300">View Details</button>
            </div>

            <!-- Card 4 (Chart Placeholder) -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 col-span-1 md:col-span-2 transform transition duration-300 hover:scale-105">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Sales Performance</h2>
                <div class="mt-4 h-48 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
                    <p class="text-gray-500 dark:text-gray-400">Chart Placeholder</p>
                </div>
            </div>

        </main>
    </div>

</div>

<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

成功メッセージコンポーネント

パステルカラーの配色、マイクロインタラクションのための繊細なアニメーション、ダークテーマをサポートするレスポンシブデザインを備えたシンプルな成功メッセージコンポーネント。これは、ポートフォリオがユーザーのアクションを認識するように設計されています。

プレビューを開く

                <div class="min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-indigo-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-8 flex items-center justify-center">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 md:p-8 max-w-sm w-full transform transition-all duration-300 hover:scale-105 ease-in-out">
    <div class="flex flex-col items-center justify-center space-y-4">
      <div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-green-100 dark:bg-green-700 transform transition-transform duration-500 ease-in-out scale-0 animate-scaleIn">
        <svg class="w-10 h-10 text-green-500 dark:text-green-200" 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="M5 13l4 4L19 7"></path>
        </svg>
      </div>
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center">Success!</h2>
      <p class="text-gray-600 dark:text-gray-300 text-center text-sm">
        Your action was completed successfully. We appreciate your patience.
      </p>
      <button class="px-6 py-2 rounded-full bg-purple-200 dark:bg-purple-600 text-purple-800 dark:text-white font-semibold hover:bg-purple-300 dark:hover:bg-purple-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-75">
        Continue
      </button>
    </div>
  </div>
</div>

<style>
  @keyframes scaleIn {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    60% {
      transform: scale(1.1);
      opacity: 1;
    }
    100% {
      transform: scale(1);
    }
  }

  .animate-scaleIn {
    animation: scaleIn 0.6s ease-out forwards;
  }
</style>

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

ミニマリストデザイン、鮮やかな色、ダークモードのサポートを備えたeコマース用のレスポンシブメディア埋め込みコンポーネント。

プレビューを開く

                <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl my-10 dark:bg-gray-800">
    <div class="md:flex">
        <div class="md:flex-shrink-0">
            <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
        </div>
        <div class="p-8">
            <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold dark:text-indigo-300">Product Name</div>
            <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline dark:text-white">Amazing Product Title</a>
            <p class="mt-2 text-gray-500 dark:text-gray-400">This is a brief description of the product, highlighting its key features and benefits. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-xl font-bold text-gray-900 dark:text-white">$29.99</span>
                <button class="bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

サイトマップコンポーネント

マイクロインタラクション、パステルカラースキーム、ダークテーマのサポートを備えたレスポンシブサイトマップコンポーネントで、eコマースWebサイトに適しています。ヘッダー、検索バー、およびリンクを含むいくつかのカテゴリが含まれています。

プレビューを開く

                
<div class="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-purple-950 min-h-screen p-8">
  <div class="container mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition duration-300 hover:scale-[1.01]">
    <h1 class="text-4xl font-extrabold text-gray-800 dark:text-white mb-8 text-center">Site Map</h1>

    <!-- Search Bar -->
    <div class="mb-8 relative">
      <input type="text" placeholder="Search sitemap..." class="w-full p-4 pl-12 rounded-full bg-purple-50 dark:bg-gray-700 text-gray-700 dark:text-white focus:outline-none focus:ring-4 focus:ring-purple-200 dark:focus:ring-purple-700 transition duration-300">
      <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
      </svg>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Category 1 -->
      <div class="bg-purple-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-purple-800 dark:text-purple-300 mb-4">Shop</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-200 block">All Products</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-200 block">New Arrivals</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-200 block">Best Sellers</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-200 block">On Sale</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-200 block">Gift Cards</a></li>
        </ul>
      </div>

      <!-- Category 2 -->
      <div class="bg-pink-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-pink-800 dark:text-pink-300 mb-4">My Account</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 transition duration-200 block">Dashboard</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 transition duration-200 block">Order History</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 transition duration-200 block">Wishlist</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 transition duration-200 block">Addresses</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 transition duration-200 block">Payment Methods</a></li>
        </ul>
      </div>

      <!-- Category 3 -->
      <div class="bg-blue-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-blue-800 dark:text-blue-300 mb-4">Customer Service</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block">Contact Us</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block">FAQs</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block">Shipping & Returns</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block">Privacy Policy</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block">Terms of Service</a></li>
        </ul>
      </div>

      <!-- Category 4 -->
      <div class="bg-green-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-green-800 dark:text-green-300 mb-4">About Us</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-200 block">Our Story</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-200 block">Careers</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-200 block">Blog</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-200 block">Press</a></li>
        </ul>
      </div>

      <!-- Category 5 -->
      <div class="bg-yellow-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-yellow-800 dark:text-yellow-300 mb-4">Connect</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-200 block">Facebook</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-200 block">Instagram</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-200 block">Twitter</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-200 block">Pinterest</a></li>
        </ul>
      </div>

      <!-- Category 6 - Example of more links if needed -->
      <div class="bg-red-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-red-800 dark:text-red-300 mb-4">Collaborations</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition duration-200 block">Partnerships</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition duration-200 block">Affiliate Program</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition duration-200 block">Wholesale Inquiries</a></li>
        </ul>
      </div>

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

ハンバーガーメニューコンポーネント

パステルカラーの配色でブルータリズムスタイルでデザインされたレスポンシブハンバーガーメニューコンポーネント。作品や製品を展示するポートフォリオに適しています。

プレビューを開く

                <nav class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
    <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
        <div class="relative flex items-center justify-between h-16">
            <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
                <!-- Hamburger Icon -->
                <button id="menu-toggle" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-800 focus:ring-white" aria-expanded="false" aria-label="Main menu">
                    <span class="sr-only">Open main menu</span>
                    <svg class="block h-6 w-6" 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="M4 6h16M4 12h16m-7 6h7" />
                    </svg>
                </button>
            </div>
            <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
                <div class="flex-shrink-0">
                    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
                </div>
                <div class="hidden sm:block">
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
                        <a href="#portfolio" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Portfolio</a>
                        <a href="#about" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
                        <a href="#contact" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

<!-- Menu Items -->
<div id="menu" class="hidden sm:hidden bg-white dark:bg-gray-800">
    <div class="px-2 pt-2 pb-3 space-y-1">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
        <a href="#portfolio" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Portfolio</a>
        <a href="#about" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">About</a>
        <a href="#contact" class="text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-600 hover:text-blue-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
    </div>
</div>

<main class="p-6">
    <h1 class="text-center text-3xl font-bold text-gray-800 dark:text-gray-200">Portfolio</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white dark:bg-gray-700">
            <img class="w-full" src="https://picsum.photos/400/200" alt="Portfolio Item">
            <div class="px-6 py-4">
                <div class="font-bold text-xl mb-2">Project 1</div>
                <p class="text-gray-700 dark:text-gray-300 text-base">Description of portfolio item 1.</p>
            </div>
        </div>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white dark:bg-gray-700">
            <img class="w-full" src="https://picsum.photos/400/201" alt="Portfolio Item">
            <div class="px-6 py-4">
                <div class="font-bold text-xl mb-2">Project 2</div>
                <p class="text-gray-700 dark:text-gray-300 text-base">Description of portfolio item 2.</p>
            </div>
        </div>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white dark:bg-gray-700">
            <img class="w-full" src="https://picsum.photos/400/202" alt="Portfolio Item">
            <div class="px-6 py-4">
                <div class="font-bold text-xl mb-2">Project 3</div>
                <p class="text-gray-700 dark:text-gray-300 text-base">Description of portfolio item 3.</p>
            </div>
        </div>
    </div>
</main>

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

トライアドカラースキームのポートフォリオ用に設計されたミニマリストの2要素認証コンポーネント。Tailwind CSSを使用して構築された、ダークモードをサポートするクリーンでインタラクティブなインターフェイスを備えています。

プレビューを開く

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6">
    <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 space-y-4">
        <h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200">Two-Factor Authentication</h2>
        <p class="text-center text-gray-600 dark:text-gray-400">To enhance the security of your account, please enter the verification code sent to your email.</p>
        <div class="flex flex-col space-y-4">
            <input type="text" placeholder="Verification Code" class="border border-gray-300 dark:border-gray-600 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600" />
            <div class="flex items-center justify-between">
                <button class="w-full bg-yellow-500 hover:bg-yellow-600 dark:bg-yellow-400 dark:hover:bg-yellow-500 text-white font-semibold rounded-md p-2 transition duration-200">Verify</button>
            </div>
            <div class="flex justify-between text-sm text-gray-500 dark:text-gray-400">
                <a href="#" class="hover:underline">Resend Code</a>
                <a href="#" class="hover:underline">Need Help?</a>
            </div>
        </div>
        <div class="flex flex-col items-center space-y-2">
            <img src="https://picsum.photos/50/50" alt="Random User" class="rounded-full border-2 border-gray-200 dark:border-gray-600" />
            <span class="text-gray-700 dark:text-gray-300">Username: johndoe</span>
        </div>
    </div>
</div>

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

ダッシュボード用に設計された、マイクロインタラクションを備えた複雑で応答性の高いタグクラウドコンポーネントで、グレースケールのカラースキームを使用しています。ダークモードをサポートします。

プレビューを開く

                <div class="dark:bg-gray-900 bg-white p-6 rounded-lg shadow-xl">
  <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Tag Cloud</h2>
  <div class="flex flex-wrap gap-3">
    <div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
      <span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Technology</span>
      <div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
    </div>
    <div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
      <span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Finance</span>
      <div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
    </div>
    <div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
      <span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Healthcare</span>
      <div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
    </div>
    <div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
      <span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Education</span>
      <div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
    </div>
    <div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
      <span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Sports</span>
      <div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
    </div>
    <div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
      <span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Science</span>
      <div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
    </div>
    <div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
      <span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Art</span>
      <div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
    </div>
    <div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
      <span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Travel</span>
      <div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
    </div>
    <div class="tag-item group relative cursor-pointer transform transition duration-300 hover:scale-105 hover:shadow-lg">
      <span class="block bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full text-sm font-medium transition duration-300 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">Food</span>
      <div class="absolute inset-0 rounded-full ring-2 ring-transparent group-hover:ring-gray-400 dark:group-hover:ring-gray-500 transition duration-300"></div>
    </div>
  </div>
</div>

ファイルビューアコンポーネント

eコマースアプリケーション用に設計されたレトロ/ビンテージファイルビューアコンポーネント。単色の配色、レスポンシブデザイン、ダークモードのサポートが特徴です。

プレビューを開く

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-white text-2xl font-bold text-center mb-4">File Viewer</h2>
    <div class="space-y-4">
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">File Name</h3>
            <p class="text-gray-300 dark:text-gray-400">example_file.pdf</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">Uploaded By</h3>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                <p class="text-gray-300 dark:text-gray-400">John Doe</p>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">File Preview</h3>
            <img src="https://picsum.photos/200/100" alt="File Preview" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">Actions</h3>
            <button class="w-full bg-gray-600 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 text-white py-2 px-4 rounded transition duration-150 ease-in-out">Download</button>
            <button class="w-full bg-gray-600 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 text-white py-2 px-4 rounded transition duration-150 ease-in-out">Delete</button>
        </div>
    </div>
</div>