JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

JavaScript

const mobile = {
  key: 'mobile',
  name: 'Mobile',
  width: 375,
  height: 667,
  faIcon: 'fa-mobile',
  devices: new Map([
    ['iphone-xs-max', {
      name: 'iPhone XR/XS Max',
      width: 414,
      height: 852,
      os: 'ios',
      hasNotch: true
    }],
    ['iphone-x', {
      name: 'iPhone X/XS',
      width: 375,
      height: 768,
      os: 'ios',
      hasNotch: true
    }],
    ['iphone-6-plus', {
      name: 'iPhone 6/6s/7/8 Plus',
      width: 414,
      height: 736,
      os: 'ios'
    }],
    ['iphone-6', {
      name: 'iPhone 6/6s/7/8',
      width: 375,
      height: 667,
      os: 'ios',
      default: true
    }],
    ['iphone-5', {
      name: 'iPhone 5/5s',
      width: 320,
      height: 568,
      os: 'ios'
    }],
    ['iphone-4', {
      name: 'iPhone 4/4s',
      width: 320,
      height: 480,
      os: 'ios'
    }],
    ['android-mobile-large', {
      name: 'Android Large 5"-6"',
      width: 360,
      height: 640,
      os: 'android'
    }],
    ['android-mobile-small', {
      name: 'Android Small 4"',
      width: 320,
      height: 533,
      os: 'android'
    }],
    ['lumia-930', {
      name: 'NOKIA Lumia 930',
      width: 360,
      height: 640,
      os: 'windows'
    }]
  ])
}

const tablet = {
  key: 'tablet',
  name: 'Tablet',
  width: 768,
  height: 1024,
  faIcon: 'fa-tablet',
  devices: new Map([
    ['ipad-pro-large', {
      name: 'iPad Pro 12.9"',
      width: 1024,
      height: 1366,
      os: 'ios'
    }],
    ['ipad-pro-medium', {
      name: 'iPad Pro 11"',
      width: 834,
      height: 1194,
      os: 'ios'
    }],
    ['ipad-pro', {
      name: 'iPad Pro 10.5"',
      width: 834,
      height: 1112,
      os: 'ios'
    }],
    ['ipad', {
      name: 'iPad/iPad Air/iPad Mini',
      width: 768,
      height: 1024,
      os: 'ios',
      default: true
    }],
    ['android-tablet', {
      name: 'Android 7"-10"',
      width: 800,
      height: 1280,
      os: 'android'
    }],
   ...