{"html":"

\n \n

2000

lorem

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

\n \n

1999

lorem

\n\n \n \n \n \n \n \n\n","css":".absolute{position:absolute}.relative{position:relative}.right-\\[10\\%\\]{right:10%}.top-\\[50\\%\\]{top:50%}.grid{display:grid}.w-\\[700px\\]{width:700px}.w-full{width:100%}.translate-y-\\[-50\\%\\]{--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))}.cursor-pointer{cursor:pointer}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.gap-2{gap:0.5rem}.rounded-lg{border-radius:0.5rem}.bg-\\[\\#673ab7\\]{--tw-bg-opacity:1;background-color:rgb(103 58 183 / var(--tw-bg-opacity))}.bg-\\[rgb\\(41\\2c 49\\2c 79\\)\\]{--tw-bg-opacity:1;background-color:rgb(41 49 79 / var(--tw-bg-opacity))}.p-5{padding:1.25rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.opacity-20{opacity:0.2}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.hover\\:translate-y-\\[3px\\]:hover{--tw-translate-y:3px;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))}.hover\\:shadow-\\[0_-8px_0px_0px_\\#2196f3\\]:hover{--tw-shadow:0 -8px 0px 0px #2196f3;--tw-shadow-colored:0 -8px 0px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.hover\\:shadow-\\[0_-8px_0px_0px_rgb\\(244\\2c 67\\2c 54\\)\\]:hover{--tw-shadow:0 -8px 0px 0px rgb(244,67,54);--tw-shadow-colored:0 -8px 0px 0px 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\\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;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}@media (max-width: 500px){.max-\\[500px\\]\\:grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}}"}

rare-skunk-4

👁 实时预览

📝 源代码