JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Authorization Form</title>

</head>
<body>

<div class="container">
  <h2>GENERAL INFORMATION</h2>
  <div class="row">
    <div class="form-section">
      <label for="document-name">Document</label>
      <span id="document-name">System Authorization Access Request</span>
    </div>
    <div class="form-section">
      <label for="due-date">Due Date</label>
      <span type="text" id="due-date">January 6th, 2024</span> 
    </div>
  </div>
  <h3>INSTRUCTIONS</h3>
  <!-- ... other sections ... -->
  <h3>PART IV</h3>
  <div class="form-section">
    <label for="information-owner-signature">Information Owner Digital Signature (AMIS)</label>
    <div class="signature-field" id="information-owner-signature">Your Signature Field Here</div>
    <label for="phone-number-amis">Phone Number:</label>
    <input type="text" id="phone-number-amis">
    <label for="date-amis">Date:</label>
    <input type="date" id="date-amis">
  </div>
  <div class="form-section">
    <label for="account-processor-signature">Account Processor Digital Signature (ASD)</label>
    <div class="signature-field" id="account-processor-signature">Your Signature Field Here</div>
    <label for="phone-number-asd">Phone Number:</label>
    <input type="text" id="phone-number-asd">
    <label for="date-asd">Date:</label>
    <input type="date" id="date-asd">
  </div>
  <!-- ... additional form sections ... -->
</div>

</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
  }
  .container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #000;
  }
  h2, h3 {
    color: #333;
  }
  .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .form-section {
    flex-basis: 48%; /* Adjust the width for two-column layout */
    margin-bottom: 20px;
  }
  .form-section label {
    display: block;
    margin-bottom: 5px;
  }
  .form-section input[type="text"],
  .form-section input[type="date"] {
    width: 100%; /* Adjusted to 100% to take the full width of the flex-basis */
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .signature-field {
    border: 1px solid #000;
    height: 50px;
    margin-bottom: 10px;
  }