CSS MacOS Big Sur Window

css-macos-big-sur-window.markdown

CSS MacOS Big Sur Window

CSS MacOS Big Sur Window

A Pen by Agah C. on CodePen.

License.

index.html

<div class="browser-mockup">
<pre><code class="hljs css bash">npm install monosomething
</code></pre>
</div>

style.css

.browser-mockup {
border-top: 2.8em solid rgba(230, 230, 230, 0.3);
    box-shadow: 0 0.1em 1em 0 rgb(0 0 0 / 20%);
    position: relative;
    border-radius: 12px 12px 0 0;
	    margin: 1em;
    flex: 1;
}

.browser-mockup:before {
    display: block;
    position: absolute;
    content: '';
    top: -1.64em;
    left: 1.32em;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background-color: #f15f59;
    box-shadow: 0 0 0 2px #f15f59, 1.3em 0 0 2px #febb2b, 2.6em 0 0 2px #4bb749;
}