.monitor

dabblet.css

html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; text-align:center; vertical-align:middle;}
body {background:url(https://three-iscool.iscoolcdn.com/assets/prod/bundles/core/look/back_general_2.6588390d20c53e62152cc383e827e7b6.jpg);}

.monitor img {width:100%}

/*
 * .monitor
 *
 * $color = black
 */

.monitor {display:inline-block; position:relative; z-index:0}
.monitor .screen {width:16em; height:9em; background-color:white; border-radius:.5em; padding:1em; box-sizing:border-box; box-shadow:inset 0 0 .3em rgba(0,0,0,.3); position:relative; text-align:center;}
.monitor .screen:before {content:"KIWY"; display:inline-block; width:3em; position:absolute; bottom:0; left:50%; margin-left:-1.5em; margin-bottom:.5em; font-size:50%; color:silver; font-family:"Arial Black"}
.monitor .screen > .in {display:block; width:100%; height:100%; background-color:white; overflow:hidden; box-shadow:inset 0 0 .3em rgba(0,0,0,.3);}
.monitor .base {display:block; margin:0 auto; width: 10em; height:1.5em; background-color: white; border-radius:60% 60%; position:relative; margin-top:.75em; box-shadow:/*inset 2em -.3em .1em .4em rgba(0,0,0,.15),*/ 0 0 .5em rgba(0,0,0,.5); z-index:-1;}
.monitor .base:before {content:" "; display:inline-block; width:.25em; height:3em; background-color: white; position:absolute; left:50%; bottom:50%; margin-left:-.125em; box-shadow:0em -.1em .2em rgba(0,0,0,.2)}

.monitor {font-size:180%}

dabblet.html

<div class="monitor">
  <div class="screen"><div class="in">
    <img src="https://three-iscool.iscoolcdn.com/assets/prod/bundles/core/look/back_general_2.6588390d20c53e62152cc383e827e7b6.jpg">
  </div></div>
  <div class="base"></div>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}