@codinix/device-mockup
Version:
Beautiful responsive mockups for phone, tablet, laptop and desktop — React components, no images needed.
5 lines (4 loc) • 1.18 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const PhoneMockup = ({ children }) => {
return (_jsx("div", { className: "relative border-[3px] border-[#555555] rounded-[44px] shadow-[0_30px_60px_rgba(0,0,0,0.3)]", children: _jsxs("div", { className: "relative w-[320px] h-[640px] rounded-[40px] bg-black shadow-2xl flex items-center justify-center border-[14px] border-black", children: [_jsxs("div", { className: "absolute top-0 left-1/2 -translate-x-1/2 w-[150px] h-[24px] bg-black rounded-b-[20px] z-10 flex items-center justify-center gap-2", children: [_jsx("div", { className: "w-[45px] h-[5px] bg-[#555555] rounded-full" }), _jsx("div", { className: "w-[8px] h-[8px] bg-[#555555] rounded-full" })] }), _jsx("div", { className: "w-full h-full bg-white rounded-[26px] overflow-hidden", children: children }), _jsx("div", { className: "absolute left-[-20px] top-[80px] w-[4px] h-[36px] rounded-full bg-[#2e2e2e]" }), _jsx("div", { className: "absolute left-[-20px] top-[130px] w-[4px] h-[36px] rounded-full bg-[#2e2e2e]" }), _jsx("div", { className: "absolute right-[-20px] top-[160px] w-[4px] h-[80px] rounded-full bg-[#2e2e2e]" })] }) }));
};