JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<div class="form-section">
  <h2>General Information</h2>
  <form>
    <label for="taskName">Task/Request Name</label>
    <input type="text" id="taskName" name="taskName">
    
    <label for="suspenseDate">Suspense Date</label>
    <input type="date" id="suspenseDate" name="suspenseDate">
    
    <label for="category">Category</label>
    <select id="category" name="category">
      <option value="category1">Category 1</option>
      <option value="category2">Category 2</option>
      <!-- Additional categories -->
    </select>
    
    <!-- Additional form fields -->
    
    <button type="submit">Submit</button>
  </form>
</div>

CSS

.form-section {
  width: 300px; /* adjust as needed */
  border: 1px solid #ccc;
  padding: 15px;
  margin: 10px;
  background-color: #f9f9f9;
}

.form-section h2 {
  font-size: 16px;
  margin-bottom: 10px;
}

label {
  display: block;
  margin-top: 10px;
  font-size: 14px;
}

input[type="text"],
input[type="date"],
select {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  margin-top: 20px;
  padding: 10px 15px;
  background-color: #5c92d1;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #3e70a8;
}