JSFiddle - React, Tailwind, and code Playground

by TechBrania

HTML

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<div  class="card tile-card">
   <div class="card-header p-3 pt-2">
      <div class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute">
         <i class="fa fa-icon fa-solid fa-dollar-sign opacity-10"></i>
      </div>
      <div class="text-end pt-1">
         <p class="text-sm mb-0 tile-title-p">ABC</p>
         <p class="text-xs mb-0 tile-subtitle-p">PQR</p>
         <p class="text-xs mb-0 tile-subtitle-p" style="font-weight:bold;font-style:italic">123</p>
      </div>
   </div>
   <div class="card-footer p-3">
      <p class="tile-subtitle-p tile-subtitle-footer mb-0">Updated On: <b>10/27/2023 &nbsp;&nbsp;&nbsp;&nbsp; 
      <span style="color: red; font-style: normal; margin-left:37px;">Lost</span></b></p>
   </div>
</div>