Shadow

Visual depth effect.

html

<div class="sh-wrap">
  <div class="sh-floor">
    <div class="sh-box" style="box-shadow:4px 12px 20px #24143055;">card</div>
  </div>
  <p class="sh-caption">box-shadow: 4px 12px 20px #241430</p>
</div>
<style>
.sh-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 280px; }
.sh-floor { background: #FAF7F2; border-radius: 10px; padding: 34px 20px; }
.sh-box { width: 120px; height: 80px; margin: 0 auto; background: #A8E6C1; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.sh-caption { margin: 14px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[280px]">
  <div class="bg-[#FAF7F2] rounded-[10px] py-[34px] px-5">
    <div class="w-[120px] h-20 mx-auto bg-[#A8E6C1] rounded-xl flex items-center justify-center font-bold" style="box-shadow:4px 12px 20px #24143055;">card</div>
  </div>
  <p class="mt-3.5 text-xs text-[#241430]/80">box-shadow: 4px 12px 20px #241430</p>
</div>

react

export function Shadow({
  offsetX = 4,
  offsetY = 12,
  blur = 20,
  color = "#241430",
}) {
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 280 }}>
      <div style={{ background: "#FAF7F2", borderRadius: 10, padding: "34px 20px" }}>
        <div style={{ width: 120, height: 80, margin: "0 auto", background: "#A8E6C1", borderRadius: 12, display: "flex",
          alignItems: "center", justifyContent: "center", fontWeight: 700, boxShadow: `${offsetX}px ${offsetY}px ${blur}px ${color}55` }}>
          card
        </div>
      </div>
      <p style={{ marginTop: 14, fontSize: 12, color: "#241430cc" }}>box-shadow: {offsetX}px {offsetY}px {blur}px {color}</p>
    </div>
  );
}