Matchbox Label

<button class="sig-matchbox" type="button">
  <span class="sig-matchbox__tray">
    <span class="sig-matchbox__price">₹2 Buy</span>
  </span>
  <span class="sig-matchbox__sleeve">
    <span class="sig-matchbox__plate">Deepam Brand</span>
    <span class="sig-matchbox__foot">Safety matches · Avg 40</span>
  </span>
</button>

.sig-matchbox {
  --sig-red: #d3312f;
  --sig-yellow: #ffd23f;
  --sig-ink: #14306e;
  --sig-speed: 320ms;
}

.sig-matchbox {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 262px;
  height: 122px;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.sig-matchbox:hover {
  --pull: 84px;
}

.sig-matchbox:focus {
  --pull: 84px;
}

.sig-matchbox:focus-visible {
  outline: 2px solid var(--sig-yellow);
  outline-offset: 4px;
}

.sig-matchbox__tray {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 160px;
  height: 108px;
  overflow: hidden;
  background: repeating-linear-gradient(180deg, transparent 0 5px, #8a6a3c 5px 7px), linear-gradient(90deg, #e8c98d 88%, var(--sig-red) 88% 96%, #e8c98d 96%);
  border: 3px solid #8a6a3c;
  box-sizing: border-box;
  transform: translateX(var(--pull, 0px));
  transition: transform var(--sig-speed) ease;
}

.sig-matchbox__sleeve {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  width: 174px;
  height: 122px;
  box-sizing: border-box;
  overflow: hidden;
  color: #fff;
  font-family: system-ui, sans-serif;
  background: repeating-conic-gradient(from 0deg at 50% 46%, var(--sig-yellow) 0 11deg, var(--sig-red) 0 22deg);
  border-block: 9px solid #4a2f24;
  box-shadow: 4px 8px 14px rgba(0,0,0,.45);
}

.sig-matchbox__plate {
  align-self: center;
  justify-self: center;
  padding: 6px 12px;
  color: var(--sig-yellow);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  text-align: center;
  background: var(--sig-ink);
  border: 2px solid var(--sig-yellow);
  border-radius: 50%/40%;
}

.sig-matchbox__foot {
  padding: 2px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  background: var(--sig-ink);
}

.sig-matchbox__price {
  position: absolute;
  top: 36px;
  right: 6px;
  padding: 3px 7px;
  color: var(--sig-ink);
  font-family: system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  background: var(--sig-yellow);
  transform: rotate(-4deg);
}

@media (prefers-reduced-motion: reduce) {
  .sig-matchbox__tray {
    animation: none !important;
    transition: none !important;
  }
}

// No JavaScript needed: this one is CSS only.

import type React from "react";
import "./matchbox.css"; // the CSS tab

export function SigMatchbox({ children = "Deepam Brand", ...props }: React.ComponentProps<"button">) {
  return (
    <button className="sig-matchbox" type="button" {...props}>
      <span className="sig-matchbox__tray">
        <span className="sig-matchbox__price">{"₹2 Buy"}</span>
      </span>
      <span className="sig-matchbox__sleeve">
        <span className="sig-matchbox__plate">{children}</span>
        <span className="sig-matchbox__foot">{"Safety matches · Avg 40"}</span>
      </span>
    </button>
  );
}

<button class="relative [box-sizing:border-box] [display:block] w-[262px] h-[122px] [padding:0] [color:inherit] [background:none] [border:0] cursor-pointer hover:[--pull:84px] [&:focus]:[--pull:84px] focus-visible:[outline:2px_solid_#ffd23f] focus-visible:[outline-offset:4px]" type="button">
  <span class="absolute [top:7px] [left:7px] w-[160px] h-[108px] overflow-hidden [background:repeating-linear-gradient(180deg,_transparent_0_5px,_#8a6a3c_5px_7px),_linear-gradient(90deg,_#e8c98d_88%,_#d3312f_88%_96%,_#e8c98d_96%)] [border:3px_solid_#8a6a3c] [box-sizing:border-box] [transform:translateX(var(--pull,_0px))] [transition:transform_320ms_ease] motion-reduce:[transition:none!important]">
    <span class="absolute [top:36px] [right:6px] [padding:3px_7px] text-[#14306e] [font-family:system-ui,_sans-serif] text-[12px] font-[800] bg-[#ffd23f] [transform:rotate(-4deg)]">₹2 Buy</span>
  </span>
  <span class="absolute [top:0] [left:0] grid [grid-template-rows:1fr_auto] w-[174px] h-[122px] [box-sizing:border-box] overflow-hidden text-[#fff] [font-family:system-ui,_sans-serif] [background:repeating-conic-gradient(from_0deg_at_50%_46%,_#ffd23f_0_11deg,_#d3312f_0_22deg)] [border-block:9px_solid_#4a2f24] [box-shadow:4px_8px_14px_rgba(0,0,0,.45)]">
    <span class="[align-self:center] [justify-self:center] [padding:6px_12px] text-[#ffd23f] [font-family:Georgia,_'Times_New_Roman',_serif] text-[17px] font-[700] [font-style:italic] [line-height:1.1] [text-align:center] bg-[#14306e] [border:2px_solid_#ffd23f] rounded-[50%/40%]">Deepam Brand</span>
    <span class="[padding:2px] text-[8px] font-[700] [letter-spacing:0.1em] [text-align:center] [text-transform:uppercase] bg-[#14306e]">Safety matches · Avg 40</span>
  </span>
</button>