JSFiddle - React, Tailwind, and code Playground

by Daniel Redwood

HTML

<svg id="iphone" xmlns="http://www.w3.org/2000/svg" width="384" height="805" viewBox="-0.5 1.016 384 805" enable-background="new -0.5 1.016 384 805"><path id="mask" class="st0" d="M-.5.016v806h384v-806h-384zm353 687.984h-320v-568h320v568z"/><path id="frame" class="st1" d="M329.763 8h-11.263v-2.366c0-1.679-1.244-3.634-2.923-3.634h-52.692c-1.679 0-4.385 1.955-4.385 3.634v2.366h-201.316c-27.981 0-51.684 23.359-51.684 51.34v57.66h-1.008c-1.68 0-3.992 1.459-3.992 3.139v28.373c0 1.68 2.312 3.488 3.992 3.488h1.008v41h-1.008c-1.68 0-3.992 1.459-3.992 3.138v20.267c0 1.679 2.312 2.596 3.992 2.596h1.008v39h-1.008c-1.68 0-3.992 2.324-3.992 4.003v20.266c0 1.681 2.312 2.731 3.992 2.731h1.008v469.471c0 27.979 23.702 50.528 51.684 50.528h272.579c27.981 0 49.737-22.549 49.737-50.529v-695.131c0-27.981-21.756-51.34-49.737-51.34zm-136.796 29.046c4.479 0 8.107 3.63 8.107 8.108 0 4.477-3.631 8.104-8.107 8.104s-8.105-3.629-8.105-8.104c-.003-4.478 3.626-8.108 8.105-8.108zm-27.36 27.954h54.719c4.478 0 8.104 3.523 8.104 8s-3.628 8-8.104 8h-54.719c-4.479 0-8.106-3.524-8.106-8s3.628-8 8.106-8zm27.36 715.814c-19.588 0-35.465-15.88-35.465-35.468 0-19.587 15.877-35.464 35.465-35.464s35.465 15.877 35.465 35.464c0 19.59-15.877 35.468-35.465 35.468zm159.533-92.814h-320v-568h320v568z"/></svg>

CSS

body {
    background: #eceef1;
    padding: 20px;
    min-height: 100vh;
    box-sizing: border-box;
}

#iphone {
    display: block;
    margin: 0 auto;
    stroke-dasharray: 2284;
    stroke-dashoffset: 2284;
    -webkit-animation: draw 2s ease-in-out forwards;
}
#mask {
    fill: #ECEEF1;
}
#frame {
    fill: none;
    stroke: #34383C;
    stroke-width: 2;
    stroke-miterlimit: 10;
}


@-webkit-keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}