JSFiddle - React, Tailwind, and code Playground

by michananya

HTML

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">


<div class="runs">
    <div class="aic  info-a">
        <span class="tooltiptext">Click for more details</span>
        <div>30.0</div>
        <div class="small">Original:  <span>12.2</span></div>
        <div class="small">04:07 PM | LX1</div>
    </div>
    <div class="aic">
        <span class="tooltiptext">Click for more details</span>
        <div>29.0</div>
        <div class="small">Original: <span>10.9</span></div>
        <div class="small">04:07 PM | AMAX2</div>
    </div>
    <div class="aic">
        <span class="tooltiptext">Click for more details</span>
        <div>41.0</div>
        <div class="small">Original:  <span>10.5</span></div>
        <div class="small">04:07 PM | LX1</div>
    </div>

</div>

<h2>Option A</h2>

<div class="runs">
    <div class="aic">
        <span class="tooltiptext">Click for more details</span>
        <div>APPT</div>
        <div>5.6</div>
        <div class="small">02/25/2022</div>
    </div>
    <div class="aic success-a">
        <span class="tooltiptext">Click for more details</span>
        <div>APPT</div>
        <div>5.6</div>
        <div class="small">02/25/2022</div>
    </div>
    <div class="aic info-a">
        <span class="tooltiptext">Click for more details</span>
        <div>APPT</div>
        <div>5.6</div>
        <div class="small">02/25/2022</div>
    </div>
    <div class="aic warning-a">
        <span class="tooltiptext">Click for more details</span>
        <div>APPT</div>
        <div>5.6</div>
        <div class="small" >02/25/2022</div>
    </div> 
    <div class="aic error-a">
        <span class="tooltiptext">Click for more details</span>
        <div>APPT</div>
        <div>5.6</div>
        <div class="small">02/25/2022</div>
    </div>
</div>

CSS

Body {
  Background-color: #F4F4F4;
  font-family: 'Open Sans', sans-serif;
  padding: 20px;

}
.runs {
  display: flex;
  padding: 20px 0;
  width: 600px;
  flex-wrap: wrap;
}
h2 {
  margin-left: 4px;
}
.aic {
  width: 180px;
  Background-color: #FFFFFF;
  border: 1px solid #dddddd;
  border-radius: 3px;
  padding: 8px 8px 8px 12px;
  margin: 4px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 700;
  position: relative;
}
.aic:hover {
  cursor: pointer;
  border-color: #ccc;
  box-shadow: 0px 0px 5px #ccc;
}

.small {
  font-size: 12px;
  margin-top: 3px;
  font-weight: 400;
}
.small > span {
  font-weight: 700;
}
.success-a {
  border-left: 3px solid #4C9D3C!important;
}
.warning-a {
  border-left: 3px solid #D3851B!important;
}
.info-a {
  border-left: 3px solid #418CD8!important;
}
.error-a {
  border-left: 3px solid #D20000!important;
}

.tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  padding: 2px 6px 4px 6px;
font-size: 11px;
font-weight: 600;

  /* Position the tooltip */
  position: absolute;
top: -27px;
left: 25px;
  z-index: 1;
}

.aic:hover .tooltiptext {
  visibility: visible;
}