پیشنمایش زنده
کد HTML
<div class="card">
<div class="circles">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
<div class="browser">
<div class="chevrons">
<svg viewBox="0 0 20 20" height="16" width="16" xmlns="http://www.w3.org/2000/svg" data-name="20" id="_20">
<path transform="translate(6.25 3.75)" d="M0,6.25,6.25,0l.875.875L1.75,6.25l5.375,5.375L6.25,12.5Z" id="Fill"></path>
</svg>
<svg viewBox="0 0 20 20" height="16" width="16" xmlns="http://www.w3.org/2000/svg" data-name="20" id="_20">
<path transform="translate(6.625 3.75)" d="M7.125,6.25.875,12.5,0,11.625,5.375,6.25,0,.875.875,0Z" id="Fill"></path>
</svg>
</div>
<div class="search-bar">
<svg xmlns="http://www.w3.org/2000/svg" width="7.89" height="7.887" viewBox="0 0 16.89 16.887">
<path id="Fill" d="M16.006,16.887h0l-4.743-4.718a6.875,6.875,0,1,1,.906-.906l4.719,4.744-.88.88ZM6.887,1.262a5.625,5.625,0,1,0,5.625,5.625A5.631,5.631,0,0,0,6.887,1.262Z" transform="translate(0.003 0)"></path>
</svg>
uiverse.io
<div>
</div>
</div></div></div>
کد CSS
.card {
width: 300px;
height: 254px;
background: lightgrey;
overflow: hidden;
display: flex;
}
.circles,
.browser {
height: 30px;
display: flex;
align-items: center;
}
.circles {
width: 20%;
gap: 8px;
padding: 10px;
}
.c {
width: 09px;
height: 9px;
border-radius: 50%;
box-shadow: inset 2px 2px 5px rgba(235, 235, 235, 0.356);
}
.c:first-child {
background-color: red;
}
.c:nth-child(2) {
background-color: rgb(204, 167, 4);
}
.c:last-child {
background-color: green;
}
.browser {
width: 80%;
padding: 5px;
display: flex;
gap: 10px;
}
.chevrons {
display: flex;
}
.search-bar {
position: relative;
border: 0.5px solid black;
border-radius: 5px;
padding: 5px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: rgb(88, 88, 88);
box-shadow: inset 2px 2px 2px #05050525;
}
.search-bar svg {
position: absolute;
left: 10px;
}