JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Task Form</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div ng-controller="FormController as formCtrl" class="form-container">
 <div class="section">
            <h2>GENERAL INFORMATION</h2>
            <div class="flex-row">
                <div class="flex-column">
                    <label>Task Name</label>
                    <span>{{ taskCtrl.taskName }}</span>
                </div>
                <div class="flex-column">
                    <label>Suspense Date</label>
                    <span>{{ taskCtrl.suspenseDate }}</span>
                </div>
            </div>
            <div class="flex-row">
                <div class="flex-column">
                    <label>Category</label>
                    <span>{{ taskCtrl.category }}</span>
                </div>
                <div class="flex-column">
                    <label>Priority</label>
                    <span>{{ taskCtrl.priority }}</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>{{ taskCtrl.primaryAssignee }}</span>
                </div>
                <div class="flex-column">
                    <label>Assigned Member</label>
                    <span>{{ taskCtrl.assignedMember }}</span>
                </div>
            </div>
        </div>
       <!-- Instructions Section -->
<section class="form-section instructions-section">
    <h2>INSTRUCTIONS</h2>
    <div class="instructions-content">
        <p class="instruction-heading">A. PART 1:</p>
        <p>The following information is provided by the user when establishing or modifying their USER ID.</p>
        <div class="instruction-item">
            <span...

CSS

.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 {
    background-color: white;
    padding: 5px 10px;
    border: 1px solid #ccc; /* Optional: if you want to have a border around the spans */
}

.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 */
}