JSFiddle - React, Tailwind, and code Playground

by Tim Mousel

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
<section class="alert alert-success" role="region" aria-label="Activity Information" style="color: #458bc4;">
  <div class="row">
    <div class="col-sm-12">
      <div class="card-box p-3">
        <div class="row">
          <div class="col-md-6 col-sm-6  my-auto">
            <div class="py-3 border-right text-center">
              <h3 class="mt-1 text-primary fw-bolder"><em class="text-primary fw-bolder mdi mdi-calendar-text"></em> 98.6%</h3>
              <p class="text-muted">Current Activity Grade</p>
            </div>
          </div>
          <div class="col-md-6 col-sm-6  my-auto">
            <div class="text-center py-3 d-flex justify-content-center ">
              <ul>
                <li class="list-group-item text-primary fw-bolder">Fitness Assessment Pre-Test:<br>
                  <em class="text-primary mdi mdi-thumb-up-outline"></em> Completed </li>
                <li class="list-group-item text-primary fw-bolder">Fitness Assessment Post-Test:<br>
                  <em class="text-primary fw-bolder mdi mdi-thumb-up-outline"></em> Completed </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--end row -->
</section>

CSS

/*
Template Name: SimpleAdmin Dashboard
Author: CoderThemes
Email: coderthemes@gmail.com
File: Main file css
*/
@import url("https://fonts.googleapis.com/css?family=Hind:400,500,700|Noto+Sans:400,700");
.btn-responsive {
                white-space: normal !important;
                word-wrap: break-word;
}


a:link {
  color: #0071EB;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #0071EB;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #0059B8;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: #0059B8;
  background-color: transparent;
  text-decoration: underline;
}

/* Metis Menu css */
.metismenu {
  padding: 0;
  list-style: none;
  margin: 0;
}

.metismenu ul {
  padding: 0;
  margin: 0;
}

.metismenu ul li {
  list-style: none;
  width: 100%;
}

.nav-second-level li a, .nav-thrid-level li a {
  padding: 8px 20px 8px 10px;
  color: rgba(85, 88, 98, 0.9);
  display: block;
  font-weight: 500;
  position: relative;
}

.nav-second-level li a:focus, .nav-thrid-level li a:focus {
  color: #626773;
}

.nav-second-level li a:hover, .nav-thrid-level li a:hover {
  color: #626773;
}

.nav-second-level > li > a {
  padding-left: 58px;
}

.nav-second-level li.active > a {
  color: rgba(17, 100, 83, 0.9);
}

.nav-third-level > li > a {
  padding-left: 68px;
}

.nav-third-level li.active > a {
  color: #626773;
}

.user-details {
  min-height: 80px;
  padding: 20px;
  position: relative;
}

.user-details img {
  position: relative;
  z-index: 9999;
  height: 48px;
  width: 48px;
}

.user-details .user-info {
  color: #626773;
  margin-left: 60px;
  position: relative;
  z-index: 99999;
}

.user-details .user-info p {
  margin-bottom: 0;
  font-size: 0.813rem;
}

.user-details .user-info a {
  color: #626773;
  display: block;
  font-weight: 600;
  padding-top: 5px;
}

.topbar {
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
  position: relative;
  background:...