JSFiddle - React, Tailwind, and code Playground

by DeepakKamat

HTML

<h1 id='string'></h1>

CSS

html {
    background-color:#333;
}

body {
    margin:20px auto;
    max-width:480px;
}

#string {
    font-size:1.2rem;
    color:#eee; 
    font-family:"Helvetica", Arial, sans-serif;
    font-family:"Consolas", monospace;
    
    display:block;
    margin:40px 10px;
    
    background-color:rgba(0,0,0,0.5);
    padding:50px;
    border-radius:10px;
    
    box-shadow:0 5px 8px rgba(0,0,0,0.1);
}

p {
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    
    font-size:1.0rem;
    font-family:"Consolas", monospace;
    text-align:center;
    text-transform:uppercase;
    
    color:rgba(255,255,255,0.8);
}

JavaScript

document.getElementById('string').innerHTML = navigator.userAgent;