JSFiddle - React, Tailwind, and code Playground

by Hector de la Rosa

HTML

<!DOCTYPE html>
<html lang="es">

<head>
   
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
    <style>
    audio,
    video {
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        -webkit-transition: all 1s ease;
        transition: all 1s ease;
        vertical-align: top;
    }
    
    input {
        border: 1px solid #d9d9d9;
        border-radius: 1px;
        font-size: 2em;
        margin: .2em;
        width: 20%;
    }
    
    .setup {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        font-size: 102%;
        height: 47px;
        margin-left: -9px;
        margin-top: 8px;
        position: absolute;
    }
    
    p {
        padding: 1em;
    }
    
    li {
        border-bottom: 1px solid rgb(189, 189, 189);
        border-left: 1px solid rgb(189, 189, 189);
        padding: .5em;
    }
    
    .video-container {
        background: white;
        border: 2px solid black;
        border-radius: 0.2em;
        display: inline-block;
        margin: 2em .2em;
        padding: .1em;
        vertical-align: top;
    }
    
    .video-container h2 {
        border: 0;
        border-top: 1px solid black;
        display: block;
        margin: 0;
        text-align: center;
    }
    
    .video-container button {
        font-size: .8em;
        position: absolute;
        z-index: 1;
    }
    </style>
    <script>
    document.createElement('article');
    document.createElement('footer');
    </script>

    <!-- scripts used for broadcasting -->
    <script src="https://cdn.webrtc-experiment.com/firebase.js"></script>
    <script...