The Browser component is a simple mockup that looks and feels like a user's web browser. This can be useful for creating mockups of web applications or to showcase your own website in a more realistic setting.
A basic browser has very minimal styling and can include an optional toolbar.
= daisy_browser(css: "w-full max-w-4xl border border-base-300") do |browser|
- browser.with_toolbar do
%input.input.input-bordered{ placeholder: "https://loco-motion.io" }
.border-t.border-base-300.px-4.py-16.text-center
This is the content of the browser. You can put anything you want here.
You can apply whatever styling you wish to make the browser stand out more.
= daisy_browser(css: "w-full max-w-4xl bg-sky-400 border border-sky-600") do |browser|
- browser.with_toolbar do
%input.input.input-bordered.border-sky-600{ class: "!ml-4 !pl-2 !w-full", placeholder: "https://loco-motion.io" }
.bg-sky-100.border-t.border-sky-600.px-4.py-16.text-center
This browser mockup is very easy to style and make look however you want!