Tailwind CSS React Search Bar

        
            
      import React from 'react';
      import { TERipple } from 'tw-elements-react';
      
      export default function SearchBasicExample(): JSX.Element {
          return (
                  <div className="mb-3 md:w-96">
                      <div className="relative mb-4 flex w-full flex-wrap items-stretch">
                          <input
                              type="search"
                              className="relative m-0 -mr-0.5 block w-[1px] min-w-0 flex-auto rounded-l border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:focus:border-primary"
                              placeholder="Search"
                              aria-label="Search"
                              aria-describedby="button-addon1" />
      
                          {/* <!--Search button--> */}
                          <TERipple color='light'>
                          <button
                              className="relative z-[2] flex items-center rounded-r bg-primary px-6 py-2.5 text-xs font-medium uppercase leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
                              type="button"
                              id="button-addon1">
                              <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 20"
                                  fill="currentColor"
                                  className="h-5 w-5">
                                  <path
                                      fillRule="evenodd"
                                      d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
                                      clipRule="evenodd" />
                              </svg>
                          </button>
                          </TERipple>
                      </div>
                  </div>
          );
      }
      
        
    

        
            
      import React from 'react';

      export default function App() {
        return (
            <div className="mb-3 xl:w-96">
                <div className="relative mb-4 flex w-full flex-wrap items-stretch">
                    <input
                        type="search"
                        className="relative m-0 block flex-auto rounded border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:focus:border-primary"
                        placeholder="Search"
                        aria-label="Search"
                        aria-describedby="button-addon2" />

                    {/* <!--Search icon--> */}
                    <span
                        className="input-group-text flex items-center whitespace-nowrap rounded px-3 py-1.5 text-center text-base font-normal text-neutral-700 dark:text-neutral-200"
                        id="basic-addon2">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 20 20"
                            fill="currentColor"
                            className="h-5 w-5">
                            <path
                                fillRule="evenodd"
                                d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
                                clipRule="evenodd" />
                        </svg>
                    </span>
                </div>
            </div>
        );
      }

      
        
    

        
            
      import React from 'react';
      import { TERipple } from 'tw-elements-react';
      
      export default function SearchWithButtonExample(): JSX.Element {
          return (
                  <div className="mb-3 md:w-96 mx-auto">
                      <div className="relative mb-4 flex w-full flex-wrap items-stretch">
                          <input
                              type="search"
                              className="relative m-0 -mr-0.5 block w-[1px] min-w-0 flex-auto rounded-l border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:focus:border-primary"
                              placeholder="Search"
                              aria-label="Search"
                              aria-describedby="button-addon3" />
      
                          {/* <!--Search button--> */}
                          <TERipple>
                          <button
                              className="relative z-[2] rounded-r border-2 border-primary px-6 py-2 text-xs font-medium uppercase text-primary transition duration-150 ease-in-out hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0"
                              type="button"
                              id="button-addon3">
                              Search
                          </button>
                          </TERipple>
                      </div>
                  </div>
          );
      }
      
        
    

        
            
      import React from 'react';

      export default function App() {
        return (            
            <div className="mb-3 xl:w-96">
            <input
                type="search"
                className="relative m-0 block w-full min-w-0 flex-auto rounded border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:focus:border-primary"
                id="exampleSearch"
                placeholder="Type query" />
        </div>
        );
      }

      
        
    

        
            
      import React from 'react';
      import { TEInput } from 'tw-elements-react';
      
      export default function SearchWithLabelExample(): JSX.Element {
          return (
                  <div className="relative mb-3 md:w-96 mx-auto">
                      <TEInput
                          type="search"
                          label="Type query"
                      ></TEInput>
                  </div>
          );
      }