How to create different device looks (smartphone, tablet and laptop) with CSS?

To create different device looks with CSS, the code is as follows −


 Live Demo

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
   .mobileDevice {
      position: relative;
      width: 360px;
      height: 400px;
      margin: auto;
      border: 16px rgb(7, 80, 35) solid;
      border-top-width: 60px;
      border-bottom-width: 60px;
      border-radius: 36px;
   .mobileDevice:after {
      content: '';
      display: block;
      width: 35px;
      height: 35px;
      position: absolute;
      left: 50%;
      bottom: -65px;
      transform: translate(-50%, -50%);
      background: #333;
      border-radius: 50%;
      border:2px solid rgb(200, 255, 0);
   .mobileDevice .screen {
      width: 360px;
      height: 400px;
      background: white;
<h1 style="text-align: center;">Device look example </h1>
<div class="mobileDevice">
<div class="screen">
<iframe src="" style="width:100%;border:none;height:100%" />


The above code will produce the following output −