Browser window mockup - SVG

by Nicholas Berlette

HTML

<svg viewBox="-10 -10 510 350" fill="none" preserveAspectRatio="xMidYMid meet" class="r-11mp6g5">
  <g filter="drop-shadow(0 2 1.25 #0003)">
  <rect x="0" y="0" fill="#f000" stroke="#bbb" stroke-width="2" stroke-opacity="0.5" width="calc(100% - 19px)" height="calc(100% - 20px)" rx="5.5" style="z-index:1000" />
  <path d="M5 .5h481a4.5 4.5 0 014.5 4.5v320a4.5 4.5 0 01-4.5 4.5H5A4.5 4.5 0 01.5 325V5A4.5 4.5 0 015 .5z" fill="#E3E8ED" stroke="#E3E8ED"></path>
  <path fill="#fff" d="M0 32h491v30H0z"></path>
  <mask id="browser-frame" maskUnits="userSpaceOnUse" x="0" y="32" width="491" height="30">
    <path fill="#fff" d="M0 32h491v30H0z"></path>
  </mask>
  <rect x="79" y="7" width="160" height="35" rx="6" fill="#fff" />
  <g mask="url(#browser-frame)">
    <rect x="85" y="36" width="400" height="23" rx="6.5" class="url-input" />
  </g>
  <path fill="#F2F2F2" d="M0 61h491v1H0z" />
  <circle cx="17" cy="17" r="5" class="c-red" />
  <circle cx="34" cy="17" r="5" class="c-ylw" />
  <circle cx="51" cy="17" r="5" class="c-grn" />
  <path d="M107 45.5h-.5v-1a2.5 2.5 0 00-5 0v1h-.5c-.55 0-1 .45-1 1v5c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-5c0-.55-.45-1-1-1zm-3 4.5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm1.55-4.5h-3.1v-1c0-.855.695-1.55 1.55-1.55.855 0 1.55.695 1.55 1.55v1z" class="btn-dark" />
  <path d="M21.333 47.083h-7.099l3.261-3.26-.828-.823L12 47.667l4.667 4.666.822-.822-3.255-3.261h7.1v-1.167zM40.667 43l-.823.822 3.255 3.261H36v1.167h7.1l-3.256 3.26.823.823 4.666-4.666L40.667 43z" fill="#D2D2D2" />
  <path d="M66.957 44.37A4.642 4.642 0 0063.66 43 4.66 4.66 0 0059 47.667a4.66 4.66 0 004.66 4.666 4.657 4.657 0 004.51-3.5h-1.213a3.495 3.495 0 01-3.296 2.334c-1.931 0-3.5-1.57-3.5-3.5 0-1.931 1.569-3.5 3.5-3.5a3.45 3.45 0 012.462 1.038l-1.879 1.878h4.084V43l-1.371 1.37z" class="btn-dark" />
  
  </g>
</svg>

<!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" style="height:370.774px;margin-right:-30px" viewBox="0 0 491...

SCSS

$btn-red: #FE625B;
$btn-ylw: #F9BA40;
$btn-grn: #26C93B;

.c-red, .c-ylw, .c-grn {
  transition: fill 0.3s ease-in;
  cursor: pointer;
  filter: drop-shadow(0 0.15em 0.1em #fff5);
}
.c-red {
  fill: $btn-red;
  
  &:hover {
    fill: darken($btn-red, 5%);
  }
}
.c-ylw {
  fill: $btn-ylw;
    
  &:hover {
    fill: darken($btn-ylw, 5%);
  }
}
.c-grn {
  fill: $btn-grn;
    
  &:hover {
    fill: darken($btn-grn, 5%);
  }
}
.btn-dark {
  fill: currentColor;
  fill-rule: evenodd;
  color: #4E4E50;
  transition: all 0.3s ease-in;
  cursor: default;
}
.btn-dark:hover {
  color: #333;
}
.url-input {
  /* fill: #F5F6F7; */
  fill-rule: evenodd;
  fill: #eaeaea;
}