Published on

What You Need To Build A Filter & Reset With Tailwind CSS

Tags
AlpinejsDropdowns
filter & reset

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes to help you quickly build custom user interfaces. It is designed to be highly customizable and easy to use, allowing developers to create responsive and modern designs with minimal effort.

The description of filter & reset UI component

A filter & reset UI component is a common feature in many web applications that allows users to filter and sort data based on specific criteria. This component typically consists of a set of filter options and a reset button that clears all selected filters.

Why use Tailwind CSS to create a filter & reset UI component?

Tailwind CSS provides a set of pre-defined CSS classes that can be used to quickly build custom UI components, including filter & reset components. By using Tailwind CSS, developers can save time and effort by not having to write custom CSS code from scratch.

The preview of filter & reset UI component

To create a filter & reset UI component with Tailwind CSS, we can use a combination of pre-defined classes to style the component. The end result will be a clean and modern UI that is easy to use and understand.

Free download of the filter & reset's source code

The source code of filter & reset UI component

To create a filter & reset UI component with Tailwind CSS, we can use a combination of HTML and CSS code. The HTML code defines the structure of the component, while the CSS code defines the style and layout.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer">
<script src="https://unpkg.com/alpinejs" defer=""></script>
<style>
    body {
    background: white;}
</style>
<div class="filters">
  <div
    class="mx-auto flex  w-full justify-center pt-4 sm:max-w-[640px] md:max-w-[768px] lg:max-w-[1024px] xl:max-w-[1280px] 2xl:max-w-[1536px]"
  >
    <div
      x-data="filters()"
      @reset="reset = $event.detail.reset, filterCounter = 0"
    >
      <div class="flex flex-wrap items-center">
        <div class="flex items-start">
          <div
            class="mb-3"
            x-ref="myFilter"
            x-data="{
                              show: false,
                              counter: 0,
                              }
                              "
            @reset.window="counter = 0"
          >
            <button
              id="dropdownDefault"
              data-dropdown-toggle="dropdown"
              x-on:click="open"
              type="button"
              class="flex min-h-[3rem] items-center justify-between rounded-md bg-stone-100 px-4 py-2 text-stone-800"
            >
              Type
              <span
                x-show="counter"
                x-text="counter"
                class="bg-green-500 text-green-100 card-pills--counter ml-2 rounded-md px-2 py-1 text-sm"
                style="display: none"
                >0</span
              >
              <i
                class="fas fa-angle-down pl-3 text-stone-700 dark:text-stone-300"
              ></i>
            </button>
            <div
              x-show="isOpen()"
              x-on:click.away="close"
              class="w-46 shadow-stone-55 absolute z-10 divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg "
              data-popper-placement="bottom"
              style="display: none"
            >
              <ul
                class="text-gray-700"
                aria-labelledby="dropdownDefault"
              >
                <li
                  x-data="{ 
                                        checked: false
                                    }"
                  @reset.window="checked = false"
                >
                  <button
                    @click="count"
                    :class="checked ? 'text-green-500 bg-green-50' : ''"
                    class="group flex w-full items-center justify-between px-4 py-2 hover:bg-stone-500 hover:text-stone-300"
                  >
                    Phone calls
                    <i
                      :class="
                              checked ? 'text-green-400' : 'text-gray-600'
                            "
                      class="fas fa-check pl-4 group-hover:text-white text-gray-600"
                    ></i>
                  </button>
                </li>

                <li
                  x-data="{ 
                                        checked: false
                                    }"
                  @reset.window="checked = false"
                >
                  <button
                    @click="count"
                    :class="checked ? 'text-green-500 bg-green-50' : ''"
                    class="group flex w-full items-center justify-between px-4 py-2 hover:bg-stone-500 hover:text-stone-300"
                  >
                    Appointments
                    <i
                      :class="
                              checked ? 'text-green-400' : 'text-gray-600'
                            "
                      class="fas fa-check pl-4 group-hover:text-white text-gray-600"
                    ></i>
                  </button>
                </li>

                <li
                  x-data="{ 
                                        checked: false
                                    }"
                  @reset.window="checked = false"
                >
                  <button
                    @click="count"
                    :class="checked ? 'text-green-500 bg-green-50' : ''"
                    class="group flex w-full items-center justify-between px-4 py-2 hover:bg-stone-500 hover:text-stone-300"
                  >
                    Email
                    <i
                      :class="
                              checked ? 'text-green-400' : 'text-gray-600'
                            "
                      class="fas fa-check pl-4 group-hover:text-white text-gray-600"
                    ></i>
                  </button>
                </li>

                <li
                  x-data="{ 
                                        checked: false
                                    }"
                  @reset.window="checked = false"
                >
                  <button
                    @click="count"
                    :class="checked ? 'text-green-500 bg-green-50' : ''"
                    class="group flex w-full items-center justify-between px-4 py-2 hover:bg-stone-500 hover:text-stone-300"
                  >
                    Tasks
                    <i
                      :class="
                              checked ? 'text-green-400' : 'text-gray-600'
                            "
                      class="fas fa-check pl-4 group-hover:text-white text-gray-600"
                    ></i>
                  </button>
                </li>

                <li
                  x-data="{ 
                                        checked: false
                                    }"
                  @reset.window="checked = false"
                >
                  <button
                    @click="count"
                    :class="checked ? 'text-green-500 bg-green-50' : ''"
                    class="group flex w-full items-center justify-between px-4 py-2 hover:bg-stone-500 hover:text-stone-300"
                  >
                    Letters
                    <i
                      :class="
                              checked ? 'text-green-400' : 'text-gray-600'
                            "
                      class="fas fa-check pl-4 group-hover:text-white text-gray-600"
                    ></i>
                  </button>
                </li>

                <li
                  x-data="{ 
                                        checked: false
                                    }"
                  @reset.window="checked = false"
                >
                  <button
                    @click="count"
                    :class="checked ? 'text-green-500 bg-green-50' : ''"
                    class="group flex w-full items-center justify-between px-4 py-2 hover:bg-stone-500 hover:text-stone-300"
                  >
                    Campaign Response
                    <i
                      :class="
                              checked ? 'text-green-400' : 'text-gray-600'
                            "
                      class="fas fa-check pl-4 group-hover:text-white text-gray-600"
                    ></i>
                  </button>
                </li>
              </ul>
            </div>
          </div>

          

          <div
            class="ml-3 mb-3"
            x-ref="myFilter"
            x-data="{
                              show: false,
                              counter: 0,
                              }
                              "
            @reset.window="counter = 0"
          >
            <button
              id="dropdownDefault"
              data-dropdown-toggle="dropdown"
              x-on:click="open"
              type="button"
              class="flex min-h-[3rem] items-center justify-between rounded-md bg-stone-100 px-4 py-2 text-stone-800"
            >
              Status
              <span
                x-show="counter"
                x-text="counter"
                class="bg-green-500 text-green-100 card-pills--counter ml-2 rounded-md px-2 py-1 text-sm"
                style="display: none"
                >0</span
              >
              <i
                class="fas fa-angle-down pl-3 text-stone-700 dark:text-stone-300"
              ></i>
            </button>
            <div
              x-show="isOpen()"
              x-on:click.away="close"
              class="w-46 shadow-stone-55 absolute z-10 divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg "
              data-popper-placement="bottom"
              style="display: none"
            >
              <ul
                class="text-gray-700"
                aria-labelledby="dropdownDefault"
              >
                <li
                  x-data="{ 
                                        checked: false
                                    }"
                  @reset.window="checked = false"
                >
                  <button
                    @click="count"
                    :class="checked ? 'text-green-500 bg-green-50' : ''"
                    class="group flex w-full items-center justify-between px-4 py-2 hover:bg-stone-500 hover:text-stone-300"
                  >
                    Open
                    <i
                      :class="
                              checked ? 'text-green-400' : 'text-gray-600'
                            "
                      class="fas fa-check pl-4 group-hover:text-white text-gray-600"
                    ></i>
                  </button>
                </li>

                <li
                  x-data="{ 
                                        checked: false
                                    }"
                  @reset.window="checked = false"
                >
                  <button
                    @click="count"
                    :class="checked ? 'text-green-500 bg-green-50' : ''"
                    class="group flex w-full items-center justify-between px-4 py-2 hover:bg-stone-500 hover:text-stone-300"
                  >
                    Scheduled
                    <i
                      :class="
                              checked ? 'text-green-400' : 'text-gray-600'
                            "
                      class="fas fa-check pl-4 group-hover:text-white text-gray-600"
                    ></i>
                  </button>
                </li>

                <li
                  x-data="{ 
                                        checked: false
                                    }"
                  @reset.window="checked = false"
                >
                  <button
                    @click="count"
                    :class="checked ? 'text-green-500 bg-green-50' : ''"
                    class="group flex w-full items-center justify-between px-4 py-2 hover:bg-stone-500 hover:text-stone-300"
                  >
                    Completed
                    <i
                      :class="
                              checked ? 'text-green-400' : 'text-gray-600'
                            "
                      class="fas fa-check pl-4 group-hover:text-white text-gray-600"
                    ></i>
                  </button>
                </li>

                <li
                  x-data="{ 
                                        checked: false
                                    }"
                  @reset.window="checked = false"
                >
                  <button
                    @click="count"
                    :class="checked ? 'text-green-500 bg-green-50' : ''"
                    class="group flex w-full items-center justify-between px-4 py-2 hover:bg-stone-500 hover:text-stone-300"
                  >
                    Cancelled
                    <i
                      :class="
                              checked ? 'text-green-400' : 'text-gray-600'
                            "
                      class="fas fa-check pl-4 group-hover:text-white text-gray-600"
                    ></i>
                  </button>
                </li>
              </ul>
            </div>
          </div>

          <div
            class="ml-3 mb-3"
            x-ref="myFilter"
            x-data="{
                              show: false,
                              counter: 0,
                              }
                              "
            @reset.window="counter = 0"
          >
            <button
              id="dropdownDefault"
              data-dropdown-toggle="dropdown"
              x-on:click="open"
              type="button"
              class="flex min-h-[3rem] items-center justify-between rounded-md bg-stone-100 px-4 py-2 text-stone-800"
            >
              Stage
              <span
                x-show="counter"
                x-text="counter"
                class="bg-green-500 text-green-100 card-pills--counter ml-2 rounded-md px-2 py-1 text-sm"
                style="display: none"
                >0</span
              >
              <i
                class="fas fa-angle-down pl-3 text-stone-700 dark:text-stone-300"
              ></i>
            </button>
            <div
              x-show="isOpen()"
              x-on:click.away="close"
              class="w-46 shadow-stone-55 absolute z-10 divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg "
              data-popper-placement="bottom"
              style="display: none"
            >
              <ul
                class="text-gray-700"
                aria-labelledby="dropdownDefault"
              >
                <li
                  x-data="{ 
                                        checked: false
                                    }"
                  @reset.window="checked = false"
                >
                  <button
                    @click="count"
                    :class="checked ? 'text-green-500 bg-green-50' : ''"
                    class="group flex w-full items-center justify-between px-4 py-2 hover:bg-stone-500 hover:text-stone-300"
                  >
                    1. Target
                    <i
                      :class="
                              checked ? 'text-green-400' : 'text-gray-600'
                            "
                      class="fas fa-check pl-4 group-hover:text-white text-gray-600"
                    ></i>
                  </button>
                </li>

                <li
                  x-data="{ 
                                        checked: false
                                    }"
                  @reset.window="checked = false"
                >
                  <button
                    @click="count"
                    :class="checked ? 'text-green-500 bg-green-50' : ''"
                    class="group flex w-full items-center justify-between px-4 py-2 hover:bg-stone-500 hover:text-stone-300"
                  >
                    2. Pitch
                    <i
                      :class="
                              checked ? 'text-green-400' : 'text-gray-600'
                            "
                      class="fas fa-check pl-4 group-hover:text-white text-gray-600"
                    ></i>
                  </button>
                </li>

                <li
                  x-data="{ 
                                        checked: false
                                    }"
                  @reset.window="checked = false"
                >
                  <button
                    @click="count"
                    :class="checked ? 'text-green-500 bg-green-50' : ''"
                    class="group flex w-full items-center justify-between px-4 py-2 hover:bg-stone-500 hover:text-stone-300"
                  >
                    3. Follow up
                    <i
                      :class="
                              checked ? 'text-green-400' : 'text-gray-600'
                            "
                      class="fas fa-check pl-4 group-hover:text-white text-gray-600"
                    ></i>
                  </button>
                </li>

                <li
                  x-data="{ 
                                        checked: false
                                    }"
                  @reset.window="checked = false"
                >
                  <button
                    @click="count"
                    :class="checked ? 'text-green-500 bg-green-50' : ''"
                    class="group flex w-full items-center justify-between px-4 py-2 hover:bg-stone-500 hover:text-stone-300"
                  >
                    4. Prospect
                    <i
                      :class="
                              checked ? 'text-green-400' : 'text-gray-600'
                            "
                      class="fas fa-check pl-4 group-hover:text-white text-gray-600"
                    ></i>
                  </button>
                </li>

                <li
                  x-data="{ 
                                        checked: false
                                    }"
                  @reset.window="checked = false"
                >
                  <button
                    @click="count"
                    :class="checked ? 'text-green-500 bg-green-50' : ''"
                    class="group flex w-full items-center justify-between px-4 py-2 hover:bg-stone-500 hover:text-stone-300"
                  >
                    5. Account Opening
                    <i
                      :class="
                              checked ? 'text-green-400' : 'text-gray-600'
                            "
                      class="fas fa-check pl-4 group-hover:text-white text-gray-600"
                    ></i>
                  </button>
                </li>

                <li
                  x-data="{ 
                                        checked: false
                                    }"
                  @reset.window="checked = false"
                >
                  <button
                    @click="count"
                    :class="checked ? 'text-green-500 bg-green-50' : ''"
                    class="group flex w-full items-center justify-between px-4 py-2 hover:bg-stone-500 hover:text-stone-300"
                  >
                    6. Closing
                    <i
                      :class="
                              checked ? 'text-green-400' : 'text-gray-600'
                            "
                      class="fas fa-check pl-4 group-hover:text-white text-gray-600"
                    ></i>
                  </button>
                </li>
              </ul>
            </div>
          </div>

          <div
            class="ml-3 mb-3"
            x-ref="myFilter"
            x-data="{
                              show: false,
                              counter: 0,
                              }
                              "
            @reset.window="counter = 0"
          >
            <button
              id="dropdownDefault"
              data-dropdown-toggle="dropdown"
              x-on:click="open"
              type="button"
              class="flex min-h-[3rem] items-center justify-between rounded-md bg-stone-100 px-4 py-2 text-stone-800"
            >
              Contact Type
              <span
                x-show="counter"
                x-text="counter"
                class="bg-green-500 text-green-100 card-pills--counter ml-2 rounded-md px-2 py-1 text-sm"
                style="display: none"
                >0</span
              >
              <i
                class="fas fa-angle-down pl-3 text-stone-700 dark:text-stone-300"
              ></i>
            </button>
            <div
              x-show="isOpen()"
              x-on:click.away="close"
              class="w-46 shadow-stone-55 absolute z-10 divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg "
              data-popper-placement="bottom"
              style="display: none"
            >
              <ul
                class="text-gray-700"
                aria-labelledby="dropdownDefault"
              >
                <li
                  x-data="{ 
                                        checked: false
                                    }"
                  @reset.window="checked = false"
                >
                  <button
                    @click="count"
                    :class="checked ? 'text-green-500 bg-green-50' : ''"
                    class="group flex w-full items-center justify-between px-4 py-2 hover:bg-stone-500 hover:text-stone-300"
                  >
                    value 1
                    <i
                      :class="
                              checked ? 'text-green-400' : 'text-gray-600'
                            "
                      class="fas fa-check pl-4 group-hover:text-white text-gray-600"
                    ></i>
                  </button>
                </li>

                <li
                  x-data="{ 
                                        checked: false
                                    }"
                  @reset.window="checked = false"
                >
                  <button
                    @click="count"
                    :class="checked ? 'text-green-500 bg-green-50' : ''"
                    class="group flex w-full items-center justify-between px-4 py-2 hover:bg-stone-500 hover:text-stone-300"
                  >
                    value 2
                    <i
                      :class="
                              checked ? 'text-green-400' : 'text-gray-600'
                            "
                      class="fas fa-check pl-4 group-hover:text-white text-gray-600"
                    ></i>
                  </button>
                </li>
              </ul>
            </div>
          </div>

          <div>
            <button
              @click="$dispatch( 'reset', { reset : !reset } )"
              x-show="filterCounter"
              class="mb-3 ml-4 flex min-h-[3rem] items-center justify-between rounded-md bg-stone-500 px-4 py-2 text-stone-50"
              style="display: none"
            >
              <i class="fas fa-times pr-2 group-hover:text-white"></i>
              Reset
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    function filters() {
      return {
        filterCounter: 0,
        reset: false,
        resetCounter: false,
        open() {
          this.show = true;
        },
        close() {
          this.show = false;
        },

        isOpen() {
          return this.show === true;
        },

        count() {
          this.show = false;
          this.checked = !this.checked;
          if (this.checked) {
            this.counter = this.counter + 1;
            this.filterCounter = this.filterCounter + 1;
          } else if (!this.checked) {
            this.counter = this.counter - 1;
            this.filterCounter = this.filterCounter - 1;
          }
        },
      };
    }
  </script>
</div>

How to create a filter & reset with Tailwind CSS?

To create a filter & reset UI component with Tailwind CSS, we can follow these steps:

Step 1: Define the HTML structure

The first step is to define the HTML structure of the filter & reset component. This can be done using standard HTML tags and classes from Tailwind CSS.

<div class="flex justify-between items-center bg-gray-100 p-4">
  <div class="flex items-center">
    <label class="mr-2">Filter:</label>
    <select class="border border-gray-400 rounded-md px-2 py-1">
      <option value="">All</option>
      <option value="active">Active</option>
      <option value="completed">Completed</option>
    </select>
  </div>
  <button class="bg-gray-300 hover:bg-gray-400 text-white font-bold py-2 px-4 rounded">
    Reset
  </button>
</div>

In this example, we have created a container div with a gray background and padding. Inside the container, we have two child divs that are aligned using the flex and justify-between classes. The first child div contains a label and a select element, while the second child div contains a button.

Step 2: Define the CSS styles

The next step is to define the CSS styles for the filter & reset component. This can be done using Tailwind CSS classes or custom CSS code.

<style>
  .bg-gray-100 {
    background-color: #f5f5f5;
  }
  .border-gray-400 {
    border-color: #cbd5e0;
  }
  .rounded-md {
    border-radius: 0.375rem;
  }
  .px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .bg-gray-300 {
    background-color: #a0aec0;
  }
  .hover\:bg-gray-400:hover {
    background-color: #718096;
  }
  .text-white {
    color: #fff;
  }
  .font-bold {
    font-weight: 700;
  }
  .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .rounded {
    border-radius: 0.25rem;
  }
</style>

In this example, we have defined custom CSS styles for the background color, border color, padding, font weight, and border radius of the filter & reset component. We have also used Tailwind CSS classes for padding, background color, and font weight.

Step 3: Add interactivity with JavaScript

The final step is to add interactivity to the filter & reset component using JavaScript. This can be done using standard JavaScript code or a JavaScript framework like React or Vue.

<script>
  const select = document.querySelector('select');
  const button = document.querySelector('button');

  select.addEventListener('change', () => {
    // filter data based on selected option
  });

  button.addEventListener('click', () => {
    // reset filter data
  });
</script>

In this example, we have added event listeners to the select and button elements to handle changes and clicks. We can use these event listeners to filter and reset data based on user input.

Conclusion

In conclusion, Tailwind CSS is a powerful and flexible CSS framework that can be used to quickly build custom UI components like filter & reset components. By following the steps outlined in this article, developers can create clean and modern UIs that are easy to use and understand. With Tailwind CSS, the possibilities are endless!