galaxy/Inputs/siraj-ha_serious-moose-70.html

<div class="search-bar-container">
  <form action="">
    <div class="search-container">
      <span class="search-icon">
        <svg
          height="24"
          width="24"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
            fill="currentColor"
          ></path>
          <path d="M0 0h24v24H0z" fill="none"></path>
        </svg>
      </span>

      <input type="search" class="search-input" placeholder="Search..." />
      <span class="filter-icon">
        <span class="filter-icon">
          <svg
            height="24"
            width="24"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3 4.6C3 4.03995 3 3.75992 3.10899 3.54601C3.20487 3.35785 3.35785 3.20487 3.54601 3.10899C3.75992 3 4.03995 3 4.6 3H19.4C19.9601 3 20.2401 3 20.454 3.10899C20.6422 3.20487 20.7951 3.35785 20.891 3.54601C21 3.75992 21 4.03995 21 4.6V6.33726C21 6.58185 21 6.70414 20.9724 6.81923C20.9479 6.92127 20.9075 7.01881 20.8526 7.10828C20.7908 7.2092 20.7043 7.29568 20.5314 7.46863L14.4686 13.5314C14.2957 13.7043 14.2092 13.7908 14.1474 13.8917C14.0925 13.9812 14.0521 14.0787 14.0276 14.1808C14 14.2959 14 14.4182 14 14.6627V17L10 21V14.6627C10 14.4182 10 14.2959 9.97237 14.1808C9.94787 14.0787 9.90747 13.9812 9.85264 13.8917C9.7908 13.7908 9.70432 13.7043 9.53137 13.5314L3.46863 7.46863C3.29568 7.29568 3.2092 7.2092 3.14736 7.10828C3.09253 7.01881 3.05213 6.92127 3.02763 6.81923C3 6.70414 3 6.58185 3 6.33726V4.6Z"
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke-width="2"
              stroke="#ffffff"
              fill="#000000"
            ></path>
          </svg>
        </span>
      </span>
    </div>
  </form>
</div>

<style>
/* From Uiverse.io by siraj-ha  - Tags: input */
.search-bar-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-container {
  border-radius: 15px;
  max-width: max-content;
  margin: 100px auto;
  position: relative;
  display: flex;
  align-items: center;
  background: #000;
  box-shadow: 5px 5px 10px rgba(108, 110, 255, 0.8),
    -5px -5px 10px rgba(255, 89, 233, 0.8);
}

.search-input {
  flex: 1;
  margin: 10px 0;
  padding: 10px 20px;
  border-radius: 30px;
  border: none;
  outline: none;
  background-color: #000000;
  color: white;
  font-size: 16px;
}

.search-input::placeholder {
  color: #888;
}

.material-symbols-outlined {
  color: white;
  cursor: pointer;
}

.search-icon,
.filter-icon {
  margin: 0 10px;
}

.search-icon {
  color: white;
  padding: 0 0 0 10px;
}

.filter-icon {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid white;
  border-radius: 10px;
  margin-left: 10px;
  box-sizing: border-box;
  font-size: 24px;
  line-height: 1;
  box-shadow: inset 0 0 10px rgba(158, 202, 237, 0.5);
  padding: 5px;
}

.search-container:hover {
  box-shadow: 10px 10px 20px rgba(108, 110, 255, 0.8),
    -10px -10px 20px rgba(255, 89, 233, 0.8);
  animation: rotateGlow 1.5s infinite alternate;
}

@keyframes rotateGlow {
  0% {
    box-shadow: 10px 10px 20px rgba(108, 110, 255, 0.8),
      -10px -10px 20px rgba(255, 89, 233, 0.8);
  }
  50% {
    box-shadow: -10px -10px 20px rgba(255, 89, 233, 0.8),
      10px 10px 20px rgba(108, 110, 255, 0.8);
  }
  100% {
    box-shadow: 10px 10px 20px rgba(108, 110, 255, 0.8),
      -10px -10px 20px rgba(255, 89, 233, 0.8);
  }
}

</style>