JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/primeicons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/primeng/14.1.1/resources/primeng.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/primeng/14.1.1/resources/components/card/card.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/primeng/14.1.1/resources/themes/mdc-dark-indigo/theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/primeng/14.1.1/fesm2015/primeng.mjs.map"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/primeng/14.1.1/fesm2015/primeng-card.mjs.map"></script>
<div class="p-element">
  <div class="p-card p-component">
    <div class="p-card-body">
      <div class="p-card-title ng-star-inserted">
        <h2><i class="pi pi-exclamation-triangle"></i>
          System Message</h2>
      </div>
      <div class="p-card-subtitle">
        Unable to process your request - 01.01.0003
      </div>
      <div class="p-card-content">
        Your request has been logged. Please contact support for additional information.
      </div>
    </div>
  </div>
</div>

CSS

*,
body,
h1 {
  font-family: Verdana, Arial, sans-serif;
}

.p-card-body {
  padding-top: .1rem !important;
}

.p-element,
.p-card {
  background-color: var(--bluegray-700);
}

.pi:before {
  font-size: x-large;
  color: var(--yellow-300);
}