Mockup browser component

Example

Full

mockup-browser.html

<div class="mockup-browser max-w-xl"><div class="mockup-browser-bar"><span class="mockup-browser-url">https://example.com</span></div><div class="grid h-48 place-items-center">Hello</div></div>

Classes

3 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

Class Type What it does

Class	Type	What it does
	Base	Base class of the mockup browser. On a <div> in the example. Sets overflow, border, corner radius, background and shadow. CSS `.mockup-browser > :not(.mockup-browser-bar), .mockup-window > * { border-top: var(--m-border-width) solid var(--border); background: var(--background); } .mockup-browser, .mockup-window { position: relative; overflow: hidden; border: var(--m-border-width) solid var(--border); border-radius: var(--m-radius-2xl); background: var(--surface-2); box-shadow: var(--m-shadow-lg); }`
	Part	Part of the mockup browser. On a <div> in the example. Sets flex display, alignment, gap, padding, generated content and width. CSS `.mockup-browser-bar::before { margin-inline-end: 2.25rem; } .mockup-browser-bar { display: flex; align-items: center; gap: 1rem; padding: 0.625rem 0.875rem; }`
	Part	Part of the mockup browser. On a <span> in the example. Sets alignment, width, margin, overflow, padding and corner radius. CSS `.mockup-browser-url { flex: 1; max-width: 28rem; margin-inline: auto; overflow: hidden; padding: 0.3rem 0.875rem; border-radius: var(--m-radius-md); background: var(--surface); font-size: 0.8125rem; color: var(--muted-foreground); text-align: center; text-overflow: ellipsis; white-space: nowrap; }`

Base

Base class of the mockup browser. On a <div> in the example. Sets overflow, border, corner radius, background and shadow.

CSS

.mockup-browser > :not(.mockup-browser-bar), .mockup-window > * {
  border-top: var(--m-border-width) solid var(--border);
  background: var(--background);
}

.mockup-browser, .mockup-window {
  position: relative;
  overflow: hidden;
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-2xl);
  background: var(--surface-2);
  box-shadow: var(--m-shadow-lg);
}

Part

Part of the mockup browser. On a <div> in the example. Sets flex display, alignment, gap, padding, generated content and width.

CSS

.mockup-browser-bar::before {
  margin-inline-end: 2.25rem;
}

.mockup-browser-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 0.875rem;
}

Part

Part of the mockup browser. On a <span> in the example. Sets alignment, width, margin, overflow, padding and corner radius.

CSS

.mockup-browser-url {
  flex: 1;
  max-width: 28rem;
  margin-inline: auto;
  overflow: hidden;
  padding: 0.3rem 0.875rem;
  border-radius: var(--m-radius-md);
  background: var(--surface);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Mockup browser: start from the base class, then add modifiers -->
<div class="mockup-browser max-w-xl"><div class="mockup-browser-bar"><span class="mockup-browser-url">https://example.com</span></div><div class="grid h-48 place-items-center">Hello</div></div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

#Example

#Classes

#Usage

#Accessibility

#Related components

Example

Classes

Usage

Accessibility

Related components