検索コンポーネント

すべてのコンポーネント

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

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

グレースケールの配色とダークテーマをサポートするレスポンシブデザインを使用してマテリアルデザインスタイルでデザインされたシンプルなeコマース製品カードコンポーネント。

                <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/200/300" alt="Product Image">
        <div class="p-4">
            <h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$99.99</span>
                <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/200/300?random=2" alt="Product Image">
        <div class="p-4">
            <h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title 2</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the second product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$89.99</span>
                <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/200/300?random=3" alt="Product Image">
        <div class="p-4">
            <h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title 3</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the third product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$79.99</span>
                <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

トースト通知コンポーネント

Tailwind CSS を使用したブルータリストスタイルのトースト通知コンポーネントで、作業や製品を紹介するポートフォリオ用に設計されています。このデザインには類似の配色が組み込まれており、複雑なインターフェースを備えたダークモードをサポートしています。

開けるプレビュー

                <div class="fixed top-4 right-4 z-50 space-y-4">
    <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-red-500">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
            <div class="flex-1">
                <h2 class="font-bold text-lg">Notification Title</h2>
                <p class="text-sm">This is a sample toast notification message that showcases important updates or alerts.</p>
            </div>
            <button class="ml-2 p-2 text-sm text-red-500 hover:bg-red-400 rounded-full transition duration-200 ease-in-out">Close</button>
        </div>
    </div>
    <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-yellow-500">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar">
            <div class="flex-1">
                <h2 class="font-bold text-lg">Another Notification</h2>
                <p class="text-sm">This is another toast notification that provides insights or next steps for users.</p>
            </div>
            <button class="ml-2 p-2 text-sm text-yellow-500 hover:bg-yellow-400 rounded-full transition duration-200 ease-in-out">Close</button>
        </div>
    </div>
    <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-blue-500">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/20.jpg" alt="Avatar">
            <div class="flex-1">
                <h2 class="font-bold text-lg">Success Notification</h2>
                <p class="text-sm">Your latest action was successful. Keep up the great work!</p>
            </div>
            <button class="ml-2 p-2 text-sm text-blue-500 hover:bg-blue-400 rounded-full transition duration-200 ease-in-out">Close</button>
        </div>
    </div>
</div>

Brutalism Buttons コンポーネント

ブルータリズムデザインのボタンコンポーネントで、高彩度の色、レスポンシブレイアウト、ダークモードのサポートが特徴で、ビジネスや企業のWebサイトに適しています。

開けるプレビュー

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-200 dark:bg-gray-900">
    <h1 class="text-4xl font-bold text-purple-600 dark:text-purple-400 mb-6">Choose Your Action</h1>
    <div class="flex space-x-4">
        <button class="px-6 py-3 font-semibold text-white bg-red-600 border-2 border-red-800 rounded-lg shadow-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 dark:bg-red-800 dark:border-red-900 dark:hover:bg-red-700 dark:focus:ring-red-600">
            Primary Action
        </button>
        <button class="px-6 py-3 font-semibold text-white bg-blue-600 border-2 border-blue-800 rounded-lg shadow-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-800 dark:border-blue-900 dark:hover:bg-blue-700 dark:focus:ring-blue-600">
            Secondary Action
        </button>
    </div>
    <div class="flex space-x-4 mt-6">
        <button class="px-6 py-3 text-gray-800 bg-yellow-400 border-2 border-yellow-600 rounded-lg shadow-lg hover:bg-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:bg-yellow-600 dark:border-yellow-800 dark:text-white dark:hover:bg-yellow-500 dark:focus:ring-yellow-400">
            Tertiary Action
        </button>
        <button class="px-6 py-3 text-white bg-green-500 border-2 border-green-700 rounded-lg shadow-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-green-700 dark:border-green-800 dark:hover:bg-green-600 dark:focus:ring-green-400">
            Another Action
        </button>
    </div>
    <div class="mt-6 text-center">
        <img src="https://picsum.photos/200/100" alt="Sample Image" class="rounded-md shadow-lg">
        <div class="flex items-center justify-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/81.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-md">
            <p class="ml-2 text-lg text-gray-700 dark:text-gray-300">John Doe</p>
        </div>
    </div>
</div>

ダークモードデータ視覚化コンポーネント

ダークなモノクロテーマで設計された、複雑で応答性の高いデータ視覚化コンポーネント。折れ線グラフ、棒グラフ、データカードなど、複数の対話型視覚化要素を備えています。ホバー効果が含まれ、Tailwindのダークモードサポートを使用します。ブログやコンテンツ消費プラットフォームに適しています。

開けるプレビュー

                <!-- Dark Mode Data Visualization Component -->
<div class="w-full bg-gray-900 text-gray-100 p-4 md:p-6 rounded-xl shadow-xl">
  <!-- Header with title and filter options -->
  <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
    <div>
      <h2 class="text-2xl font-bold text-gray-100">Analytics Dashboard</h2>
      <p class="text-gray-400 mt-1">Performance metrics for last quarter</p>
    </div>
    
    <div class="mt-4 md:mt-0 flex flex-wrap gap-2">
      <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-200 rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-gray-500">
        Daily
      </button>
      <button class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-indigo-500">
        Weekly
      </button>
      <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-200 rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-gray-500">
        Monthly
      </button>
    </div>
  </div>
  
  <!-- Stats Summary Cards -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <!-- Pageviews -->
    <div class="bg-gray-800 p-4 rounded-lg hover:bg-gray-750 transition-colors duration-200">
      <div class="flex items-center justify-between">
        <h3 class="text-gray-400 text-sm font-medium">Pageviews</h3>
        <span class="bg-green-900/30 text-green-400 text-xs py-1 px-2 rounded-full">+24%</span>
      </div>
      <p class="text-2xl font-bold mt-2 text-gray-100">152.4K</p>
      <div class="mt-2 h-1 w-full bg-gray-700 rounded-full overflow-hidden">
        <div class="h-1 bg-indigo-500 rounded-full" style="width: 75%"></div>
      </div>
    </div>
    
    <!-- Bounce Rate -->
    <div class="bg-gray-800 p-4 rounded-lg hover:bg-gray-750 transition-colors duration-200">
      <div class="flex items-center justify-between">
        <h3 class="text-gray-400 text-sm font-medium">Bounce Rate</h3>
        <span class="bg-red-900/30 text-red-400 text-xs py-1 px-2 rounded-full">+2.1%</span>
      </div>
      <p class="text-2xl font-bold mt-2 text-gray-100">38.2%</p>
      <div class="mt-2 h-1 w-full bg-gray-700 rounded-full overflow-hidden">
        <div class="h-1 bg-indigo-500 rounded-full" style="width: 38%"></div>
      </div>
    </div>
    
    <!-- Avg. Time on Site -->
    <div class="bg-gray-800 p-4 rounded-lg hover:bg-gray-750 transition-colors duration-200">
      <div class="flex items-center justify-between">
        <h3 class="text-gray-400 text-sm font-medium">Avg. Session</h3>
        <span class="bg-green-900/30 text-green-400 text-xs py-1 px-2 rounded-full">+12%</span>
      </div>
      <p class="text-2xl font-bold mt-2 text-gray-100">4m 38s</p>
      <div class="mt-2 h-1 w-full bg-gray-700 rounded-full overflow-hidden">
        <div class="h-1 bg-indigo-500 rounded-full" style="width: 65%"></div>
      </div>
    </div>
    
    <!-- Conversion Rate -->
    <div class="bg-gray-800 p-4 rounded-lg hover:bg-gray-750 transition-colors duration-200">
      <div class="flex items-center justify-between">
        <h3 class="text-gray-400 text-sm font-medium">Conversion</h3>
        <span class="bg-green-900/30 text-green-400 text-xs py-1 px-2 rounded-full">+7.3%</span>
      </div>
      <p class="text-2xl font-bold mt-2 text-gray-100">5.4%</p>
      <div class="mt-2 h-1 w-full bg-gray-700 rounded-full overflow-hidden">
        <div class="h-1 bg-indigo-500 rounded-full" style="width: 54%"></div>
      </div>
    </div>
  </div>
  
  <!-- Charts Section -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
    <!-- Line Chart -->
    <div class="bg-gray-800 p-4 rounded-lg col-span-2">
      <div class="flex justify-between items-center mb-4">
        <h3 class="font-semibold text-gray-100">User Growth</h3>
        <div class="flex space-x-2">
          <span class="inline-block w-3 h-3 bg-indigo-500 rounded-full"></span>
          <span class="text-sm text-gray-400">New Users</span>
          <span class="inline-block w-3 h-3 bg-gray-500 rounded-full ml-2"></span>
          <span class="text-sm text-gray-400">Returning</span>
        </div>
      </div>
      
      <!-- Simplified Line Chart (CSS only) -->
      <div class="relative h-64 w-full">
        <div class="absolute bottom-0 left-0 w-full h-px bg-gray-700"></div>
        <div class="absolute left-0 top-0 h-full w-px bg-gray-700"></div>
        
        <!-- Y-axis labels -->
        <div class="absolute -left-6 top-0 text-gray-400 text-xs">100%</div>
        <div class="absolute -left-6 top-1/4 text-gray-400 text-xs">75%</div>
        <div class="absolute -left-6 top-2/4 text-gray-400 text-xs">50%</div>
        <div class="absolute -left-6 top-3/4 text-gray-400 text-xs">25%</div>
        <div class="absolute -left-6 bottom-0 text-gray-400 text-xs">0%</div>
        
        <!-- X-axis labels -->
        <div class="absolute bottom-[-20px] left-[12.5%] text-gray-400 text-xs">Jan</div>
        <div class="absolute bottom-[-20px] left-[37.5%] text-gray-400 text-xs">Feb</div>
        <div class="absolute bottom-[-20px] left-[62.5%] text-gray-400 text-xs">Mar</div>
        <div class="absolute bottom-[-20px] left-[87.5%] text-gray-400 text-xs">Apr</div>
        
        <!-- Line chart shape (CSS only approximation) -->
        <div class="absolute bottom-0 left-0 w-full h-full overflow-hidden">
          <svg viewBox="0 0 100 60" preserveAspectRatio="none" class="w-full h-full">
            <!-- Grid lines -->
            <line x1="0" y1="15" x2="100" y2="15" stroke="#374151" stroke-width="0.2"/>
            <line x1="0" y1="30" x2="100" y2="30" stroke="#374151" stroke-width="0.2"/>
            <line x1="0" y1="45" x2="100" y2="45" stroke="#374151" stroke-width="0.2"/>
            <line x1="25" y1="0" x2="25" y2="60" stroke="#374151" stroke-width="0.2"/>
            <line x1="50" y1="0" x2="50" y2="60" stroke="#374151" stroke-width="0.2"/>
            <line x1="75" y1="0" x2="75" y2="60" stroke="#374151" stroke-width="0.2"/>
            
            <!-- Chart line 1 -->
            <polyline 
              points="0,40 25,30 50,20 75,15 100,10"
              fill="none"
              stroke="#6366F1"
              stroke-width="2"
            />
            
            <!-- Chart line 2 -->
            <polyline 
              points="0,50 25,40 50,45 75,35 100,30"
              fill="none"
              stroke="#9CA3AF"
              stroke-width="2"
            />
            
            <!-- Data points for line 1 -->
            <circle cx="0" cy="40" r="1.5" fill="#6366F1"/>
            <circle cx="25" cy="30" r="1.5" fill="#6366F1"/>
            <circle cx="50" cy="20" r="1.5" fill="#6366F1"/>
            <circle cx="75" cy="15" r="1.5" fill="#6366F1"/>
            <circle cx="100" cy="10" r="1.5" fill="#6366F1"/>
            
            <!-- Data points for line 2 -->
            <circle cx="0" cy="50" r="1.5" fill="#9CA3AF"/>
            <circle cx="25" cy="40" r="1.5" fill="#9CA3AF"/>
            <circle cx="50" cy="45" r="1.5" fill="#9CA3AF"/>
            <circle cx="75" cy="35" r="1.5" fill="#9CA3AF"/>
            <circle cx="100" cy="30" r="1.5" fill="#9CA3AF"/>
          </svg>
        </div>
      </div>
    </div>
    
    <!-- Bar Chart -->
    <div class="bg-gray-800 p-4 rounded-lg">
      <div class="flex justify-between items-center mb-4">
        <h3 class="font-semibold text-gray-100">Traffic Sources</h3>
        <button class="text-gray-400 hover:text-gray-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
          </svg>
        </button>
      </div>
      
      <!-- Simplified Bar Chart (CSS only) -->
      <div class="relative h-64 mt-4 flex items-end justify-around">
        <div class="flex flex-col items-center space-y-2">
          <div class="w-8 bg-indigo-900 hover:bg-indigo-700 transition-colors duration-200 rounded-t-sm" style="height: 65%">
            <div class="w-full bg-indigo-500 h-full rounded-t-sm"></div>
          </div>
          <span class="text-xs text-gray-400">Direct</span>
        </div>
        
        <div class="flex flex-col items-center space-y-2">
          <div class="w-8 bg-indigo-900 hover:bg-indigo-700 transition-colors duration-200 rounded-t-sm" style="height: 85%">
            <div class="w-full bg-indigo-500 h-full rounded-t-sm"></div>
          </div>
          <span class="text-xs text-gray-400">Social</span>
        </div>
        
        <div class="flex flex-col items-center space-y-2">
          <div class="w-8 bg-indigo-900 hover:bg-indigo-700 transition-colors duration-200 rounded-t-sm" style="height: 40%">
            <div class="w-full bg-indigo-500 h-full rounded-t-sm"></div>
          </div>
          <span class="text-xs text-gray-400">Email</span>
        </div>
        
        <div class="flex flex-col items-center space-y-2">
          <div class="w-8 bg-indigo-900 hover:bg-indigo-700 transition-colors duration-200 rounded-t-sm" style="height: 95%">
            <div class="w-full bg-indigo-500 h-full rounded-t-sm"></div>
          </div>
          <span class="text-xs text-gray-400">Search</span>
        </div>
        
        <div class="flex flex-col items-center space-y-2">
          <div class="w-8 bg-indigo-900 hover:bg-indigo-700 transition-colors duration-200 rounded-t-sm" style="height: 50%">
            <div class="w-full bg-indigo-500 h-full rounded-t-sm"></div>
          </div>
          <span class="text-xs text-gray-400">Ads</span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Popular Content Section -->
  <div class="bg-gray-800 p-4 rounded-lg mb-6">
    <div class="flex justify-between items-center mb-4">
      <h3 class="font-semibold text-gray-100">Popular Content</h3>
      <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 text-gray-200 rounded-md text-sm transition-colors duration-200">View All</button>
    </div>
    
    <!-- Content Items -->
    <div class="space-y-4">
      <!-- Item 1 -->
      <div class="flex flex-col sm:flex-row bg-gray-750 hover:bg-gray-700 p-3 rounded-lg transition-colors duration-200">
        <img src="https://picsum.photos/id/1/80/80" alt="Article thumbnail" class="w-full sm:w-20 h-20 object-cover rounded-md">
        <div class="mt-2 sm:mt-0 sm:ml-3 flex-grow">
          <h4 class="font-medium text-gray-100">10 Ways to Improve Your Data Analysis Skills</h4>
          <div class="flex items-center text-gray-400 mt-2 text-sm">
            <span>2.1K reads</span>
            <span class="mx-2">•</span>
            <span>8 min read</span>
            <div class="flex ml-auto">
              <div class="w-16 bg-gray-700 rounded-full h-1.5">
                <div class="bg-indigo-500 h-1.5 rounded-full" style="width: 80%"></div>
              </div>
              <span class="ml-1 text-xs">80%</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Item 2 -->
      <div class="flex flex-col sm:flex-row bg-gray-750 hover:bg-gray-700 p-3 rounded-lg transition-colors duration-200">
        <img src="https://picsum.photos/id/26/80/80" alt="Article thumbnail" class="w-full sm:w-20 h-20 object-cover rounded-md">
        <div class="mt-2 sm:mt-0 sm:ml-3 flex-grow">
          <h4 class="font-medium text-gray-100">Understanding User Behavior Through Analytics</h4>
          <div class="flex items-center text-gray-400 mt-2 text-sm">
            <span>1.8K reads</span>
            <span class="mx-2">•</span>
            <span>6 min read</span>
            <div class="flex ml-auto">
              <div class="w-16 bg-gray-700 rounded-full h-1.5">
                <div class="bg-indigo-500 h-1.5 rounded-full" style="width: 65%"></div>
              </div>
              <span class="ml-1 text-xs">65%</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Item 3 -->
      <div class="flex flex-col sm:flex-row bg-gray-750 hover:bg-gray-700 p-3 rounded-lg transition-colors duration-200">
        <img src="https://picsum.photos/id/60/80/80" alt="Article thumbnail" class="w-full sm:w-20 h-20 object-cover rounded-md">
        <div class="mt-2 sm:mt-0 sm:ml-3 flex-grow">
          <h4 class="font-medium text-gray-100">Data Visualization Principles for Beginners</h4>
          <div class="flex items-center text-gray-400 mt-2 text-sm">
            <span>3.4K reads</span>
            <span class="mx-2">•</span>
            <span>12 min read</span>
            <div class="flex ml-auto">
              <div class="w-16 bg-gray-700 rounded-full h-1.5">
                <div class="bg-indigo-500 h-1.5 rounded-full" style="width: 92%"></div>
              </div>
              <span class="ml-1 text-xs">92%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Footer with user info -->
  <div class="flex flex-col md:flex-row items-start md:items-center justify-between">
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
      <div class="ml-3">
        <p class="text-sm font-medium text-gray-100">Report generated by James Wilson</p>
        <p class="text-xs text-gray-400">Last updated: April 15, 2023 at 14:30</p>
      </div>
    </div>
    <div class="mt-4 md:mt-0 flex space-x-2">
      <button class="px-3 py-1 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-md text-sm transition-colors duration-200 flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
        Download PDF
      </button>
      <button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white rounded-md text-sm transition-colors duration-200 flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
          <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" />
        </svg>
        Share Report
      </button>
    </div>
  </div>
</div>

Brutalist Grayscale Dashboard コンポーネント

ビジネス/企業のWebサイト向けのシンプルなブルータリズムスタイルのグレースケールダッシュボードレイアウトで、ダークモードをサポートし、Tailwind CSSで構築されています。

開けるプレビュー

                <section class="dashboard-component bg-white dark:bg-gray-900 text-black dark:text-white p-8 border-4 border-black dark:border-white">
  <div class="max-w-7xl mx-auto">
    <!-- Banner -->
    <div class="mb-8 border-4 border-black dark:border-white">
      <img src="https://picsum.photos/1200/200" alt="Dashboard Banner" class="w-full h-40 object-cover">
    </div>
    <!-- Header -->
    <div class="flex items-center justify-between mb-8">
      <h1 class="text-3xl font-extrabold">Company Dashboard</h1>
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-4 border-black dark:border-white">
    </div>
    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2">
        <h2 class="text-xl font-bold mb-2">Total Sales</h2>
        <p class="text-2xl">67,890</p>
      </div>
      <div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2">
        <h2 class="text-xl font-bold mb-2">New Users</h2>
        <p class="text-2xl">1,234</p>
      </div>
      <div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2">
        <h2 class="text-xl font-bold mb-2">Performance</h2>
        <p class="text-2xl">78%</p>
      </div>
    </div>
  </div>
</section>

ウィッシュリストコンポーネント

マイクロインタラクションを備えたビジネス/企業のWebサイト向けのシンプルで応答性の高いウィッシュリストコンポーネント。類似の配色 (青、緑、青緑)、ダークテーマのサポート、微妙なホバーアニメーションが特徴です。このコンポーネントには、ウィッシュリストアイテムが製品画像、名前、価格、アクションボタンとともに表示されます。

開けるプレビュー

                <div class="max-w-md mx-auto bg-gradient-to-br from-blue-50 to-teal-50 dark:from-slate-800 dark:to-slate-900 rounded-lg shadow-md p-6 transition-all duration-300 ease-in-out hover:shadow-lg">
  <div class="flex items-center justify-between mb-6">
    <h2 class="text-xl font-semibold text-blue-700 dark:text-teal-400 transition-colors duration-300">Your Wishlist</h2>
    <span class="bg-teal-100 dark:bg-teal-900 text-teal-600 dark:text-teal-300 text-sm px-3 py-1 rounded-full transition-all duration-300 hover:scale-105">3 items</span>
  </div>
  
  <ul class="space-y-4">
    <!-- Wishlist Item 1 -->
    <li class="flex items-center border-b border-blue-100 dark:border-slate-700 pb-4 group">
      <div class="relative w-16 h-16 overflow-hidden rounded-md mr-4 transition-transform duration-300 group-hover:scale-105">
        <img src="https://picsum.photos/200/200?random=1" alt="Product" class="object-cover w-full h-full">
        <div class="absolute inset-0 bg-gradient-to-t from-teal-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>
      <div class="flex-grow">
        <h3 class="text-blue-800 dark:text-blue-300 font-medium transition-colors duration-300">Business Analytics Tool</h3>
        <p class="text-teal-600 dark:text-teal-400 text-sm">$199.99</p>
      </div>
      <div class="flex space-x-2">
        <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 transition-all duration-300 hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
          </svg>
        </button>
        <button class="text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition-all duration-300 hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
          </svg>
        </button>
      </div>
    </li>
    
    <!-- Wishlist Item 2 -->
    <li class="flex items-center border-b border-blue-100 dark:border-slate-700 pb-4 group">
      <div class="relative w-16 h-16 overflow-hidden rounded-md mr-4 transition-transform duration-300 group-hover:scale-105">
        <img src="https://picsum.photos/200/200?random=2" alt="Product" class="object-cover w-full h-full">
        <div class="absolute inset-0 bg-gradient-to-t from-teal-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>
      <div class="flex-grow">
        <h3 class="text-blue-800 dark:text-blue-300 font-medium transition-colors duration-300">CRM Software Premium</h3>
        <p class="text-teal-600 dark:text-teal-400 text-sm">$299.99</p>
      </div>
      <div class="flex space-x-2">
        <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 transition-all duration-300 hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
          </svg>
        </button>
        <button class="text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition-all duration-300 hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
          </svg>
        </button>
      </div>
    </li>
    
    <!-- Wishlist Item 3 -->
    <li class="flex items-center pb-2 group">
      <div class="relative w-16 h-16 overflow-hidden rounded-md mr-4 transition-transform duration-300 group-hover:scale-105">
        <img src="https://picsum.photos/200/200?random=3" alt="Product" class="object-cover w-full h-full">
        <div class="absolute inset-0 bg-gradient-to-t from-teal-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>
      <div class="flex-grow">
        <h3 class="text-blue-800 dark:text-blue-300 font-medium transition-colors duration-300">Dashboard Template Bundle</h3>
        <p class="text-teal-600 dark:text-teal-400 text-sm">$149.99</p>
      </div>
      <div class="flex space-x-2">
        <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 transition-all duration-300 hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
          </svg>
        </button>
        <button class="text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition-all duration-300 hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
          </svg>
        </button>
      </div>
    </li>
  </ul>
  
  <div class="mt-6 flex justify-between items-center">
    <button class="px-4 py-2 bg-gradient-to-r from-blue-500 to-teal-500 text-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 hover:translate-y-[-2px] focus:outline-none focus:ring-2 focus:ring-teal-400 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
      Add All to Cart
    </button>
    <p class="text-blue-700 dark:text-blue-300 font-medium">Total: <span class="text-teal-600 dark:text-teal-400">$649.97</span></p>
  </div>
</div>

パステルカラーパレット(ソフトピンクと補完的なグレー)と、スムーズなトランジションや微妙なホバー/フォーカス効果などの魅力的なマイクロインタラクションで作られた、シンプルでレスポンシブなログインフォームコンポーネント。ビジネスまたは企業のWebサイト向けに設計されており、すっきりとしたレイアウトが特徴で、完全にレスポンシブで、包括的なダークテーマのサポートが含まれています。純粋にHTMLとTailwind CSSで構築されています。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center bg-pink-50 dark:bg-slate-900 p-4 transition-colors duration-300">
  <div class="bg-white dark:bg-slate-800 p-8 md:p-10 rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-500 hover:scale-105">
    <h2 class="text-3xl font-bold text-center text-pink-600 dark:text-pink-400 mb-8">
      Welcome Back
    </h2>
    <form action="#" method="POST" class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
          Email address
        </label>
        <input
          id="email"
          name="email"
          type="email"
          autocomplete="email"
          required
          class="appearance-none block w-full px-4 py-3 rounded-lg border border-pink-200 dark:border-slate-600 placeholder-slate-400 dark:placeholder-slate-500 text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm hover:shadow-md focus:shadow-lg"
          placeholder="[email protected]"
        />
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
          Password
        </label>
        <input
          id="password"
          name="password"
          type="password"
          autocomplete="current-password"
          required
          class="appearance-none block w-full px-4 py-3 rounded-lg border border-pink-200 dark:border-slate-600 placeholder-slate-400 dark:placeholder-slate-500 text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm hover:shadow-md focus:shadow-lg"
          placeholder="••••••••"
        />
      </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-pink-500 dark:text-pink-400 focus:ring-pink-400 dark:focus:ring-pink-300 border-pink-300 dark:border-slate-500 rounded bg-pink-50 dark:bg-slate-700 transition duration-150 ease-in-out" />
          <label for="remember-me" class="ml-2 block text-sm text-slate-800 dark:text-slate-300">
            Remember me
          </label>
        </div>
        <div class="text-sm">
          <a href="#" class="font-medium text-pink-500 hover:text-pink-400 dark:text-pink-400 dark:hover:text-pink-300 transition-colors duration-150 ease-in-out">
            Forgot password?
          </a>
        </div>
      </div>

      <div>
        <button
          type="submit"
          class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-md text-lg font-medium text-white bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-offset-slate-800 transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95"
        >
          Sign In
        </button>
      </div>
    </form>
    <p class="mt-8 text-center text-sm text-slate-600 dark:text-slate-400">
      Not a member?
      <a href="#" class="font-medium text-pink-500 hover:text-pink-400 dark:text-pink-400 dark:hover:text-pink-300 transition-colors duration-150 ease-in-out">
        Sign up now
      </a>
    </p>
  </div>
</div>

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

ブログやコンテンツの消費用に設計された単色の配色を備えたニューモーフィズムスタイルのメガメニューコンポーネント。ダークモードのレスポンシブデザインをサポートします。

開けるプレビュー

                <header class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
  <nav class="container mx-auto flex justify-between items-center">
    <div class="flex items-center space-x-8">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">My Blog</h1>
      <div class="hidden md:flex space-x-6">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition">Home</a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition">About</a>
        <div class="relative group">
          <button class="text-gray-600 dark:text-gray-300 focus:outline-none hover:text-gray-800 dark:hover:text-gray-100 transition">Categories</button>
          <div class="absolute left-0 z-10 hidden w-48 bg-white dark:bg-gray-700 rounded-lg shadow-lg group-hover:block">
            <ul class="py-2">
              <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Web Development</a></li>
              <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Design</a></li>
              <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Marketing</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="hidden md:block">
      <a href="#" class="relative inline-block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
      </a>
    </div>
    <div class="md:hidden">
      <button class="text-gray-600 dark:text-gray-300 focus:outline-none">
        <!-- Hamburger icon -->
        <svg class="w-6 h-6" 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>
  </nav>
</header>

<main class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg mt-4">
  <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Recent Posts</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/500/300?random=1" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
      <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 1</h3>
      <p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/500/300?random=2" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
      <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 2</h3>
      <p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/500/300?random=3" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
      <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 3</h3>
      <p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/500/300?random=4" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
      <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 4</h3>
      <p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
    </div>
  </div>
</main>

Skeuomorphic Pastel パスワードリセット

Skeuomorphismの美学でデザインされたレスポンシブなパスワードリセットWebコンポーネントで、柔らかなパステルカラーが特徴です。インターフェイスは複雑で、Tailwind CSS で作成された 3D エフェクト、シャドウ、微妙なテクスチャを通じて詳細に説明される複数のインタラクティブ要素があります。これには、電子メール入力用のフォームと目立つ[リセットリンクの送信]ボタン、およびセカンダリリンクが含まれています。ダークテーマがサポートされています。ポートフォリオのショーケースに最適です。

開けるプレビュー

                <!-- Ensure TailwindCSS is included in your project -->
<div class="min-h-screen bg-slate-100 dark:bg-slate-900 flex flex-col items-center justify-center p-4 transition-colors duration-300 selection:bg-rose-300 selection:text-rose-900">
  <!-- Skeuomorphic Card -->
  <div class="bg-white dark:bg-slate-800 p-6 sm:p-10 rounded-3xl 
              shadow-[0_10px_20px_rgba(0,0,0,0.04),_0_5px_10px_rgba(0,0,0,0.08)] 
              dark:shadow-[0_10px_20px_rgba(0,0,0,0.25),_0_5px_10px_rgba(0,0,0,0.45)] 
              w-full max-w-md transform transition-all duration-300 
              hover:shadow-[0_15px_30px_rgba(0,0,0,0.06),_0_8px_15px_rgba(0,0,0,0.10)]
              dark:hover:shadow-[0_15px_30px_rgba(0,0,0,0.3),_0_8px_15px_rgba(0,0,0,0.5)]">
    <!-- Header / Title -->
    <div class="text-center mb-8">
      <h1 class="text-3xl font-bold text-rose-600 dark:text-rose-400 tracking-tight">Password Recovery</h1>
      <p class="text-sm text-slate-500 dark:text-slate-400 mt-2">Looks like you forgot your password. No worries!</p>
    </div>

    <!-- Decorative "Grooved" Line -->
    <div class="w-full h-px bg-gradient-to-r from-transparent via-slate-300 dark:via-slate-600 to-transparent mt-8 mb-0"></div>
    <div class="w-full h-px bg-gradient-to-r from-transparent via-white/[0.7] dark:via-slate-700/[0.7] to-transparent mb-8 transform translate-y-[0.5px]"></div>

    <!-- Form -->
    <form action="#" method="POST">
      <div class="space-y-6">
        <!-- Email Input -->
        <div>
          <label for="email" class="block text-sm font-medium text-slate-600 dark:text-slate-300 mb-1.5 select-none">Email Address</label>
          <div class="relative rounded-xl">
            <input type="email" name="email" id="email"
                   class="appearance-none block w-full px-4 py-3 
                          bg-slate-50 dark:bg-slate-700/[0.7] text-slate-800 dark:text-slate-100 
                          placeholder-slate-400 dark:placeholder-slate-500 
                          rounded-xl 
                          border border-slate-200 dark:border-slate-600
                          shadow-[inset_3px_3px_6px_rgba(0,0,0,0.07),_inset_-2px_-2px_4px_rgba(255,255,255,0.4)] 
                          dark:shadow-[inset_3px_3px_6px_rgba(0,0,0,0.3),_inset_-2px_-2px_4px_rgba(75,85,99,0.2)]
                          focus:outline-none focus:ring-2 focus:ring-rose-500 dark:focus:ring-rose-400 focus:border-rose-500 dark:focus:border-rose-400
                          sm:text-sm transition-all duration-200"
                   placeholder="[email protected]">
          </div>
        </div>

        <!-- "Send Reset Link" Button - Skeuomorphic -->
        <div>
          <button type="submit"
                  class="w-full flex justify-center py-3 px-4 rounded-xl 
                         text-base font-semibold text-white select-none
                         bg-gradient-to-br from-rose-500 to-pink-500 hover:from-rose-500 hover:to-pink-500 /* Adjusted hover for consistency of color */
                         dark:from-rose-600 dark:to-pink-600 dark:hover:from-rose-600 dark:hover:to-pink-600
                         shadow-[0_4px_0_0_#a12147] dark:shadow-[0_4px_0_0_#9d174d] /* Rose-700/Pink-700 like fixed colors */
                         hover:shadow-[0_3px_0_0_#a12147] dark:hover:shadow-[0_3px_0_0_#9d174d]
                         active:shadow-[0_1px_0_0_#a12147] dark:active:shadow-[0_1px_0_0_#9d174d]
                         focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 dark:focus:ring-offset-slate-900
                         transform transition-all duration-100 ease-in-out
                         hover:-translate-y-0.5 active:translate-y-[1px]">
            Send Reset Link
          </button>
        </div>
      </div>
    </form>

    <!-- Decorative "Grooved" Line -->
    <div class="w-full h-px bg-gradient-to-r from-transparent via-slate-300 dark:via-slate-600 to-transparent mt-8 mb-0"></div>
    <div class="w-full h-px bg-gradient-to-r from-transparent via-white/[0.7] dark:via-slate-700/[0.7] to-transparent mb-8 transform translate-y-[0.5px]"></div>

    <!-- Footer Links -->
    <div class="mt-6 text-center">
      <p class="text-sm text-slate-500 dark:text-slate-400">
        Remember your password?
        <a href="#" class="font-medium text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300 transition-colors duration-150">
          Back to Login
        </a>
      </p>
      <p class="mt-2 text-xs text-slate-400 dark:text-slate-500">
        Need help? <a href="#" class="hover:underline text-rose-500 dark:text-rose-400">Contact Support</a>
      </p>
    </div>

    <!-- Portfolio Purpose Stamp -->
    <div class="mt-8 text-center">
        <div class="inline-block mt-2 p-1.5 border-2 border-dashed border-rose-200 dark:border-slate-600 rounded-lg opacity-75 transform rotate-[-2deg] hover:rotate-0 transition-transform duration-200 select-none">
            <span class="text-xs font-mono text-rose-400 dark:text-slate-400 tracking-wider">DESIGN SHOWCASE</span>
        </div>
    </div>
  </div>

  <!-- Subtle "Surface" Background Element for depth -->
  <div class="absolute inset-x-0 bottom-0 h-1/4 bg-gradient-to-t from-slate-200/70 dark:from-slate-950/70 to-transparent -z-10 pointer-events-none"></div>
</div>

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

ブログコンテンツの消費用に設計されたシンプルなレトロ/ビンテージスタイルのアクティビティフィードコンポーネントで、単色のブルーの配色とTailwind CSSを使用したレスポンシブダークモードのサポートが特徴です。

開けるプレビュー

                <!-- Activity Feed Component: Retro/Vintage Monochromatic Style -->
<section aria-labelledby="activity-feed-title" class="bg-blue-50 dark:bg-blue-900 border-2 border-dashed border-blue-300 dark:border-blue-700 rounded-lg shadow p-6 max-w-md md:max-w-lg lg:max-w-xl mx-auto">
  <h2 id="activity-feed-title" class="uppercase tracking-widest text-2xl font-mono text-blue-900 dark:text-blue-100 pb-2 mb-4 border-b-2 border-dashed border-blue-300 dark:border-blue-700">
    Activity Feed
  </h2>
  <div class="divide-y divide-blue-200 dark:divide-blue-700">
    <div class="flex items-center space-x-4 py-3">
      <img class="h-10 w-10 rounded-full border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice avatar">
      <div class="flex-1 min-w-0">
        <p class="text-sm font-mono text-blue-800 dark:text-blue-200">
          <span class="font-bold">Alice</span> published a new post <a href="#" class="underline">Understanding Tailwind CSS</a>
        </p>
        <p class="text-xs text-blue-600 dark:text-blue-400">2 hours ago</p>
      </div>
    </div>
    <div class="flex items-center space-x-4 py-3">
      <img class="h-10 w-10 rounded-full border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/men/65.jpg" alt="Bob avatar">
      <div class="flex-1 min-w-0">
        <p class="text-sm font-mono text-blue-800 dark:text-blue-200">
          <span class="font-bold">Bob</span> commented on <a href="#" class="underline">10 CSS Tricks You Should Know</a>
        </p>
        <p class="text-xs text-blue-600 dark:text-blue-400">5 hours ago</p>
      </div>
    </div>
    <div class="flex items-center space-x-4 py-3">
      <img class="h-10 w-10 rounded-full border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Carol avatar">
      <div class="flex-1 min-w-0">
        <p class="text-sm font-mono text-blue-800 dark:text-blue-200">
          <span class="font-bold">Carol</span> liked the post <a href="#" class="underline">Building Responsive Layouts</a>
        </p>
        <p class="text-xs text-blue-600 dark:text-blue-400">1 day ago</p>
      </div>
    </div>
    <div class="flex items-center space-x-4 py-3">
      <img class="h-10 w-10 rounded-full border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Dave avatar">
      <div class="flex-1 min-w-0">
        <p class="text-sm font-mono text-blue-800 dark:text-blue-200">
          <span class="font-bold">Dave</span> published a new post <a href="#" class="underline">A Retro Design Revival</a>
        </p>
        <p class="text-xs text-blue-600 dark:text-blue-400">2 days ago</p>
      </div>
    </div>
  </div>
</section>

1 ... 143 144 145 146 147 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント