JSFiddle - React, Tailwind, and code Playground

by matox

HTML

<div class="modal-body">
  <div id="case-1" class="test-case">
    <h5 class="title">1. Testing cell manager connection</h5>
    <h5 class="status ok">OK</h5>
    <div class="details"></div>
  </div>
  <div id="case-2" class="test-case">
    <h5 class="title">2. Testing symbolic links for binaries</h5>
    <h5 class="status ok">OK</h5>
    <div class="details"></div>
  </div>
  <div id="case-3" class="test-case">
    <h5 class="title">3. Testing valid DP User List</h5>
    <h5 class="status warning">WARNING</h5>
    <div class="details"></div>
  </div>
  <div id="case-4" class="test-case">
    <h5 class="title">4. Testing database connection</h5>
    <h5 class="status error">ERROR</h5>
    <div class="details">
      <p>Failed to connect to database "vesa".</p>
      <p>FATAL: Password authentication failed for user "admin".</p>
    </div>
  </div>
</div>

CSS

.test-case {
  margin-bottom: 20px;
}

.test-case .title {
  float: left;
}

.test-case .status {
  float: right;
}

.test-case .status.ok {
  color: lightgreen;
}

.test-case .status.error {
  color: red;
}

.test-case .status.warning {
  color: orange;
}

.test-case .details {
  clear: both;
  padding-left: 20px;
}

.test-case .details p {
  margin: 0;
  padding: 0;
}