JSFiddle - React, Tailwind, and code Playground

by Sreekesh S K

HTML

<div class="MuiBox-root jss127 CaseCard__WarsCaseContainer-zltyy4-0 QPHWS XXsnipcss_extracted_selector_selectionXX" statuscolor="#ffa000">
  <div class="MuiBox-root jss128 Row__UnstyledRow-sc-1tw2cc5-0 Row-sc-1tw2cc5-1 gsFqs">
    <div class="MuiBox-root jss129">
      #357
      <!-- --> (
      <!-- -->Confirmed
      <!-- -->)
    </div>
    <div class="MuiBox-root jss130">
      <div class="MuiChip-root Chip__StyledChip-sc-1mfhqwa-0 jQvwsD MuiChip-sizeSmall" textcolor="#ffa000" bordercolor="#ffa000" font-size="14">
        <span class="MuiChip-label MuiChip-labelSmall">
          Hospitalised
        </span>
      </div>
    </div>
  </div>
  <div class="MuiBox-root jss161 Row__UnstyledRow-sc-1tw2cc5-0 Row-sc-1tw2cc5-1 gsFqs">
    <div class="MuiBox-root jss162">
      <h6 class="MuiTypography-root MuiTypography-h6">
        Age 18
        <!-- --> 
        <!-- -->Female
      </h6>
    </div>
  </div>
  <div class="MuiBox-root jss163 Row__UnstyledRow-sc-1tw2cc5-0 Row-sc-1tw2cc5-1 CaseCard__StatusRow-zltyy4-3 giYwyk">
    <div class="MuiBox-root jss164">
      <div class="MuiChip-root Chip__StyledChip-sc-1mfhqwa-0 ldxRME MuiChip-sizeSmall" backgroundcolor="#d81b60" textcolor="#fff" bordercolor="#d81b60" font-size="14">
        <span class="MuiChip-label MuiChip-labelSmall">
          Imported
        </span>
      </div>
    </div>
  </div>
  <div class="MuiBox-root jss165 Row__UnstyledRow-sc-1tw2cc5-0 Row-sc-1tw2cc5-1 CaseCard__WarsRow-zltyy4-2 cIpCoW">
    <div class="MuiBox-root jss166">
      <p class="MuiTypography-root Text__Label-sc-6s460c-0 ktWlyr MuiTypography-body1">
        Onset date
      </p>
      <b>
        2020-03-21
      </b>
    </div>
    <div class="MuiBox-root jss167">
      <p class="MuiTypography-root Text__Label-sc-6s460c-0 ktWlyr MuiTypography-body1">
        Confirmed date
      </p>
      <b>
        2020-03-23
      </b>
    </div>
  </div>
  <div class="MuiBox-root jss168 Row__UnstyledRow-sc-1tw2cc5-0 Row-sc-1tw2cc5-1...

CSS

.QPHWS { 
    background-image: initial; 
    background-position-x: initial; 
    background-position-y: initial; 
    background-size: initial; 
    background-repeat-x: initial; 
    background-repeat-y: initial; 
    background-attachment: initial; 
    background-origin: initial; 
    background-clip: initial; 
    background-color: rgb(255, 255, 255); 
    padding-top: 8px; 
    padding-right: 16px; 
    padding-bottom: 8px; 
    padding-left: 16px; 
    margin-top: 16px; 
    margin-right: 0px; 
    margin-bottom: 16px; 
    margin-left: 0px; 
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px; 
    border-top-width: 3px; 
    border-top-style: solid; 
    border-top-color: rgb(255, 160, 0);
} 

.jss128 { 

} 

.gsFqs { 
    font-size: 14px; 
    padding-top: 0px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
    display: flex; 
    -webkit-box-pack: justify; 
    justify-content: space-between; 
    -webkit-box-align: center; 
    align-items: center; 
    margin-top: 6px; 
    margin-right: 0px; 
    margin-bottom: 6px; 
    margin-left: 0px;
} 

.jss161 { 

} 

.jss163 { 

} 

.giYwyk { 
    font-size: 14px; 
    padding-top: 0px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
    display: flex; 
    -webkit-box-pack: justify; 
    justify-content: space-between; 
    -webkit-box-align: center; 
    align-items: center; 
    margin-top: 8px; 
    margin-right: 0px; 
    margin-bottom: 10px; 
    margin-left: 0px;
} 

.jss165 { 

} 

.cIpCoW { 
    font-size: 14px; 
    padding-top: 0px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
    display: flex; 
    -webkit-box-pack: justify; 
    justify-content: space-between; 
    -webkit-box-align: center; 
    align-items: center; 
    margin-top: 6px; 
    margin-right: 0px; 
    margin-left: 0px; 
    margin-bottom: 8px;
} 

.jss168 { 

}...