JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="350" viewBox="-10 -10 220 194" class="hexagon">
  <defs>
    <clipPath id="hexagon">
      <use href="#path" />
    </clipPath>
    <path d="M0 86.6L50 0h100l50 86.6-50 86.6H50z" id="path" />
  </defs>
  <use href="#path" class="outer" />
  <use href="#path" class="inner" />
  <a xlink:href="https://www.google.com">
    <image xlink:href="http://dev.neuestyle.com/bandai/mech-x4/images/products/06.jpg" clip-path="url(#hexagon)" width="200" height="200" />
    <use href="#path" class="highlight" />
    <text x="100" y="50">
      <tspan x="100">#37261</tspan>
      <tspan x="100" dy="30" class="lead">MECH-X4 WITH PLASMA</tspan>
      <tspan x="100" dy="20" class="lead">AXE</tspan>
      <tspan x="100" dy="30">5" ROBOT</tspan>
    </text>
  </a>
</svg>

SCSS

svg.hexagon {
  .outer {
    stroke: black;
    stroke-width: 16px;
  }
  .inner {
    stroke: #00aeef;
    stroke-width: 8px;
  }
  text {
    text-anchor: middle;
    font-size: 12px;
    fill: #f7f7f7;
    text-shadow: 2.407px 3.195px 1px rgba(14, 14, 13, 0.8);
    font-weight: bold;
    .lead {
      font-size: 14px;
    }
  }
  .highlight {
    fill: #F2CE3A;
    fill-opacity: 0.8;
  }
  text,
  .highlight {
    opacity: 0;
    transition: all .3s;
  }
  &:hover {
    text,
    .highlight {
      opacity: 1;
    }
  }
}