<div class="browser-wrapper">
    <div class="browser-head">
        <div class="window-controls">
            <span></span>
            <span></span>
            <span></span>
        </div>

        <div class="url-bar">
            <span class="url-controls">
                <span class="url-controls__item left">
                    <img src="http://muhammederdem.com.tr/imagesrdm//arrow-left.png" alt="">
                </span>
                <span class="url-controls__item right">
                    <img src="http://muhammederdem.com.tr/imagesrdm//arrow-right.png" alt="">
                </span>
            </span>

            <span class="url-protocol">
                http://
            </span>

            <a href="http://muhammederdem.com.tr/" target="_blank" class="url-txt">
                muhammederdem.com.tr
            </a>

            <span class="url-next">
                <img src="http://muhammederdem.com.tr/imagesrdm//arrow-right.png" alt="">
            </span>


        </div>

    </div>

    <div class="browser-inner">
        <img src="http://muhammederdem.com.tr/imagesrdm//browser-inner.jpg" alt="" class="browser-inner__img">

    </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&subset=latin-ext');

body {
  background-color: #b9c1d4;
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  &,
  &:before,
  &:after {
    box-sizing: border-box;
  }
}

html {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
}


a,a:hover,a:focus,a:active {
  color: inherit;
  text-decoration: none;
  transition: all .5s;
}

img {
  vertical-align: middle;
  max-width: 100%;
}



.browser-wrapper {
  display: block;
  max-width: 1170px;
  width: 96%;
  margin: 3vh auto;
  height: 94vh;
  background: #fff;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 9px 9px 30px 0 rgba(1, 50, 101, 0.21);
}

.browser-head {
  display: flex;
  background: #fff;
  color: #1c4360;
  width: 100%;
  padding: 5px 25px;
  align-items: center;
  height: 80px;
}

.window-controls {
  display: flex;
  width: 110px;
  justify-content: center;
  margin-right: 20px;

  span {
    display: block;
    width: 18px;
    height: 18px;
    background: #ededed;
    border-radius: 50%;
    margin-left: 10px;

    &:first-of-type {
      margin-left: 0;
    }
  }
}

.url-bar {
  display: flex;
  width: 100%;
  //box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 3px 21px 0px rgba(81, 81, 81, 0.11);
  padding: 10px 15px;
  border-radius: 6px;
  height: 50px;
  align-items: center;
  position: relative;
}

.url-controls {
  display: flex;

  &__item {
    display: block;
    width: 25px;
    pointer-events: none;

    &.left {
      display: block;
    }

    &.right {
      display: block;
    }
  }
}

.url-protocol {
  padding: 10px;
  background: #ededed;
  border-radius: 5px;
  margin: 0 20px 0 15px;
  color: #515151;
  opacity: 0.5;
  font-weight: 500;
}

.url-txt {
  display: block;
  color: #515151;
  opacity: 0.5;
  font-weight: 500;

  &:hover {
    opacity: .8;
  }
}

.url-next {
  display: block;
  width: 25px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.browser-inner {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.scrollbar-track {
  background: transparent!important;
}

.scrollbar-thumb {
  background: rgba(50, 50, 50, 0.25)!important;
}






View Compiled
    var Scrollbar = window.Scrollbar;

    Scrollbar.use(window.OverscrollPlugin);
    Scrollbar.init(document.querySelector('.browser-inner'), {
        plugins: {
            overscroll: true,
        }
    });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://muhammederdem.com.tr/scripts/smooth-scrollbar.js
  2. https://muhammederdem.com.tr/scripts/overscroll.js