JSFiddle - React, Tailwind, and code Playground

HTML

<div class="goods">
    <h2 class="header">Товар</h2>
    <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita inventore nobis cum itaque unde eos aliquam labore reiciendis iusto dolore ducimus tempore quidem et nisi debitis similique ea dignissimos ex.</p>
    <img src="http://goo.gl/0E2RuF" alt="" />
    <span class="tooltip">Здесь описание</span>
</div>

CSS

.goods {
    font: .5em Arial, sans-serif;
    width: 30%;
    float: left;
    border: 2px solid #ccc;
    text-align: center;
    margin-right: 1em;
    position: relative;
}

.goods img {
    width: 100%;
    height: 50%;
}

.tooltip {
    position: absolute;
    left: -9999px;
    width: 128px;
    height: 48px;
    line-height: 48px;
    padding: 0px 16px 0px 8px;
    font-size: 10px;
    text-align: center;
    color: rgb(255, 255, 255);
    background: rgb(96, 172, 57);
    border: 0px 0px 0px 0px none none none none rgb(255, 255, 255) rgb(70, 126, 42) rgb(255, 255, 255) rgb(255, 255, 255);
    border-radius: 0px 3.20000004768372px 3.20000004768372px 0px;
    text-shadow: rgba(0, 0, 0, 0.6) 1px 1px 1px;
    box-shadow: rgb(85, 153, 51) -4px 0px 4px 0px inset;
}

.tooltip:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-width: 24px;
    border-style: solid;
    border-color: transparent #60AC39 transparent transparent;
    top: 0px;
    left: -48px;
}

.goods:hover .tooltip {
    left: 120%;
    top: 0;
}