Tailwind CSS Simple Filter

<div class="flex flex-col">
  <h2 class="text-xl font-bold mb-4 text-stone-600">
    TailwindCSS Simple Filter
  </h2>

  <div class="bg-white p-6 rounded-xl shadow-lg">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
      <div class="flex flex-col">
        <label for="name" class="font-medium text-sm text-stone-600">Name</label>
        <input
          type="text"
          id="name"
          placeholder="john doe"
          class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-300 focus:ring focus:ring-orange-200 focus:ring-opacity-50"
        >
      </div>

      <div class="flex flex-col">
        <label for="email" class="font-medium text-sm text-stone-600">Email</label>
        <input
          type="email"
          id="email"
          placeholder="[email protected]"
          class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-300 focus:ring focus:ring-orange-200 focus:ring-opacity-50"
        >
      </div>

      <div class="flex flex-col">
        <label for="date" class="font-medium text-sm text-stone-600">Published Date</label>
        <input
          type="date"
          id="date"
          class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-300 focus:ring focus:ring-orange-200 focus:ring-opacity-50"
        >
      </div>

      <div class="flex flex-col">
        <label for="status" class="font-medium text-sm text-stone-600">Status</label>

        <select
          id="status"
          class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-300 focus:ring focus:ring-orange-200 focus:ring-opacity-50"
        >
          <option>Active</option>
          <option>Pending</option>
          <option>Deleted</option>
        </select>
      </div>
    </div>

    <div class="grid md:flex grid-cols-2 justify-end space-x-4 w-full mt-6">
      <button class="px-4 py-2 rounded-lg text-stone-50 bg-stone-400 hover:bg-stone-500 font-bold text-white shadow-lg shadow-stone-200 transition ease-in-out duration-200 translate-10">
        Reset
      </button>

      <button class="px-4 py-2 rounded-lg text-orange-50 bg-orange-400 hover:bg-orange-500 font-bold text-white shadow-lg shadow-orange-200 transition ease-in-out duration-200 translate-10">
        Search
      </button>
    </div>
  </div>
</div>

<div class="flex flex-col">
  <h2 class="text-xl font-bold mb-4 text-stone-600">
    TailwindCSS Simple Filter
  </h2>

  <div class="bg-white p-6 rounded-xl shadow-lg">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
      <div class="flex flex-col">
        <label for="name" class="font-medium text-sm text-stone-600">Name</label>
        <input
          type="text"
          id="name"
          placeholder="john doe"
          class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-300 focus:ring focus:ring-orange-200 focus:ring-opacity-50"
        >
      </div>

      <div class="flex flex-col">
        <label for="email" class="font-medium text-sm text-stone-600">Email</label>
        <input
          type="email"
          id="email"
          placeholder="johndoe@example.com"
          class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-300 focus:ring focus:ring-orange-200 focus:ring-opacity-50"
        >
      </div>

      <div class="flex flex-col">
        <label for="date" class="font-medium text-sm text-stone-600">Published Date</label>
        <input
          type="date"
          id="date"
          class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-300 focus:ring focus:ring-orange-200 focus:ring-opacity-50"
        >
      </div>

      <div class="flex flex-col">
        <label for="status" class="font-medium text-sm text-stone-600">Status</label>

        <select
          id="status"
          class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-300 focus:ring focus:ring-orange-200 focus:ring-opacity-50"
        >
          <option>Active</option>
          <option>Pending</option>
          <option>Deleted</option>
        </select>
      </div>
    </div>

    <div class="grid md:flex grid-cols-2 justify-end space-x-4 w-full mt-6">
      <button class="px-4 py-2 rounded-lg text-stone-50 bg-stone-400 hover:bg-stone-500 font-bold text-white shadow-lg shadow-stone-200 transition ease-in-out duration-200 translate-10">
        Reset
      </button>

      <button class="px-4 py-2 rounded-lg text-orange-50 bg-orange-400 hover:bg-orange-500 font-bold text-white shadow-lg shadow-orange-200 transition ease-in-out duration-200 translate-10">
        Search
      </button>
    </div>
  </div>
</div>

Tailwind CSS simple filter component with text input, email input, date input and select input

[email protected] 2847 views

How to install and add to your project?

Step 1: Include Scripts and Styling CDN inside the head tag

<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

Step 2: Copy the Tailwind CSS Simple Filter component code above as you need it

Step 3: Preview the component in your browser 🚀

Step 4: For production release make sure to use the official Tailwind CSS Installation

You are done 🎉

Credits or Attribution

If you enjoy using our components, please do give us (PostSrc) credit in your project footer section or about page. Copy the HTML below for attribution.

<a href="https://postsrc.com/components" target="_blank" rel="noopener" title="PostSrc Components - Collection of Tailwind CSS components for everyone to use"><img style="width: auto; height: 46px;" src="https://postsrc.com/img/attr.png" alt="PostSrc logo"></a>

Share this component

Sponsors 👑

+ Add Yours