JSFiddle - React, Tailwind, and code Playground

by bossy_nova

HTML

<div id="logo_tooltip" class="tooltip top" style="left: 10px; top: 10px;">
  <div class="store_logo" data-story-group-id="10176630006" style="background-image: url(http://c1928682.cdn.cloudfiles.rackspacecloud.com/logo_image_name-54eVBKNWqb@1_5x.png);"></div>
</div>

CSS

.tooltip {
background-color: white;
border: 4px solid lightGray;
position: absolute;
top: 0;
left: 0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 2em;
text-align: center;
box-shadow: 0px 0px 1px 1px #888;
}
.tooltip.top::before {
border-top-color: lightGray;
}
.tooltip.top::after, .tooltip.top::before {
top: 100%;
}
.tooltip::before {
border-color: rgba(194, 225, 245, 0);
border-width: 36px;
left: 50%;
margin-left: -36px;
}
.tooltip::after, .tooltip::before {
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.tooltip.top::after {
border-top-color: white;
}
.tooltip.top::after, .tooltip.top::before {
top: 100%;
}
.tooltip::after {
border-color: rgba(136, 183, 213, 0);
border-width: 30px;
left: 50%;
margin-left: -30px;
}
.tooltip::after, .tooltip::before {
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.store_logo {
  width: 68px;
  height: 68px;
}