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-accent border border-accent") do |browser|
- browser.with_toolbar do
%input.input.input-bordered.border-accent-content{ class: "ml-4! pl-2! w-full!", placeholder: "https://loco-motion.io" }
.bg-base-200.border-t.border-accent.px-4.py-16.text-center
This browser mockup is very easy to style and make look however you want!
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.