JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<div class="phone-wrap">
  <div class="phone-frame">
    <iframe border="0" frameborder="0" src="https://platform.reelcontent.com/api/public/players/mobile?campaign=cam-d207e42d7880c7&amp;preview=true&amp;countdown=0" width="90%" height="90%"></iframe>
  </div>  
</div>

CSS

.phone-wrap {
  height: 740px;
  width: 360px;
  position: relative;
}
  .phone-frame {
    position: absolute;
    width: 90%;
    top: 5%;
    bottom: 5%;
    left: 5%;
    right: 5%;
    background: #fff;
    text-align: center;
    border-radius: 20px;
    border: 1px solid #ddd;
    box-shadow: 0 0 5px #ddd;
  }
  .phone-frame:before {
    width: 16%;
    height: 10px;
    border-radius: 5px;
    background: #ddd;
    content: '';
    position: absolute;
    top: 15px;
    left: 42%;
    border: 1px solid #ccc;
    box-shadow: inset 0 0 3px #bbb;
  }
  .phone-frame:after {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ddd;
    border: 1px solid #ccc;
    content: '';
    position: absolute;
    bottom: 10px;
    left: 45%;
    box-shadow: inset 0 0 3px #bbb;
  }
  .phone-frame iframe {
    margin-top: 10%;
    border: 1px solid #ccc;
    height: 86% !important;
  }
  .phone-frame iframe:before {
    content: 'a';
  }