{"html":"\n

\n \n New Product\n

\n New Product\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n Toner\n

\n \n \n \n \n

Hydration

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

\n Protect Skin Barrier\n

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

Reduce Winkles

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

Anti Inflammatory

\n \n

\n \n \n\n","css":".absolute{position:absolute}.relative{position:relative}.left-0{left:0px}.top-0{top:0px}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-\\[100\\]{z-index:100}.-mb-5{margin-bottom:-1.25rem}.flex{display:flex}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1 / 1}.w-\\[180px\\]{width:180px}.w-\\[300px\\]{width:300px}.shrink-0{flex-shrink:0}.-translate-x-\\[150\\%\\]{--tw-translate-x:-150%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.snap-start{scroll-snap-align:start}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.gap-10{gap:2.5rem}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.overflow-hidden{overflow:hidden}.rounded-md{border-radius:0.375rem}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.stroke-\\[\\#495c48\\]{stroke:#495c48}.p-2{padding:0.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.text-center{text-align:center}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-none{line-height:1}.tracking-wider{letter-spacing:0.05em}.text-\\[\\#495c48\\]{--tw-text-opacity:1;color:rgb(73 92 72 / var(--tw-text-opacity))}.text-\\[\\#7b956a\\]{--tw-text-opacity:1;color:rgb(123 149 106 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.opacity-0{opacity:0}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:left-0::after{content:var(--tw-content);left:0px}.after\\:top-8::after{content:var(--tw-content);top:2rem}.after\\:-z-20::after{content:var(--tw-content);z-index:-20}.after\\:h-1::after{content:var(--tw-content);height:0.25rem}.after\\:w-full::after{content:var(--tw-content);width:100%}.after\\:translate-x-1\\/2::after{content:var(--tw-content);--tw-translate-x:50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.after\\:translate-y-1\\/2::after{content:var(--tw-content);--tw-translate-y:50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.after\\:bg-\\[\\#7b956a\\]::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(123 149 106 / var(--tw-bg-opacity))}.after\\:opacity-0::after{content:var(--tw-content);opacity:0}.after\\:transition-all::after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.after\\:duration-300::after{content:var(--tw-content);transition-duration:300ms}.group:hover .group-hover\\:-translate-x-full{--tw-translate-x:-100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:translate-x-1\\/2{--tw-translate-x:50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:opacity-100{opacity:1}.group:hover .group-hover\\:transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.group:hover .group-hover\\:delay-1000{transition-delay:1000ms}.group:hover .group-hover\\:delay-200{transition-delay:200ms}.group:hover .group-hover\\:delay-300{transition-delay:300ms}.group:hover .group-hover\\:delay-500{transition-delay:500ms}.group:hover .group-hover\\:duration-500{transition-duration:500ms}.group:hover .after\\:group-hover\\:w-full::after{content:var(--tw-content);width:100%}.group:hover .after\\:group-hover\\:origin-right::after{content:var(--tw-content);transform-origin:right}.group:hover .after\\:group-hover\\:-translate-x-1\\/2::after{content:var(--tw-content);--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .after\\:group-hover\\:opacity-100::after{content:var(--tw-content);opacity:1}"}

odd-grasshopper-27

👁 实时预览

📝 源代码