<html> HTML
<div class="product">
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='180'><rect width='100%' height='100%' fill='%23ddd'/><text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' fill='%23666' font-family='Arial' font-size='20'>Product</text></svg>" alt="Product">
  <span class="badge">NEW</span>
</div>
# CSS
/* TODOs:
  1) Make .product a positioned container (position: relative).
  2) Absolutely position .badge inside it using top/right offsets.
  3) Add padding, border-radius, and a red background for visibility.
*/
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 2rem;
  line-height: 1.6;
  background: #fafafa;
}
.product {
  display: inline-block;
}
.badge {
  background: #e63946;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.5px;
  /* Your positioning and spacing here */
}
img {
  display: block;
  max-width: 100%;
  border-radius: 8px;
}
Live preview updates as you type
Building preview…