JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Gfycat2BBCode Bookmarklet</h1>

<h2>What?</h2>

<p>This is a bookmarklet that provides you with the BBCode for a linked thumb from <a href="http://gfycat.com">Gfycat.com</a> to post in forums or anywhere that takes BBCode.</p>

<h2>Why?</h2>

<p>Gfycat does not provide BBCode to copy. And, even if they did, this uses a small static thumb (og:image meta) with a link because some forums prefer that instead of the actual gif.</p>

<h2>How?</h2>

<ol>
    <li>Drag this to your bookmarks bar:<br />
        <a href="javascript:(function(){for(var%20metas%3Ddocument.getElementsByTagName(%22meta%22)%2Cthumb%2Ci%3D0%2Cii%3Dmetas.length%3Bii%3Ei%3Bi%2B%2B)if(%22og%3Aimage%22%3D%3D%3Dmetas%5Bi%5D.getAttribute(%22property%22))%7Bthumb%3Dmetas%5Bi%5D.getAttribute(%22content%22)%3Bbreak%7Dwindow.prompt(%22copy%20BBCode%22%2C'%5BURL%3D%22'%2Bwindow.location.href%2B'%22%5D%5BIMG%5D'%2Bthumb%2B%22%5B%2FIMG%5D%5B%2FURL%5D%22)%3B}())" class="bookmarklet">Gfycat2BBCode</a></li>
    <li>Click the bookmark on the Gfycat page after you upload a gif</li>
    <li>Press Ctrl + c (or ⌘ + c) to copy the BBCode from the prompt</li>
</ol>

CSS

body {
  font: 100 normal 100%/1.5 sans-serif;
  max-width: 30em;
  margin: 0 auto;
  padding: 2em;
  color: #444;
}

h1, h2 {
  color: #000;
}

.bookmarklet {
  display: inline-block;
  padding: 0.5em 1em;
  margin: 1em 0;
  background: #0af;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 1em;
}

.bookmarklet:focus,
.bookmarklet:hover {
  background: #6cf;
}