JSFiddle - React, Tailwind, and code Playground

by gcarames

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Live</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style type='text/css'>
      /* CSS pantallas de 320px o superior */

      @media (min-width: 320px) {
        /* CSS general */
        *,
        ::after,
        ::before {
          box-sizing: border-box;
        }
        .sr-only {
          display: none;
        }
        .hidden-xs {
          display: none;
        }
        .embed-responsive::before {
          display: block;
          content: "";
        }
        .bar-live-layer {
          color: #fff;
          font-size: 14px;
          font-weight: 600;
          line-height: 16px;
          font-family: "Arial", "Helvetica", sans-serif;
          position: relative;
          top: 0px;
          left: 0px;
          width: 100%;
          padding: 8px 0;
          z-index: 99;
          background: rgba(0, 0, 0, 0.95);
        }
        .row-body-layer,
        .row-heading-layer {
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          padding: 0 8px;
        }
        .row-body-layer {
          padding-top: 8px;
        }
        .row-body-layer.maximized {
          flex-direction: column;
        }
        .col-iframe {
          overflow: hidden;
          width: 50%;
          flex: 1;
        }
        .maximized .col-iframe {
          width: 100%;
        }
        .col-headline {
          overflow: hidden;
          padding: 0 8px;
          flex: 1;
        }
        .maximized .col-headline {
          overflow: hidden;
          padding: 8px 0;
          flex: 1;
        }
        .live-label {
          color: #fff;
          font-size: 16px;
          line-height: 22px;
          text-align: center;
          text-transform: uppercase;
          background-color: #d8070e;
          padding: 0px 8px;
          padding-top: 4px;
          width:...