JSFiddle - React, Tailwind, and code Playground

by pikk

HTML

<div class="container">

  <div class="name-last-name">
    <div class="form-group">
      <label for="input-field">First Name</label><input autocomplete="false" name="firstName" class="form-control" placeholder="First Name" value="naaame" />
    </div>
    <div class="form-group">
      <label for="input-field">Last Name</label><input autocomplete="false" name="lastName" class="form-control" placeholder="Last Name" value="lastnamee" />
    </div>
  </div>
</div>

CSS

.container {
  width: 450px;
  max-width: 450px;
  background-color: #dbe7ff;
  display: block;
  padding: 33px 32px;
}

.name-last-name {
  display: flex;
  justify-content: space-between;
  grid-gap: 16px;
  gap: 16px;
}

.form-group {
  margin-bottom: 10px;
  width: 100%;
}

.form-group label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 12px;
  color: #63769C !important;
  margin-left: 15px;
}

.form-group input {
  background: #F7F8FA !important;
  color: #2B3654;
  border-radius: 8px !important;
  border: none;
  padding-left: 16px;
  font-size: 14px;
  width: 100%;
}