react【实战】首页 -- 响应式横幅

最终效果

电脑/pad端

移动端

组件封装

技术栈: react19 + Tailwind CSS

src/components/ImageHero.jsx

importhero_small_imagefrom"../assets/images/hero_small.jpg";importhero_imagefrom"../assets/images/hero.jpg";constImageHero=()=>{return(<div className="relative bg-black text-white mb-2">{/* 图片区域 */}<img src={hero_small_image}className="w-full h-[480px] object-cover block md:hidden"/><img src={hero_image}className="w-full h-[480px] object-cover hidden md:block"/>{/* 文案+按钮区域 */}<div className="absolute inset-4 flex flex-col p-2 items-center justify-end text-center md:justify-start"><div className="text-4xl md:text-6xl font-bold">iPhone14Pro</div><div className="mt-4 flex space-x-4"><button className="px-6 py-2 border border-blue-600 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">进一步了解</button><button className="px-6 py-2 border border-blue-600 bg-transparent text-white rounded-md hover:bg-blue-700 transition">购买</button></div></div></div>);};exportdefaultImageHero;

使用

importImageHerofrom"../components/ImageHero";

<ImageHero/>