JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<div id="device-container">

  <div id="device" class="phone">
    <div id="chin"></div>
    <iframe id="device--content" src="https://howdoweb.com"></iframe>
  </div>
</div>

<nav>
  <button onclick="change('phone');">mobile</button>
  <button onclick="change('phoneP');">mobileP</button>
  <button onclick="change('tablet');">tablet</button>
  <button onclick="change('desktop');">desktop</button>
  <button onclick="change('tv');">tv</button>
</nav>

SCSS

* {
    margin: 0;
    padding: 0;
    bottom: 0;
    box-sizing: border-box;
}

html {
  height: 100%;
}
body {
    font-family: sans-serif;
    height: 100%;
}

#device-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
#device {
    border: solid 18px #eee;
    border-radius: 40px;
    //margin: 0 auto;
    box-shadow: 5px 5px 40px #777;
    overflow: hidden;
    transition: 0.5s;
    background: black;
    transform-origin: 50% 50%;
    position: relative;
}

#chin {
    width: 150px;
    height: 20px;
    border: solid 20px #eee;
    position: relative;
    top: -30px;
    left: 65px;
    border-radius: 30px;
    z-index: 5;
}

#device--content {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    transition: 0.5s;
}

.phone {
    width: 300px;
    height: 600px;
    transform: translate (0, 0) scale(1) rotate(0deg);
}
.phone #device--content {
    transform: translate(0px, -40px) rotate(0deg);
    width: 300px;
}

.phoneP {
    width: 300px;
    height: 600px;
    transform: rotate(90deg);
    #device--content {
      transform: translate(-20px, -55px) rotate(-90deg);
      width: 600px;
  }
}

.tablet {
    width: 800px;
    height: 400px;
    transform: translate (0, 0) scale(0.8);
}
.tablet #chin, .desktop #chin, .tv #chin {
    height: 0;
    border: 0;
}

.desktop {
    width: 1200px;
    height: calc(100vh);
    transform: scale(0.95);
}
.tv {
    width: 800px;
    height: 400px;
    transform: translate(10px);
}

nav {
    position: fixed;
    left: 0;
    bottom: 0;
    background: black;
    padding: 5px;
    width: 100%;
}

JavaScript

function change(devices) {
  document.getElementById("device").className = devices;

}