JSFiddle - React, Tailwind, and code Playground

by Rajesh Danabal

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>WebTorrent video player</title>
    <style>
      #output video {
        width: 100%;
      }
      #progressBar {
          height: 5px;
          width: 0%;
          background-color: #35b44f;
          transition: width .4s ease-in-out;
      }
      body.is-seed .show-seed {
          display: inline;
      }
      body.is-seed .show-leech {
          display: none;
      }
      .show-seed {
          display: none;
      }
      #status code {
          font-size: 90%;
          font-weight: 700;
          margin-left: 3px;
          margin-right: 3px;
          border-bottom: 1px dashed rgba(255,255,255,0.3);
      }

      .is-seed #hero {
          background-color: #154820;
          transition: .5s .5s background-color ease-in-out;
      }
      #hero {
          background-color: #2a3749;
      }
      #status {
          color: #fff;
          font-size: 17px;
          padding: 5px;
      }
      a:link, a:visited {
          color: #30a247;
          text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div id="hero">
      <div id="output">
        <div id="progressBar"></div>
        <!-- The video player will be added here -->
      </div>
      <!-- Statistics -->
      <div id="status">
        <div>
          <span class="show-leech">Downloading </span>
          <span class="show-seed">Seeding </span>
          <code>
            <!-- Informative link to the torrent file -->
            <a id="torrentLink" href="magnet:?xt=urn:btih:4bd27692600b1a96e16d9911ca033fed8526523f&dn=John.Wick.Chapter.3.Parabellum.2019.DVDRip.XviD.AC3-EVO&tr=http://tracker.trackerfix.com:80/announce&tr=udp://9.rarbg.me:2750&tr=udp://9.rarbg.to:2760">sintel.torrent</a>
          </code>
          <span class="show-leech"> from </span>
          <span class="show-seed"> to </span>
          <code id="numPeers">0 peers</code>.
        </div>
        <div>
          <code...