JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<head></head>   

    <div class="pfhex1">
        <div class="hexagon hexagon2">
        <div class="hexagon-in1"><div class="hexagon-in2"></div>
        </div></div>

            <div class="pfhex2">
        <div class="hexagon hexagon2">
        <div class="hexagon-in1"><div class="hexagon-in2"></div>
        </div></div>

CSS

.pfhex1 {
    float: right;
    position: fixed;
    right: 4em;
    top: 3em;
}

.pfhex2 {
    float: right;
    position: fixed;
    right: 10.5em;
    top: 3em;
}

.hexagon {
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
}
.hexagon-in1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
.hexagon-in2 {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url("http://placekitten.com/240/240");
    visibility: visible;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
.hexagon2 {
    float: right;
    width: 100px;
    height: 200px;
    margin: -40px 0 0 10px;