flyonui/components/mockup.css

The easiest, free and open-source Tailwind CSS component library with semantic classes.

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.mockup-code{border-radius:var(--radius-box);background-color:var(--color-base-200);min-width:18rem;color:color-mix(in oklab,var(--color-base-content)80%,transparent);direction:ltr;padding-block:1.25rem;position:relative;overflow:auto hidden;&:before{content:"";opacity:.3;border-radius:3.40282e38px;width:.75rem;height:.75rem;margin-bottom:1rem;display:block;box-shadow:1.4em 0,2.8em 0,4.2em 0}& pre{padding-inline-end:1.25rem;&:before{content:"";margin-right:2.2ch}}& pre[data-prefix]{&:before{content:attr(data-prefix);text-align:right;opacity:.5;width:2rem;display:inline-block}}}.mockup-window{border-radius:var(--radius-box);flex-direction:column;width:100%;padding-top:1.25rem;display:flex;position:relative;overflow:auto hidden;&:before{content:"";aspect-ratio:1;opacity:.3;border-radius:3.40282e38px;flex-shrink:0;align-self:flex-start;height:.75rem;margin-bottom:1rem;display:block;box-shadow:1.4em 0,2.8em 0,4.2em 0}[dir=rtl] &:before{align-self:flex-end}& pre[data-prefix]{&:before{content:attr(data-prefix);text-align:right;display:inline-block}}}.mockup-browser{border-radius:var(--radius-box);width:100%;position:relative;overflow:auto hidden;& pre[data-prefix]{&:before{content:attr(data-prefix);text-align:right;display:inline-block}}& .mockup-browser-toolbar{direction:ltr;align-items:center;width:100%;margin-block:.75rem;padding-inline-end:1.4em;display:inline-flex;&:before{content:"";aspect-ratio:1;opacity:.3;border-radius:3.40282e38px;height:.75rem;margin-inline-end:4.8rem;display:inline-block;box-shadow:1.4em 0,2.8em 0,4.2em 0}& .input{padding-inline-start:2rem;text-overflow:ellipsis;white-space:nowrap;width:24rem;height:1.75rem;margin-inline:auto;padding-top:.125rem;display:block;position:relative;overflow:hidden;&:before{content:"";inset-inline-start:.5rem;aspect-ratio:1;--tw-translate-y:calc(calc(1/2*100%)*-1);height:.75rem;translate:var(--tw-translate-x)var(--tw-translate-y);border-style:var(--tw-border-style);opacity:.6;border-width:2px;border-color:currentColor;border-radius:3.40282e38px;position:absolute;top:50%}&:after{content:"";inset-inline-start:1.25rem;--tw-translate-y:calc(1/4*100%);height:.5rem;translate:var(--tw-translate-x)var(--tw-translate-y);border-style:var(--tw-border-style);opacity:.6;border-width:1px;border-color:currentColor;border-radius:3.40282e38px;position:absolute;top:50%;rotate:-45deg}}}}.mockup-phone{background-color:#000;border:4px solid #4e4d4d;border-radius:50px;margin:0 auto;padding:6px;display:inline-block;overflow:hidden;& .mockup-phone-camera{background:#000;border-radius:3.40282e38px;width:33%;height:25px;margin:0 auto;position:relative;top:5px;left:0;&:after{content:"";background-color:#2a292d;border-radius:5px;width:12px;height:12px;position:absolute;top:25%;right:8%}}& .mockup-phone-display{border-radius:40px;margin-top:-25px;overflow:hidden}}}