@codinix/device-mockup
Version:
Beautiful responsive mockups for phone, tablet, laptop and desktop — React components, no images needed.
5 lines (4 loc) • 1.2 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const TabletMockup = ({ children }) => {
return (_jsx("div", { className: "relative border-[3px] border-[#565656] rounded-[36px] shadow-[0_30px_60px_rgba(0,0,0,0.3)]", children: _jsxs("div", { className: "relative w-[480px] h-[640px] rounded-[32px] bg-black shadow-xl flex items-center justify-center border-[18px] border-black", children: [_jsxs("div", { className: "absolute -top-[14px] left-1/2 -translate-x-1/2 flex items-center gap-2 z-20", children: [_jsx("div", { className: "w-[6px] h-[6px] bg-[#333333] rounded-full" }), _jsx("div", { className: "w-[10px] h-[10px] bg-[#333333] rounded-full" }), _jsx("div", { className: "w-[2px] h-[2px] bg-[#e9e8e9] rounded-full" })] }), _jsx("div", { className: "w-full h-full bg-white rounded-[20px] overflow-hidden", children: children }), _jsx("div", { className: "absolute right-[50px] top-[-23px] w-[50px] h-[4px] rounded-full bg-[#424242]" }), _jsx("div", { className: "absolute right-[-22px] top-[30px] w-[4px] h-[30px] rounded-full bg-[#424242]" }), _jsx("div", { className: "absolute right-[-22px] top-[70px] w-[4px] h-[30px] rounded-full bg-[#424242]" })] }) }));
};