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

<div class="container mx-auto p-4 dark:bg-gray-900">
  <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Filter Content</h2>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6 transform transition duration-500 hover:scale-105">
      <h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Categories</h3>
      <div class="space-y-3">
        <label class="flex items-center text-gray-600 dark:text-gray-300">
          <input type="checkbox" class="form-checkbox mr-2 text-blue-500 dark:text-blue-400">
          Technology
        </label>
        <label class="flex items-center text-gray-600 dark:text-gray-300">
          <input type="checkbox" class="form-checkbox mr-2 text-red-500 dark:text-red-400">
          Travel
        </label>
        <label class="flex items-center text-gray-600 dark:text-gray-300">
          <input type="checkbox" class="form-checkbox mr-2 text-green-500 dark:text-green-400">
          Food
        </label>
        <label class="flex items-center text-gray-600 dark:text-gray-300">
          <input type="checkbox" class="form-checkbox mr-2 text-yellow-500 dark:text-yellow-400">
          Lifestyle
        </label>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6 transform transition duration-500 hover:scale-105">
      <h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Tags</h3>
      <div class="flex flex-wrap gap-2">
        <span class="px-3 py-1 bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 rounded-full text-sm">AI</span>
        <span class="px-3 py-1 bg-red-200 dark:bg-red-700 text-red-800 dark:text-red-200 rounded-full text-sm">Adventure</span>
        <span class="px-3 py-1 bg-green-200 dark:bg-green-700 text-green-800 dark:text-green-200 rounded-full text-sm">Recipes</span>
        <span class="px-3 py-1 bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 rounded-full text-sm">Minimalism</span>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6 transform transition duration-500 hover:scale-105">
      <h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Date Range</h3>
      <div class="space-y-4">
        <div>
          <label for="start-date" class="block text-gray-600 dark:text-gray-300 mb-2">Start Date</label>
          <input type="date" id="start-date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-white">
        </div>
        <div>
          <label for="end-date" class="block text-gray-600 dark:text-gray-300 mb-2">End Date</label>
          <input type="date" id="end-date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-white">
        </div>
      </div>
    </div>
  </div>
  <div class="mt-8 text-center">
    <button class="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-full shadow-lg transform transition duration-300 hover:scale-110">Apply Filters</button>
  </div>
</div>