galaxy/Inputs/TechByElijah_fluffy-dolphin-33.html

<div class="input-container">
  <input type="text" name="text" class="input" placeholder="Enter text">
  <div class="highlight"></div>
</div>

<style>
/* From Uiverse.io by TechByElijah - Tags: simple, input, animated */
.input-container {
  position: relative;
}

.input {
  font-size: 1em;
  padding: 0.6em 1em;
  border: none;
  border-radius: 6px;
  background-color: #f8f8f8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  max-width: 200px;
  color: #333;
}

.input:hover {
  background-color: #f2f2f2;
}

.input:focus {
  outline: none;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.input::placeholder {
  color: #999;
}

.highlight {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #6c63ff;
  transition: width 0.3s ease;
}

.input:focus + .highlight {
  width: 100%;
}

/* Optional: Animation on focus */
@keyframes input-focus {
  from {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
  }

  to {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}

.input:focus {
  animation: input-focus 0.3s ease;
}

</style>