JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<html>
  <head>
    <link href="https://unpkg.com/[email protected]/dist/cld-video-player.min.css" rel="stylesheet">
    <script src="https://unpkg.com/[email protected]/dist/cld-video-player.min.js" 
        type="text/javascript"></script>

    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../css/app.css" />

    <link rel="icon" href="../favicon-32x32.png" type="image/png"/>
    <style>
      pre {
        white-space: pre;
        -moz-tab-size:    4; /* Firefox 4+ */
        -o-tab-size:      4; /* Opera 11.5 & 12.1 only */
        tab-size:         4; /* Chrome 21+, Safari 6.1+, Opera 15+ */
        background: #333;
        color: #fff;
        padding-top: 1em;
        padding-bottom: 1em;
      }
    </style>
    <title>Cloudinary SE Tools | Video Tiles</title>
  </head>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-T3YHZ4E33J"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-T3YHZ4E33J');
  </script>
  <body>
    <header class="p-3 border-bottom"><a href="/"><img width="150" src="http://res.cloudinary.com/ttran-se-cloudinary/image/upload/c_scale,dpr_2.0,w_150/v1/logos/cld/cloudinary_logo_for_white_bg"></a></header>
    <main>


      <div class="container mt-5 mb-5 p-0"><h1 class="text-primary">Interactive Video Tiles</h1></div>

      <div class="container mb-5 p-0">
        <div class="row p-0 m-0">
          <div class="col-12 p-0">
            <h2>
              Using Cloudinary to deliver an immersive wall of photos and interactive video tiles.
            </h2>
            <p>
              Cloudinary is incredibly flexible when it comes to delivering your media. A quick way to automate the delivery of media is through <a...