JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<div class="charger">
  <div class="iphone-8">
    <div class="bazzel">
      <div class="screen">
        <h1>Hello World</h1>
      </div>
    </div>
    <div class="header">
      <div class="sensors"></div>
    </div>
    <div class="volume"></div>
    <div class="power"></div>
    <div class="home"></div>
  </div>
</div>

SCSS

// colors
$bg-color: #303030;
$iphone8-color: #e2e3e4;
$iphone8-color-dark: darken($iphone8-color, 10%);
$bazzel-color: #fff;
$black-color: #000;
$screen-color: #333230;
$screen-border-color: #222;
$header-color: #666;
// sizes 
$body-padding: 1%;
$iphone8-height: 698px;
$iphone8-width: 336px;
$iphone8-margin: -50px;
$bazzel-height: 698px;
$bazzel-width: 336px;
$screen-height: 534px;
$screen-width: 300px;
$header-height: 36px;
$header-width: 128px;
$home-height: 46px;
$home-width: 46px;
// mixin
@mixin center {
  display: flex;
  justify-content: center;
}

@mixin pseudo($position: absolute, $content: "") {
  content: $content;
  position: $position;
}

@mixin reset {
  * {
    &,
    &::before,
    &::after {
      box-sizing: border-box;
      display: block;
    }
  }
  z-index: 1;
  position: relative;
}

@mixin button($height, $width) {
  background: $iphone8-color-dark;
  height: $height;
  width: $width;
}

@mixin sensors($height, $width, $left, $top, $margin) {
  height: $height;
  width: $width;
  left: $left;
  top: $top;
  margin: $margin;
}


/*------------------------------------------------*/

body {
  @include center;
  background: $bg-color;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 300;
  color: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: $body-padding;
}

.charger {
  margin-top: 60px;
}

.iphone-8 {
  @include reset;
  height: $iphone8-height;
  width: $iphone8-width;
  margin-top: $iphone8-margin;
  .bazzel {
    height: $bazzel-height;
    width: $bazzel-width;
    background: $bazzel-color;
    border-radius: 54px;
    box-shadow: inset 0 0 0 2px $iphone8-color-dark, inset 0 0 0 6px $iphone8-color;
    padding: 82px 18px;
  }
  .screen {
    @include center;
    height: $screen-height;
    width: $screen-width;
    background-color: $screen-color;
   ...