JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<div class="window">
  <h2>https://www.c82.net/werner/</h2>
  <div class="content">
    <img src="https://onepagelove.imgix.net/2019/02/opl-master-34.jpg" alt="website screenshot" />
  </div>
</div>

SCSS

div {
//  outline: 1px solid red;
}
.window {
  background: radial-gradient(circle at 15px 10px, #EB5547 5px, transparent 5px),
              radial-gradient(circle at 30px 10px, #EBB447 5px, transparent 5px),
              radial-gradient(circle at 45px 10px, #1DC91D 5px, transparent 5px);
  border-radius: 3px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.75);
  height: calc(90vh - 40px);
  margin: 0;
  padding: 20px 0 0;
  position: relative;
  width: 90%;
  &:before {
    background: #DDD;
    border-radius: 3px 3px 0 0;
    content: '';
    height: 20px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
  }
  h2 {
    color: #555;
    font-family: monospace;
    font-size: 10px;
    font-weight: 500;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 60px;
    top: 3px;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.5);
    text-transform: lowercase;
  }
}

.content {
  border-radius: 0 0 3px 3px;
  height: 100%;
  overflow-y: auto;
  img {
    display: block;
    width: 100%;
  }
}