Beauty Categories

在云境TS 中打开并复制 →

内容预览

--- **Prompt to recreate the "Categories" section:** > Build a "Categories" section in React + Tailwind CSS with the following exact specifications: > > **Section Container:** > - Full-width `` with `bg-white`, `text-white`, `min-h-screen`. > - Flexbox column layout with `justify-center` to vertically center the grid content. > - No horizontal or vertical padding on the section itself. > > **Grid Layout:** > - A CSS grid: `grid-cols-1` on mobile, `md:grid-cols-3` on medium+. > - The entire grid uses an IntersectionObserver-based reveal animation (threshold `0.1`): transitions from `opacity-0 translate-y-12` to `opacity-100 translate-y-0` over `duration-1000 ease-out`. > > **3 Category Cards with exact data:** > 1. Name: `"face"` | Video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260518_203023_87a26602-2898-4acc-a396-c7a2b5ad84fd.mp4` > 2. Name: `"beauty tools"` | Video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260518_203415_b86e3f19-2aec-46cd-9a86-b64c40118e38.mp4` > 3. Name: `"body"` | Video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260518_203051_85fee398-ea01-4aa0-972b-137a74213be5.mp4` > > **Card Layout (each card):** > - `position: relative`, flexbox column with `justify-between`, `items-start`. > - Padding: `p-6` mobile, `sm:p-8`, `md:p-12`. > - Heights: `min-h-[400px]` mobile, `sm:min-h-[500px]`, `md:min-h-[750px]`. > - `overflow-hidden`. > - Each card has a staggered

……（完整源码请在站内查看）