JSFiddle - React, Tailwind, and code Playground

by hexag0n

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cross Runtime Demo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h3>Runtime detection using @cross/runtime</h3>
        <div id="output"></div>
    </div>
    <script type="module">
      // Import @cross/runtime from esm.sh/jsr
      import { 
      	CurrentOS,
        CurrentArchitecture,
        CurrentProduct,
        CurrentRuntime,
        CurrentVersion,
        Runtime
      } from "https://esm.sh/jsr/@cross/runtime@0.0.16";

      const outputDiv = document.getElementById('output');

			outputDiv.innerHTML += `<p>Runtime: <strong>${CurrentRuntime}</strong></p>`;
			outputDiv.innerHTML += `<p>OS: <strong>${CurrentOS}</strong></p>`;
      outputDiv.innerHTML += `<p>Architecture: <strong>${CurrentArchitecture}</strong></p>`;
      outputDiv.innerHTML += `<p>Product: <strong>${CurrentProduct}</strong></p>`;
      outputDiv.innerHTML += `<p>Version: <strong>${CurrentVersion}</strong></p>`;

      if (CurrentRuntime === Runtime.Browser) {
       outputDiv.innerHTML += "<p>You're running a browser!</p>";
      } else {
       outputDiv.innerHTML += "<p>You're not running a browser!</p>";
      }
    </script>
  </body>
</html>

CSS

.container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    font-family: sans-serif;
}

body {
  background: #323334;
  color: #EEE;
}

JavaScript

// Had to place the js in the HTML window due to being a module