返回配方目录
Cyberpunk Neon

赛博朋克霓虹组件配方

font-mono font-bold uppercase tracking-wider rounded-lg transition-all duration-300 bg-cyan-400 text-black shadow-[0_0_15px_rgba(0,255,255,0.4)] hover:shadow-[0_0_30px_rgba(0,255,255,0.6)] hover:scale-105 active:scale-[0.98]
button

按钮

Neon-glow button with dark background, cyan/magenta accents and sharp edges

基础骨架
font-mono font-bold uppercase tracking-wider rounded-lg transition-all duration-300
变体
主要、次要、轮廓
状态
hover、active、disabled
card

卡片

Dark card panel with neon border glow and cyberpunk aesthetic

基础骨架
bg-gray-950 border border-cyan-400/30 rounded-lg transition-all duration-300
变体
默认、品红、终端
状态
hover
input

输入框

Dark neon input with glowing focus state and monospace font

基础骨架
w-full bg-gray-950 border border-cyan-400/30 rounded-lg font-mono text-cyan-400 placeholder:text-gray-500 focus:outline-none transition-all duration-300
变体
默认、品红
状态
focus、disabled