{"html":"\n \n \n \n \n \n \n \n

Hover over

\n\n","css":".absolute{position:absolute}.relative{position:relative}.inset-1{inset:0.25rem}.bottom-0{bottom:0px}.z-50{z-index:50}.flex{display:flex}.h-40{height:10rem}.h-\\[156px\\]{height:156px}.h-full{height:100%}.w-60{width:15rem}.w-full{width:100%}.origin-bottom{transform-origin:bottom}.origin-top{transform-origin:top}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.flex-col{flex-direction:column}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-2xl{border-radius:1rem}.rounded-tl-none{border-top-left-radius:0px}.rounded-tr-none{border-top-right-radius:0px}.bg-amber-600{--tw-bg-opacity:1;background-color:rgb(217 119 6 / var(--tw-bg-opacity))}.bg-zinc-200{--tw-bg-opacity:1;background-color:rgb(228 228 231 / var(--tw-bg-opacity))}.bg-zinc-300{--tw-bg-opacity:1;background-color:rgb(212 212 216 / var(--tw-bg-opacity))}.bg-zinc-400{--tw-bg-opacity:1;background-color:rgb(161 161 170 / var(--tw-bg-opacity))}.bg-gradient-to-t{background-image:linear-gradient(to top, var(--tw-gradient-stops))}.from-amber-500{--tw-gradient-from:#f59e0b var(--tw-gradient-from-position);--tw-gradient-to:rgb(245 158 11 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-amber-400{--tw-gradient-to:#fbbf24 var(--tw-gradient-to-position)}.pt-4{padding-top:1rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.opacity-20{opacity:0.2}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.\\[perspective\\:1500px\\]{perspective:1500px}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:-top-\\[10px\\]::before{content:var(--tw-content);top:-10px}.before\\:-top-\\[15px\\]::before{content:var(--tw-content);top:-15px}.before\\:left-\\[75\\.5px\\]::before{content:var(--tw-content);left:75.5px}.before\\:right-\\[142px\\]::before{content:var(--tw-content);right:142px}.before\\:size-3::before{content:var(--tw-content);width:0.75rem;height:0.75rem}.before\\:h-4::before{content:var(--tw-content);height:1rem}.before\\:w-4::before{content:var(--tw-content);width:1rem}.before\\:bg-amber-400::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(251 191 36 / var(--tw-bg-opacity))}.before\\:bg-amber-600::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(217 119 6 / var(--tw-bg-opacity))}.before\\:content-\\[\\'\\'\\]::before{--tw-content:'';content:var(--tw-content)}.before\\:\\[clip-path\\:polygon\\(0_35\\%\\2c 0\\%_100\\%\\2c 50\\%_100\\%\\)\\;\\]::before{content:var(--tw-content);-webkit-clip-path:polygon(0 35%,0% 100%,50% 100%);;clip-path:polygon(0 35%,0% 100%,50% 100%);}.before\\:\\[clip-path\\:polygon\\(100\\%_14\\%\\2c 50\\%_100\\%\\2c 100\\%_100\\%\\)\\;\\]::before{content:var(--tw-content);-webkit-clip-path:polygon(100% 14%,50% 100%,100% 100%);;clip-path:polygon(100% 14%,50% 100%,100% 100%);}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:bottom-\\[99\\%\\]::after{content:var(--tw-content);bottom:99%}.after\\:left-0::after{content:var(--tw-content);left:0px}.after\\:right-0::after{content:var(--tw-content);right:0px}.after\\:h-4::after{content:var(--tw-content);height:1rem}.after\\:h-\\[16px\\]::after{content:var(--tw-content);height:16px}.after\\:w-20::after{content:var(--tw-content);width:5rem}.after\\:w-\\[146px\\]::after{content:var(--tw-content);width:146px}.after\\:rounded-t-2xl::after{content:var(--tw-content);border-top-left-radius:1rem;border-top-right-radius:1rem}.after\\:bg-amber-400::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(251 191 36 / var(--tw-bg-opacity))}.after\\:bg-amber-600::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(217 119 6 / var(--tw-bg-opacity))}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.group:hover .group-hover\\:shadow-\\[0_20px_40px_rgba\\(0\\2c 0\\2c 0\\2c \\.2\\)\\]{--tw-shadow:0 20px 40px rgba(0,0,0,.2);--tw-shadow-colored:0 20px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.group:hover .group-hover\\:shadow-\\[inset_0_20px_40px_\\#fbbf24\\2c _inset_0_-20px_40px_\\#d97706\\]{--tw-shadow:inset 0 20px 40px #fbbf24, inset 0 -20px 40px #d97706;--tw-shadow-colored:inset 0 20px 40px var(--tw-shadow-color), inset 0 -20px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.group:hover .group-hover\\:\\[transform\\:rotateX\\(-20deg\\)\\]{transform:rotateX(-20deg)}.group:hover .group-hover\\:\\[transform\\:rotateX\\(-30deg\\)\\]{transform:rotateX(-30deg)}.group:hover .group-hover\\:\\[transform\\:rotateX\\(-38deg\\)\\]{transform:rotateX(-38deg)}.group:hover .group-hover\\:\\[transform\\:rotateX\\(-46deg\\)_translateY\\(1px\\)\\]{transform:rotateX(-46deg) translateY(1px)}"}

mighty-pig-13

👁 实时预览

📝 源代码