JSFiddle - React, Tailwind, and code Playground

by Debiprasad

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<h3>Screen 1</h3>
<ul class="list-group list-group-flush" id="false-positive-rules" style="width: 760px;">
  <li class="list-group-item border-0">
    <div class="d-flex">
      <div class="d-flex flex-fill false-positive-rule-message">Bot activity (No accept header)</div>
      <div class="d-flex false-positive-rule-type col-3">
        <span class="badge badge-light">HTTP Anomaly</span>
      </div>
      <div class="d-flex false-positive-rule-severity col-2">
        <span class="badge badge-outline badge-warning">Medium</span>
      </div>
      <div class="d-flex false-positive-rule-match col-1" data-toggle="tooltip" data-placement="top" data-original-title="Match"></div>
      <div class="d-flex false-positive-rule-actions col-1">
        <a href="#" class="false-positives-rule-delete-btn" data-toggle="tooltip" data-placement="top" data-original-title="Remove Rule"><i class="icon-trash"></i> </a>
      </div>
    </div>
  </li>
  <li class="list-group-item border-0">
    <div class="d-flex">
      <div class="d-flex flex-fill false-positive-rule-message">Wordpress Bruteforce attempt</div>
      <div class="d-flex false-positive-rule-type col-3">
        <span class="badge badge-light">Wordpress specific Attack</span>
      </div>
      <div class="d-flex false-positive-rule-severity col-2">
        <span class="badge badge-outline badge-warning">Medium</span>
      </div>
      <div class="d-flex false-positive-rule-match col-1" data-toggle="tooltip" data-placement="top" data-original-title="Match"></div>
      <div class="d-flex false-positive-rule-actions col-1">
        <a href="#" class="false-positives-rule-delete-btn" data-toggle="tooltip" data-placement="top" data-original-title="Remove Rule"><i class="icon-trash"></i> </a>
   ...