JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bookmarkList">
  <h2>
      Bookmark List
  </h2>
</div>

<div class="vidBx">
  <a href="javascript:;" class="getTime">Bookmark Here</a>
  <video id="videoElement" autoplay controls width="100%">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    <p>Your browser does not support the video tag.</p>
  </video>
</div>

CSS

.getTime {
  background: #f36e65;
  color: #fff;
  font-size: 12px;
  text-align: center;
  padding: 8px 10px;
  text-decoration: none;
  display: block;
  width: 150px;
  margin: 0;
  font-family: Arial;
  text-transform: uppercase;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index:9;
}

.bookmarkList {
  background: #fff;
  color: #111;
  padding: 0;
  border: 1px solid #f36e65;
  margin-bottom: 1em;
  font-family: Arial;
  font-size: 13px;
}

.bookmarkList a {
  display: block;
  margin-bottom: 0;
  color: #f36e65;
  text-decoration: none;
  border-bottom: 1px solid #f36e65;
  padding: 5px 10px;
}

.vidBx {
  position: relative;
}

.bookmarkList h2{text-transform:uppercase; font-weight:normal; font-size:14px; font-family:Arial; color:#fff; background:#f36e65; padding:5px; margin:0;}

JavaScript

var myVid = document.getElementById('videoElement');

$('.getTime').on('click', function() {
  var mycurrentTime = myVid.currentTime;
  $(".bookmarkList").append("<a href='javascript:;' rel='" + mycurrentTime + "' class='bookmarkLink'>" + mycurrentTime + "sec - Click to Play</a>");

  $('.bookmarkList a').click(function() {
    myVid.currentTime = $(this).attr('rel');
    myVid.play();
  });
});