Opacity

Transparency.

html

<div class="op-wrap">
  <div class="op-track">
    <div class="op-behind"></div>
    <div class="op-box" style="width:90px;height:90px;background:#241430;opacity:calc(60 / 100);"></div>
  </div>
  <p class="op-caption">opacity: 60%</p>
</div>
<style>
.op-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }
.op-track { position: relative; height: 130px; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.op-behind { position: absolute; width: 60px; height: 60px; background: repeating-linear-gradient(45deg, #E8A020, #E8A020 6px, transparent 6px, transparent 12px); border-radius: 8px; }
.op-box { position: relative; border-radius: 10px; }
.op-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[300px]">
  <div class="relative h-[130px] bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg flex items-center justify-center overflow-hidden">
    <div class="absolute w-[60px] h-[60px] rounded-lg" style="background:repeating-linear-gradient(45deg,#E8A020,#E8A020 6px,transparent 6px,transparent 12px);"></div>
    <div class="relative rounded-[10px]" style="width:90px;height:90px;background:#241430;opacity:calc(60 / 100);"></div>
  </div>
  <p class="mt-2.5 text-xs text-[#241430]/80">opacity: 60%</p>
</div>

react

export function Opacity({
  opacityPct = 60,
  elementColor = "#241430",
  showBehind = true,
  size = 90,
}) {
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 300 }}>
      <div style={{ position: "relative", height: 130, background: "#FAF7F2", border: "1.5px dashed #24143055", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" }}>
        {showBehind && (
          <div style={{ position: "absolute", width: 60, height: 60, borderRadius: 8,
            background: "repeating-linear-gradient(45deg, #E8A020, #E8A020 6px, transparent 6px, transparent 12px)" }} />
        )}
        <div style={{ position: "relative", width: size, height: size, background: elementColor, opacity: opacityPct / 100, borderRadius: 10 }} />
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc" }}>opacity: {opacityPct}%</p>
    </div>
  );
}