CSSを使用してブラウザウィンドウの例を作成するにはどうすればよいですか？

CSSを使用してブラウザウィンドウの例を作成するには、コードは次のとおりです-

例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
   body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   * {
      box-sizing: border-box;
   }
   .menuBar {
      border: 3px solid #f1f1f1;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
   }
   .menuRow {
      padding: 10px;
      background: #f1f1f1;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
   }
   .browserField {
      float: left;
   }
   .left {
      width: 15%;
   }
   .right {
      width: 10%;
   }
   .middle {
      width: 75%;
   }
   .menuRow:after {
      content: "";
      display: table;
      clear: both;
   }
   .menuBarDots {
      margin-top: 4px;
      height: 12px;
      width: 12px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
   }
   input[type=text] {
      width: 100%;
      border-radius: 3px;
      border: none;
      background-color: white;
      margin-top: -8px;
      height: 25px;
      color: #666;
      padding: 5px;
   }
   .menuDots {
      width: 5px;
      height: 5px;
      background-color: #aaa;
      margin: 3px 0;
      display: block;
      border-radius: 50%;
   }
   .content {
      padding: 10px;
   }
</style>
</head>
<body>
<div class="menuBar">
<div class="menuRow">
<div class="browserField left">
<span class="menuBarDots" style="background:#ED594A;"></span>
<span class="menuBarDots" style="background:#FDD800;"></span>
<span class="menuBarDots" style="background:#5AC05A;"></span>
</div>
<div class="browserField middle">
<input type="text" value="https://demo.com/">
</div>
<div class="browserField right">
<div style="float:right">
<span class="menuDots"></span>
<span class="menuDots"></span>
<span class="menuDots"></span>
</div>
</div>
</div>
<div class="content">
<h1>Sample Text</h1>
<h2>Welcome to our website</h2>
</div>
</div>
</body>
</html>