フィルター コンポーネント
ポートフォリオに適した、「フォレスト/グリーンパレット」と「グラデーション/カラートランジション」のデザインスタイルを備えた、複雑でレスポンシブなフィルターコンポーネント。ダークモードのサポートとインタラクティブな要素が含まれています。
HTMLコード
<div class="p-4 sm:p-8 bg-gradient-to-br from-green-50 to-emerald-100 dark:from-gray-900 dark:to-green-950 min-h-screen font-sans text-gray-800 dark:text-gray-200 transition-colors duration-500">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden p-6 sm:p-10 border border-green-200 dark:border-green-700 transition-all duration-500">
<h2 class="text-3xl sm:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-green-800 dark:from-emerald-400 dark:to-green-600 mb-8 sm:mb-10 text-center">
Browse Our Portfolio
</h2>
<!-- Filter Controls Section -->
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-10">
<!-- Category Filter -->
<div class="relative group">
<label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Category</label>
<select id="category" class="block w-full px-4 py-3 border border-green-300 dark:border-green-700 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-600 focus:border-emerald-500 dark:focus:border-green-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 appearance-none transition-all duration-300 ease-in-out
bg-no-repeat bg-right-center pr-10 cursor-pointer
bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"%3e%3cpath 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"%3e%3c/path%3e%3c/svg%3e')] dark:bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"%3e%3cpath 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"%3e%3c/path%3e%3c/svg%3e')] ">
<option value="all" class="text-gray-700 dark:text-gray-300">All Categories</option>
<option value="web-design" class="text-gray-700 dark:text-gray-300">Web Design</option>
<option value="branding" class="text-gray-700 dark:text-gray-300">Branding</option>
<option value="marketing" class="text-gray-700 dark:text-gray-300">Marketing</option>
<option value="photography" class="text-gray-700 dark:text-gray-300">Photography</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
<svg class="h-5 w-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<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>
</div>
</div>
<!-- Sort By Filter -->
<div class="relative group">
<label for="sortby" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Sort By</label>
<select id="sortby" class="block w-full px-4 py-3 border border-green-300 dark:border-green-700 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-600 focus:border-emerald-500 dark:focus:border-green-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 appearance-none transition-all duration-300 ease-in-out
bg-no-repeat bg-right-center pr-10 cursor-pointer
bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"%3e%3cpath 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"%3e%3c/path%3e%3c/svg%3e')] dark:bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"%3e%3cpath 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"%3e%3c/path%3e%3c/svg%3e')] ">
<option value="newest" class="text-gray-700 dark:text-gray-300">Newest</option>
<option value="oldest" class="text-gray-700 dark:text-gray-300">Oldest</option>
<option value="popular" class="text-gray-700 dark:text-gray-300">Most Popular</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
<svg class="h-5 w-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<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>
</div>
</div>
<!-- Search Input -->
<div class="relative col-span-full md:col-span-1 lg:col-span-2関連コンポーネント
BrutalistFiltersコンポーネント
ブルータリズムスタイルのフィルターコンポーネントで、高コントラスト、大胆なタイポグラフィ、珍しいスペースが特徴です。これには、チェックボックス、ラジオボタン、価格帯スライダーが含まれています。レスポンシブ効果は、メディアクエリと流体ユニットによって実現されます。ダークモードはCSSでサポートされています。
フィルター コンポーネント
Glassmorphism と Analogous カラースキームで設計された洗練されたフィルターコンポーネントで、ダークテーマをサポートするダッシュボードデータの視覚化に適しています。