Skip to content

Instantly share code, notes, and snippets.

@Ciantic

Ciantic/tailwind-daisyui-expanding-search.html

Last active September 29, 2025 12:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Ciantic/893ca9e7f77116c151c681affbc6a78b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Ciantic/893ca9e7f77116c151c681affbc6a78b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Ciantic revised this gist Sep 29, 2025. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion tailwind-daisyui-expanding-search.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    <form className="inline-flex input pl-[2.5em] pr-0 w-0 has-[input:not(:placeholder-shown)]:w-[250px] focus-within:w-[250px] has-[input:not(:placeholder-shown)]:[&_.btn]:block transition-[width] duration-300 ease-in-out has-[input:not(:placeholder-shown)]:border-1 border-0 shadow-none" method="GET" action="/search">
    <form className="inline-flex input pl-[2.5em] pr-0 w-0 has-[input:not(:placeholder-shown)]:w-[250px] focus-within:w-[250px] has-[input:not(:placeholder-shown)]:[&_.btn]:block transition-[width] duration-300 ease-in-out has-[input:placeholder-shown]:border-transparent has-[input:placeholder-shown]:shadow-none" method="GET" action="/search">
    <label className="overflow-hidden flex-1">
    <div className="h-[100%] w-[2.5em] absolute left-0 top-0 cursor-text">
    <svg
  2. Ciantic revised this gist Sep 29, 2025. 1 changed file with 0 additions and 27 deletions.
    27 changes: 0 additions & 27 deletions tailwind-daisyui-expanding-search-rounded.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,27 +0,0 @@
    <form className="group input pl-[2.5em] pr-0 w-0 has-[input:not(:placeholder-shown)]:w-[250px] focus-within:w-[250px] has-[input:not(:placeholder-shown)]:[&_.btn]:block transition-[width] duration-300 ease-in-out has-[input:not(:placeholder-shown)]:border-1 rounded-3xl border-0 shadow-none" method="GET" action="/search">
    <label className="overflow-hidden">
    <div className="h-[100%] w-[2.5em] absolute left-0 top-0 cursor-text">
    <svg
    aria-hidden="true"
    className="h-[1em] w-[1em] absolute left-[0.2em] top-1/2 -translate-y-1/2 ml-2"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    >
    <g
    stroke-linejoin="round"
    stroke-linecap="round"
    stroke-width="2.5"
    fill="none"
    stroke="currentColor"
    >
    <circle cx="11" cy="11" r="8"></circle>
    <path d="m21 21-4.3-4.3"></path>
    </g>
    </svg>
    </div>
    <input name="q" type="search" required aria-label="Search from site" placeholder="Search" pattern=".{3,}" title="Must be at least 3 characters long" />
    </label>
    <button className="btn btn-sm btn-secondary rounded-2xl mr-[0.3em] hidden">
    Search
    </button>
    </form>
  3. Ciantic revised this gist Sep 28, 2025. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions tailwind-daisyui-expanding-search.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    <form className="inline-flex input pl-[2.5em] pr-0 w-0 has-[input:not(:placeholder-shown)]:w-[250px] focus-within:w-[250px] has-[input:not(:placeholder-shown)]:[&_.btn]:block transition-[width] duration-300 ease-in-out has-[input:not(:placeholder-shown)]:border-1 rounded-3xl border-0 shadow-none" method="GET" action="/search">
    <form className="inline-flex input pl-[2.5em] pr-0 w-0 has-[input:not(:placeholder-shown)]:w-[250px] focus-within:w-[250px] has-[input:not(:placeholder-shown)]:[&_.btn]:block transition-[width] duration-300 ease-in-out has-[input:not(:placeholder-shown)]:border-1 border-0 shadow-none" method="GET" action="/search">
    <label className="overflow-hidden flex-1">
    <div className="h-[100%] w-[2.5em] absolute left-0 top-0 cursor-text">
    <svg
    @@ -21,7 +21,7 @@
    </div>
    <input name="q" type="search" required aria-label="Search from site" placeholder="Search" pattern=".{3,}" title="Must be at least 3 characters long" />
    </label>
    <button className="btn btn-sm btn-secondary rounded-2xl mr-[0.3em] hidden">
    <button className="btn btn-sm btn-secondary mr-[0.3em] hidden">
    Search
    </button>
    </form>
  4. Ciantic revised this gist Sep 28, 2025. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions tailwind-daisyui-expanding-search.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    <form className="input pl-[2.5em] pr-0 w-0 has-[input:not(:placeholder-shown)]:w-[250px] focus-within:w-[250px] has-[input:not(:placeholder-shown)]:[&_.btn]:block transition-all duration-300 ease-in-out" method="GET" action="/search">
    <label className="overflow-hidden">
    <form className="inline-flex input pl-[2.5em] pr-0 w-0 has-[input:not(:placeholder-shown)]:w-[250px] focus-within:w-[250px] has-[input:not(:placeholder-shown)]:[&_.btn]:block transition-[width] duration-300 ease-in-out has-[input:not(:placeholder-shown)]:border-1 rounded-3xl border-0 shadow-none" method="GET" action="/search">
    <label className="overflow-hidden flex-1">
    <div className="h-[100%] w-[2.5em] absolute left-0 top-0 cursor-text">
    <svg
    aria-hidden="true"
    @@ -21,7 +21,7 @@
    </div>
    <input name="q" type="search" required aria-label="Search from site" placeholder="Search" pattern=".{3,}" title="Must be at least 3 characters long" />
    </label>
    <button className="btn btn-sm btn-secondary mr-[0.3em] hidden">
    <button className="btn btn-sm btn-secondary rounded-2xl mr-[0.3em] hidden">
    Search
    </button>
    </form>
  5. Ciantic revised this gist Sep 28, 2025. 1 changed file with 27 additions and 0 deletions.
    27 changes: 27 additions & 0 deletions tailwind-daisyui-expanding-search-rounded.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    <form className="group input pl-[2.5em] pr-0 w-0 has-[input:not(:placeholder-shown)]:w-[250px] focus-within:w-[250px] has-[input:not(:placeholder-shown)]:[&_.btn]:block transition-[width] duration-300 ease-in-out has-[input:not(:placeholder-shown)]:border-1 rounded-3xl border-0 shadow-none" method="GET" action="/search">
    <label className="overflow-hidden">
    <div className="h-[100%] w-[2.5em] absolute left-0 top-0 cursor-text">
    <svg
    aria-hidden="true"
    className="h-[1em] w-[1em] absolute left-[0.2em] top-1/2 -translate-y-1/2 ml-2"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    >
    <g
    stroke-linejoin="round"
    stroke-linecap="round"
    stroke-width="2.5"
    fill="none"
    stroke="currentColor"
    >
    <circle cx="11" cy="11" r="8"></circle>
    <path d="m21 21-4.3-4.3"></path>
    </g>
    </svg>
    </div>
    <input name="q" type="search" required aria-label="Search from site" placeholder="Search" pattern=".{3,}" title="Must be at least 3 characters long" />
    </label>
    <button className="btn btn-sm btn-secondary rounded-2xl mr-[0.3em] hidden">
    Search
    </button>
    </form>
  6. Ciantic revised this gist Sep 28, 2025. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion tailwind-daisyui-expanding-search.html
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,7 @@
    </g>
    </svg>
    </div>
    <input name="q" type="search" required aria-label="Search from site" placeholder="Search" />
    <input name="q" type="search" required aria-label="Search from site" placeholder="Search" pattern=".{3,}" title="Must be at least 3 characters long" />
    </label>
    <button className="btn btn-sm btn-secondary mr-[0.3em] hidden">
    Search
  7. Ciantic revised this gist Sep 28, 2025. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions tailwind-daisyui-expanding-search.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,8 @@
    <form className="input pl-[2.5em] pr-0 w-0 has-[input:not(:placeholder-shown)]:w-[250px] focus-within:w-[250px] has-[input:not(:placeholder-shown)]:[&_.btn]:block transition-all duration-300 ease-in-out" method="GET" action="/search">
    <label aria-label="Search term" className="overflow-hidden">
    <label className="overflow-hidden">
    <div className="h-[100%] w-[2.5em] absolute left-0 top-0 cursor-text">
    <svg
    aria-label="Search"
    aria-hidden="true"
    className="h-[1em] w-[1em] absolute left-[0.2em] top-1/2 -translate-y-1/2 ml-2"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    @@ -19,7 +19,7 @@
    </g>
    </svg>
    </div>
    <input name="q" type="search" required placeholder="Search" />
    <input name="q" type="search" required aria-label="Search from site" placeholder="Search" />
    </label>
    <button className="btn btn-sm btn-secondary mr-[0.3em] hidden">
    Search
  8. Ciantic revised this gist Sep 28, 2025. 1 changed file with 25 additions and 27 deletions.
    52 changes: 25 additions & 27 deletions tailwind-daisyui-expanding-search.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,29 +1,27 @@
    <form className="inline-block relative" method="GET" action="/search">
    <div className="input pl-[2.5em] pr-0 w-0 has-[input:not(:placeholder-shown)]:w-[250px] focus-within:w-[250px] has-[input:not(:placeholder-shown)]:[&_.btn]:block transition-all duration-300 ease-in-out">
    <label aria-label="Search term" className="overflow-hidden">
    <div className="h-[100%] w-[2.5em] absolute left-0 top-0 cursor-text">
    <svg
    aria-label="Search"
    className="h-[1em] w-[1em] absolute left-[0.2em] top-1/2 -translate-y-1/2 ml-2"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    <form className="input pl-[2.5em] pr-0 w-0 has-[input:not(:placeholder-shown)]:w-[250px] focus-within:w-[250px] has-[input:not(:placeholder-shown)]:[&_.btn]:block transition-all duration-300 ease-in-out" method="GET" action="/search">
    <label aria-label="Search term" className="overflow-hidden">
    <div className="h-[100%] w-[2.5em] absolute left-0 top-0 cursor-text">
    <svg
    aria-label="Search"
    className="h-[1em] w-[1em] absolute left-[0.2em] top-1/2 -translate-y-1/2 ml-2"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    >
    <g
    stroke-linejoin="round"
    stroke-linecap="round"
    stroke-width="2.5"
    fill="none"
    stroke="currentColor"
    >
    <g
    stroke-linejoin="round"
    stroke-linecap="round"
    stroke-width="2.5"
    fill="none"
    stroke="currentColor"
    >
    <circle cx="11" cy="11" r="8"></circle>
    <path d="m21 21-4.3-4.3"></path>
    </g>
    </svg>
    </div>
    <input name="q" type="search" required placeholder="Search" />
    </label>
    <button className="btn btn-sm btn-secondary mr-[0.3em] hidden">
    Search
    </button>
    </div>
    <circle cx="11" cy="11" r="8"></circle>
    <path d="m21 21-4.3-4.3"></path>
    </g>
    </svg>
    </div>
    <input name="q" type="search" required placeholder="Search" />
    </label>
    <button className="btn btn-sm btn-secondary mr-[0.3em] hidden">
    Search
    </button>
    </form>
  9. Ciantic created this gist Sep 28, 2025.
    29 changes: 29 additions & 0 deletions tailwind-daisyui-expanding-search.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    <form className="inline-block relative" method="GET" action="/search">
    <div className="input pl-[2.5em] pr-0 w-0 has-[input:not(:placeholder-shown)]:w-[250px] focus-within:w-[250px] has-[input:not(:placeholder-shown)]:[&_.btn]:block transition-all duration-300 ease-in-out">
    <label aria-label="Search term" className="overflow-hidden">
    <div className="h-[100%] w-[2.5em] absolute left-0 top-0 cursor-text">
    <svg
    aria-label="Search"
    className="h-[1em] w-[1em] absolute left-[0.2em] top-1/2 -translate-y-1/2 ml-2"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    >
    <g
    stroke-linejoin="round"
    stroke-linecap="round"
    stroke-width="2.5"
    fill="none"
    stroke="currentColor"
    >
    <circle cx="11" cy="11" r="8"></circle>
    <path d="m21 21-4.3-4.3"></path>
    </g>
    </svg>
    </div>
    <input name="q" type="search" required placeholder="Search" />
    </label>
    <button className="btn btn-sm btn-secondary mr-[0.3em] hidden">
    Search
    </button>
    </div>
    </form>