JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<div class="laptop">
  <span class="shadow"></span>
  <span class="lid"></span>
  <span class="camera"></span>
  <span class="screen"></span>
  <span class="chassis">
    <span class="keyboard"></span>
  <span class="trackpad"></span>
  </span>
</div>

CSS

.laptop * {
  position: absolute;
}

.laptop {
  position: relative;
  width: 584px;
  height: 405px;
  left: 50%;
  margin-left: -292px;
}

.laptop .shadow {
  left: 17px;
  right: 17px;
  top: 40px;
  height: 490px;
  opacity: .3;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=30);
  background: #7692b3;
  -webkit-filter: blur(30px);
  filter: blur(30px);
}

.laptop .lid {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(45deg, #E5EBF2, #F3F8FB);
  box-shadow: inset 1px -4px 6px rgba(145, 161, 181, .3)
}

.laptop .camera {
  --size: 4px;
  width: var(--size);
  height: var(--size);
  top: 10px;
  left: 50%;
  margin-left: calc(var(--size) / -2);
  border-radius: 50%;
  background: #dae0e8;
}

.laptop .screen {
  top: 24px;
  bottom: 35px;
  left: 17px;
  right: 17px;
  border-radius: 4px;
  box-shadow: -1px 1px 6px rgba(171, 183, 204, .2);
  background: url('https://cdn.safetyskills.com/wp-content/uploads/2017/04/21160441/safetyskills-screenshot.jpg') no-repeat;
  background-size: cover;
}

.laptop .chassis {
  width: 100%;
  height: 142px;
  top: calc(100% - 11px);
  border-radius: 8px 8px 14px 14px;
  -webkit-transform: perspective(880px) rotateX(40deg);
  transform: perspective(880px) rotateX(40deg);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  background: -webkit-linear-gradient(rgba(145, 161, 181, .2), rgba(145, 161, 181, 0)), -webkit-linear-gradient(45deg, #e5ebf2, #f3f8fb);
  background: linear-gradient(rgba(145, 161, 181, .2), rgba(145, 161, 181, 0)), linear-gradient(45deg, #e5ebf2, #f3f8fb);
  box-shadow: inset 0 -2px 3px rgba(145, 161, 181, .5), inset -1px -6px 4px rgba(253, 255, 255, .9);
}

.laptop .chassis * {
  opacity: .3;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=30);
  background: -webkit-linear-gradient(45deg, #b2bdcc, #c1ccd8);
  background: linear-gradient(45deg, #b2bdcc,...