JSFiddle - React, Tailwind, and code Playground

by PubliusPirooz

JavaScript

(() => {
	"use strict";
	
	/**
	 * @typedef Device
	 * @property {string} type
	 * @property {string} name
	 * @property {number} width
	 * @property {number} height
	 * @property {string} userAgent
	 * @property {string} os
	 * @property {number} pixelRatio
	 * @property {boolean} featured
	 * @property {boolean} touch
	 */

	/**
	 * @typedef Settings
	 * @property {string} type
	 * @property {string} [name]
	 */

	const json = `[
		{
			"type": "phone",
			"name": "Galaxy Note 3",
			"featured": false,
			"width": 360,
			"userAgent": "Mozilla/5.0 (Linux; U; Android 4.3; en-us; SM-N900T Build/JSS15J) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30",
			"touch": true,
			"os": "",
			"pixelRatio": 3,
			"height": 640
		},
		{
			"type": "phone",
			"name": "Galaxy Note 9",
			"width": 414,
			"height": 846,
			"pixelRatio": 3.5,
			"userAgent": "Mozilla/5.0 (Linux; Android 7.0; SM-G892A Build/NRD90M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/67.0.3396.87 Mobile Safari/537.36",
			"touch": true,
			"os": "Android"
		},
		{
			"type": "tablet",
			"name": "iPad",
			"featured": true,
			"width": 768,
			"userAgent": "Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1",
			"touch": true,
			"os": "",
			"pixelRatio": 2,
			"height": 1024
		},
		{
			"type": "tablet",
			"name": "iPad Pro (12.9-inch)",
			"width": 1024,
			"height": 1366,
			"pixelRatio": 2,
			"userAgent": "Mozilla/5.0 (iPad; CPU OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1",
			"touch": true,
			"os": "iOS"
		},
		{	
			"type": "laptop",
			"name": "Laptop with HiDPI screen",
			"featured": false,
			"width": 1440,
			"height": 900,
			"userAgent": "",
			"touch": false,
			"os": "",
			"pixelRatio": 2
		},
		{	
			"type": "laptop",
			"name": "Laptop with touch",
			"featured": false,
			"width": 1280,
			"height":...