<div class="radikalwp-card-course"><div class="radikalwp-card-course-top"><span class="radikalwp-card-course-chip">CSS<//span><h4>گرید از صفر تا صد<//h4><//div><div class="radikalwp-card-course-prog"><div><i><//i><//div><span>۶۸٪<//span><//div><button>ادامه یادگیری<//button><//div>

.radikalwp-card-course {
  width: 260px;
  padding: 18px 20px;
  font-family: inherit;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}
.radikalwp-card-course-chip {
  display: inline-block;
  padding: 2px 12px;
  font-size: 10.5px;
  font-weight: 700;
  color: #0d9488;
  background: #ccfbf1;
  border-radius: 999px;
  margin-bottom: 8px;
}
.radikalwp-card-course h4 { margin: 0 0 14px; font-size: 15px; color: #1e293b; }
.radikalwp-card-course-prog { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.radikalwp-card-course-prog div { flex: 1; height: 7px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.radikalwp-card-course-prog i {
  display: block;
  height: 100%;
  width: 68%;
  background: linear-gradient(90deg, #14b8a6, #0ea5e9);
  border-radius: 999px;
}
.radikalwp-card-course-prog span { font-size: 11.5px; font-weight: 700; color: #0d9488; }
.radikalwp-card-course button {
  width: 100%;
  padding: 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #0d9488;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 9px;
  cursor: pointer;
  transition: all .3s ease;
}
.radikalwp-card-course button:hover { background: #0d9488; color: #fff; }