Retour à tous les outils

Form Input Generator

Font Size14px
Padding X16px
Padding Y12px
Border Radius8px

Preview

Generated Code

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-label {
  font-size: 12px;
  font-weight: 500;
  color: #e2e8f0;
}
.form-input {
  background: #1e1e2e;
  color: #e2e8f0;
  border: 1px solid #4a4a6a;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.form-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px #8b5cf633;
}
.form-input::placeholder {
  color: #e2e8f066;
}

<div class="form-group">
  <label class="form-label">Label</label>
  <input type="text" class="form-input" placeholder="Enter text..." />
</div>

History

No saved inputs yet.