{"html":"\n \n

\n \n \n \n \n \n \n

\n Elevate your experience with smoother transitions and vibrant design.\n Perfect for prototyping and sharing ideas in style.\n

\n Explore Documentation →\n

\n \n\n","css":".absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.left-0 {\n left: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.z-0 {\n z-index: 0;\n}\n.z-10 {\n z-index: 10;\n}\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n.grid {\n display: grid;\n}\n.h-12 {\n height: 3rem;\n}\n.h-24 {\n height: 6rem;\n}\n.h-32 {\n height: 8rem;\n}\n.w-12 {\n width: 3rem;\n}\n.w-24 {\n width: 6rem;\n}\n.w-32 {\n width: 8rem;\n}\n.max-w-md {\n max-width: 28rem;\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.place-items-center {\n place-items: center;\n}\n.space-y-6 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.rounded-2xl {\n border-radius: 1rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n.from-purple-500 {\n --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.to-blue-500 {\n --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.pb-10 {\n padding-bottom: 2.5rem;\n}\n.pt-12 {\n padding-top: 3rem;\n}\n.pt-6 {\n padding-top: 1.5rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-semibold {\n font-weight: 600;\n}\n.leading-7 {\n line-height: 1.75rem;\n}\n.leading-8 {\n line-height: 2rem;\n}\n.text-gray-700 {\n --tw-text-opacity: 1;\n color: rgb(55 65 81 / var(--tw-text-opacity));\n}\n.text-purple-500 {\n --tw-text-opacity: 1;\n color: rgb(168 85 247 / var(--tw-text-opacity));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.opacity-75 {\n opacity: 0.75;\n}\n.shadow-2xl {\n --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.ring-1 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0\n var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0\n calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),\n var(--tw-shadow, 0 0 #0000);\n}\n.ring-gray-900\\/5 {\n --tw-ring-color: rgb(17 24 39 / 0.05);\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-500 {\n transition-duration: 500ms;\n}\n.hover\\:scale-105:hover {\n --tw-scale-x: 1.05;\n --tw-scale-y: 1.05;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.group:hover .group-hover\\:scale-\\[20\\] {\n --tw-scale-x: 20;\n --tw-scale-y: 20;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.group:hover .group-hover\\:bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n.group:hover .group-hover\\:from-pink-500 {\n --tw-gradient-from: #ec4899 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.group:hover .group-hover\\:to-yellow-500 {\n --tw-gradient-to: #eab308 var(--tw-gradient-to-position);\n}\n.group:hover .group-hover\\:text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n@media (min-width: 640px) {\n .sm\\:mx-auto {\n margin-left: auto;\n margin-right: auto;\n }\n .sm\\:max-w-sm {\n max-width: 24rem;\n }\n .sm\\:px-12 {\n padding-left: 3rem;\n padding-right: 3rem;\n }\n}\n"}

perfect-baboon-50

👁 实时预览

📝 源代码