Paan Shop Signboard

<div class="sig-shop-signboard">
  <span class="sig-shop-signboard__tube" aria-hidden="true"></span>
  <div class="sig-shop-signboard__board">
    <span class="sig-shop-signboard__title">Murugan Stores</span>
    <span class="sig-shop-signboard__sub">Paan · Cool drinks · Xerox</span>
    <span class="sig-shop-signboard__foot">Prop: S. Murugan</span>
  </div>
</div>

.sig-shop-signboard {
  --sig-board: #ffd23f;
  --sig-paint: #0f3d91;
  --sig-shade: #d3312f;
  --sig-tube: #e9fbff;
  --sig-w: 270px;
  --sig-speed: 320ms;
}

.sig-shop-signboard {
  position: relative;
  box-sizing: border-box;
  width: min(100%, var(--sig-w));
  padding-top: 20px;
  transform-origin: 50% 0;
  transition: transform var(--sig-speed) ease;
}

.sig-shop-signboard:hover {
  transform: rotate(1.2deg);
  --flick: sig-flicker 900ms steps(1) both;
}

.sig-shop-signboard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  width: 2px;
  height: 22px;
  background: #55555e;
}

.sig-shop-signboard::after {
  content: "";
  position: absolute;
  top: 0;
  right: 18%;
  width: 2px;
  height: 22px;
  background: #55555e;
}

.sig-shop-signboard__tube {
  position: absolute;
  top: 8px;
  left: 12%;
  right: 12%;
  height: 7px;
  background: var(--sig-tube);
  border-radius: 4px;
  box-shadow: 0 0 14px 3px var(--sig-tube), 0 12px 30px 6px color-mix(in srgb, var(--sig-tube) 35%, transparent);
  animation: var(--flick, none);
}

.sig-shop-signboard__board {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 16px 14px 12px;
  text-align: center;
  background: radial-gradient(circle at 96% 92%, rgba(120,60,20,.55), transparent 16%), radial-gradient(circle at 3% 96%, rgba(120,60,20,.4), transparent 12%), radial-gradient(ellipse at 50% 0, rgba(255,255,255,.4), transparent 62%), var(--sig-board);
  box-shadow: inset 0 0 0 4px var(--sig-paint), inset 0 0 0 7px var(--sig-board), inset 0 0 0 9px var(--sig-shade), 0 10px 18px rgba(0,0,0,.45);
}

.sig-shop-signboard__title {
  color: var(--sig-paint);
  font-family: 'Arial Black', Impact, sans-serif;
  font-size: 25px;
  font-weight: 900;
  font-style: italic;
  line-height: 1.05;
  text-shadow: 2px 2px 0 #fff, 4px 4px 0 var(--sig-shade);
}

.sig-shop-signboard__sub {
  padding: 2px 10px;
  color: #fff;
  font-family: system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  background: var(--sig-shade);
  border-radius: 20px;
}

.sig-shop-signboard__foot {
  color: var(--sig-paint);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 10.5px;
  font-style: italic;
}

@keyframes sig-flicker {
  0%, 18%, 34%, 100% { opacity: 1; }
  8%, 26%, 44% { opacity: .15; }
}

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

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

import type React from "react";
import "./shop-signboard.css"; // the CSS tab

export function SigShopSignboard({ children = "Murugan Stores", ...props }: React.ComponentProps<"div">) {
  return (
    <div className="sig-shop-signboard" {...props}>
      <span className="sig-shop-signboard__tube" aria-hidden="true" />
      <div className="sig-shop-signboard__board">
        <span className="sig-shop-signboard__title">{children}</span>
        <span className="sig-shop-signboard__sub">{"Paan · Cool drinks · Xerox"}</span>
        <span className="sig-shop-signboard__foot">{"Prop: S. Murugan"}</span>
      </div>
    </div>
  );
}

<div class="relative [box-sizing:border-box] w-[min(100%,_270px)] [padding-top:20px] [transform-origin:50%_0] [transition:transform_320ms_ease] hover:[transform:rotate(1.2deg)] hover:[--flick:sig-flicker_900ms_steps(1)_both] before:content-[''] before:absolute before:[top:0] before:[left:18%] before:w-[2px] before:h-[22px] before:bg-[#55555e] after:content-[''] after:absolute after:[top:0] after:[right:18%] after:w-[2px] after:h-[22px] after:bg-[#55555e] motion-reduce:[transition:none!important]">
  <span class="absolute [top:8px] [left:12%] [right:12%] h-[7px] bg-[#e9fbff] rounded-[4px] [box-shadow:0_0_14px_3px_#e9fbff,_0_12px_30px_6px_color-mix(in_srgb,_#e9fbff_35%,_transparent)] [animation:var(--flick,_none)] motion-reduce:[animation:none!important]" aria-hidden="true"></span>
  <div class="grid [justify-items:center] gap-[3px] [padding:16px_14px_12px] [text-align:center] [background:radial-gradient(circle_at_96%_92%,_rgba(120,60,20,.55),_transparent_16%),_radial-gradient(circle_at_3%_96%,_rgba(120,60,20,.4),_transparent_12%),_radial-gradient(ellipse_at_50%_0,_rgba(255,255,255,.4),_transparent_62%),_#ffd23f] [box-shadow:inset_0_0_0_4px_#0f3d91,_inset_0_0_0_7px_#ffd23f,_inset_0_0_0_9px_#d3312f,_0_10px_18px_rgba(0,0,0,.45)]">
    <span class="text-[#0f3d91] [font-family:'Arial_Black',_Impact,_sans-serif] text-[25px] font-[900] [font-style:italic] [line-height:1.05] [text-shadow:2px_2px_0_#fff,_4px_4px_0_#d3312f]">Murugan Stores</span>
    <span class="[padding:2px_10px] text-[#fff] [font-family:system-ui,_sans-serif] text-[11px] font-[700] bg-[#d3312f] rounded-[20px]">Paan · Cool drinks · Xerox</span>
    <span class="text-[#0f3d91] [font-family:Georgia,_'Times_New_Roman',_serif] text-[10.5px] [font-style:italic]">Prop: S. Murugan</span>
  </div>
</div>

<!-- A class cannot hold keyframes: keep this in your CSS. -->
<style>
@keyframes sig-flicker {
  0%, 18%, 34%, 100% { opacity: 1; }
  8%, 26%, 44% { opacity: .15; }
}
</style>