JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Task Form</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="form-container">
        <!-- General Information Section -->
        <div class="section">
            <h2>GENERAL INFORMATION</h2>
            <div class="flex-row">
                <div class="flex-column">
                    <label>Task Name</label>
                    <span class="display-span">ThisIsMyTaskName</span>
                </div>
                <div class="flex-column">
                    <label>Suspense Date</label>
                    <input type="date" value="yyyy-mm-dd"> <!-- Replace yyyy-mm-dd with the actual date -->
                </div>
            </div>
            <div class="flex-row">
                <div class="flex-column">
                    <label>Category</label>
                    <span >Other</span>
                </div>
                <div class="flex-column">
                    <label>Priority</label>
                    <span >None</span>
                </div>
            </div>
        </div>
        <!-- Assignment Section -->
        <div class="section">
            <h2>ASSIGNMENT</h2>
            <div class="flex-row">
                <div class="flex-column">
                    <label>Primary Assignee</label>
                    <span class="display-span">DTCOM</span>
                </div>
                <div class="flex-column">
                    <label>Assigned Member</label>
                    <span class="display-span">User Name</span>
                </div>
            </div>
        </div>
        <!-- Instructions Section -->
<section class="instructions-section">
    <h2>INSTRUCTIONS</h2>
    <p class="instructions-intro">
        A. PART 1:<br>
        The following information is provided by the user when establishing or modifying their USER ID.
    </p>
    <div class="instruction-item">
        <span class="instruction-label">(1)...

CSS

.display-span {
    display: block; /* or inline-block, depending on your design */
    padding: 5px;
    margin-top: 2px; /* Space above the span, if needed */
    /* Additional styles as needed */
}
.form-container {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    margin: auto;
    background: #f9f9f9; /* Set the background color for the entire container */
    border: 1px solid #ddd; /* Optional: add border around the entire container */
    padding: 10px; /* Padding around the container */
}
.task-container {
    display: flex;
    flex-direction: column;
    background: #f9f9f9;
    max-width: 600px;
    margin: auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.section {
    margin-bottom: 20px;
}

.flex-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

label {
    font-weight: bold;
    margin-bottom: 5px;
}

span {
    padding: 5px 10px;
  
}

.instructions-section {
    background-color: #f9f9f9;
    padding: 20px;
}

.instruction-heading {
    font-weight: bold;
    margin-bottom: 10px;
}

.instruction-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.instruction-label {
    min-width: 150px; /* Adjust width as needed */
    font-weight: bold;
}

.instruction-data {
    flex-grow: 1;
    background-color: #e1e1e1; /* Light grey background for the data span */
    padding: 5px 10px;
    border-radius: 5px;
    /* Add any other desired styling for the data */
}
.instructions-section {
    background: #f9f9f9;
    padding: 20px;
    margin-bottom: 20px;
}

.instructions-intro {
    margin-bottom: 15px;
}

.instruction-item {
    margin-bottom: 10px;
}

.instruction-label {
    font-weight: bold;
    display: inline-block;
    width: 200px; /* Adjust as necessary to fit your design */
}

.instruction-data {
    display: inline-block;
    width: calc(100% - 210px); /* Adjust width...