Tinted upload tile
Square icon tile with a soft rose-tint background (rose-50), white border rim, light rose ring shadow, and a rose-500 Upload icon. Pairs cleanly with rose gradient upload CTAs.
typescriptreactbuttontailwindiconprimary
Dependencies
Install the required packages before using this component.
Notes
border-2 border-white creates a light rim that separates the tinted tile from gray page backgrounds without a harsh neutral stroke.
rose-50 tint plus rose-500 icon reads warmer than olive-lime and matches the Soft gradient upload snippet. The 1px rose ring shadow (fb7185 at 12%) ties the tile to the icon without a heavy border.
The shadow is intentionally minimal (0 2px 1px at 4% opacity) — enough to lift the tile off the surface without competing with the icon.