Browser Mockup

<div class="sui-browser">
  <div class="sui-browser-bar">
    <div class="sui-browser-dots"><span></span><span></span><span></span></div>
    <div class="sui-browser-url">softui-css.netlify.app</div>
  </div>
  <div class="sui-browser-body">
    <!-- Your content here -->
  </div>
</div>

<div class="sui-browser">
  <div class="sui-browser-bar">
    <div class="sui-browser-dots"><span></span><span></span><span></span></div>
    <div class="sui-browser-actions">
      <svg viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>
      <svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
    </div>
    <div class="sui-browser-url">https://softui-css.netlify.app/components/buttons/</div>
  </div>
  <div class="sui-browser-body">
    <button class="sui-btn sui-btn-primary sui-btn-sm">Primary</button>
    <button class="sui-btn sui-btn-success sui-btn-sm">Success</button>
  </div>
</div>

<div class="sui-browser sui-browser-win">
  <div class="sui-browser-bar">
    <div class="sui-browser-url">softui-css.netlify.app</div>
    <div class="sui-browser-win-btns">
      <button><svg viewBox="0 0 10 10"><line x1="1" y1="5" x2="9" y2="5"/></svg></button>
      <button><svg viewBox="0 0 10 10"><rect x="1" y="1" width="8" height="8" rx="1"/></svg></button>
      <button><svg viewBox="0 0 10 10"><line x1="1" y1="1" x2="9" y2="9"/><line x1="9" y1="1" x2="1" y2="9"/></svg></button>
    </div>
  </div>
  <div class="sui-browser-body">
    <!-- Your content here -->
  </div>
</div>

<div class="sui-browser">
  <div class="sui-browser-tabs">
    <div class="sui-browser-tab active">SoftUI Docs</div>
    <div class="sui-browser-tab">GitHub</div>
    <div class="sui-browser-tab">npm</div>
  </div>
  <div class="sui-browser-bar">
    <div class="sui-browser-dots"><span></span><span></span><span></span></div>
    <div class="sui-browser-url">softui-css.netlify.app</div>
  </div>
  <div class="sui-browser-body">
    <!-- Your content here -->
  </div>
</div>

<div class="sui-browser sui-browser-dark">
  <div class="sui-browser-tabs">
    <div class="sui-browser-tab active">Dashboard</div>
    <div class="sui-browser-tab">Analytics</div>
  </div>
  <div class="sui-browser-bar">
    <div class="sui-browser-dots"><span></span><span></span><span></span></div>
    <div class="sui-browser-actions">
      <svg viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>
      <svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
    </div>
    <div class="sui-browser-url">app.cloudmetrics.io/dashboard</div>
  </div>
  <div class="sui-browser-body">
    <!-- Your content here -->
  </div>
</div>

<div class="sui-browser">
  <div class="sui-browser-bar">
    <div class="sui-browser-dots"><span></span><span></span><span></span></div>
    <div class="sui-browser-url">softui-css.netlify.app</div>
  </div>
  <div class="sui-browser-body">
    <img src="screenshot.png" alt="Screenshot">
  </div>
</div>

<!-- The body accepts any content: images, components, HTML -->