📝 Text Input

<div class="input-group">
  <label class="input-label">Email</label>
  <input type="email" class="input-field" placeholder="Enter your email">
</div>

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 280px;
}
.input-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a1a2e;
}
.input-field {
  padding: 0.75rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  outline: none;
  font-family: inherit;
}
.input-field:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.input-field::placeholder {
  color: #999;
}

<div class="input-floating">
  <input type="text" class="input-floating-field" id="name" placeholder=" ">
  <label class="input-floating-label" for="name">Your Name</label>
</div>

.input-floating {
  position: relative;
  width: 280px;
}
.input-floating-field {
  width: 100%;
  padding: 1rem 1rem 0.5rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.95rem;
  outline: none;
  transition: all 0.3s ease;
  font-family: inherit;
}
.input-floating-field:focus {
  border-color: #667eea;
}
.input-floating-label {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  color: #999;
  pointer-events: none;
  transition: all 0.3s ease;
  background: white;
  padding: 0 0.25rem;
}
.input-floating-field:focus + .input-floating-label,
.input-floating-field:not(:placeholder-shown) + .input-floating-label {
  top: 0;
  font-size: 0.75rem;
  color: #667eea;
  font-weight: 600;
}

<div class="input-icon">
  <span class="input-icon-symbol">🔒</span>
  <input type="password" class="input-icon-field" placeholder="Password">
</div>

.input-icon {
  position: relative;
  width: 280px;
}
.input-icon-symbol {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  pointer-events: none;
}
.input-icon-field {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.95rem;
  outline: none;
  transition: all 0.3s ease;
  font-family: inherit;
}
.input-icon-field:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}