mockups
Tailwind CSS Window
The window mockup presents content inside a styled container that mimics a standard OS window, ideal for showcasing apps, websites, or UI previews.
Wtilize the mockup-window class as a container for the window mockup and apply Tailwind utility classes such as border and background-color for styling.
Hello!
<div class="mockup-window border border-base-content/20">
<div class="flex justify-center px-4 py-16 border-t border-base-content/20">Hello!</div>
</div>Window mockup featuring a customizable background color. Update it to your preference using the bg-* Tailwind utility class.
Hello!
<div class="mockup-window border border-base-content/20 bg-base-300/40">
<div class="flex justify-center px-4 py-16 bg-base-200">Hello!</div>
</div>Window mockup featuring a image.
<div class="mockup-window border border-base-content/20 bg-base-200">
<div class="flex justify-center h-80"><img class="w-full object-cover" src="https://cdn.flyonui.com/fy-assets/components/carousel/image-21.png" alt="window background" /></div>
</div>