JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<link rel="stylesheet" href="http://kushagragour.in/lab/hint/hint.min.css">
<br/>
<br/>
<br/>
<br/>
<br/>
<center>
<span class="hint--top" data-hint="ZorNet: Создание сайта на uCoz">Подсказка сверху</span>
    <br/>
    <br/>
    <br/>
    <span class="hint--right" data-hint="ZorNet: Создание сайта на uCoz">Подсказка справа</span>
    <br/>
    <br/>
    <br/>
    <span class="hint--bottom" data-hint="ZorNet: Создание сайта на uCoz">Подсказка снизу</span>
    <br/>
    <br/>
    <br/> <span class="hint--left" data-hint="ZorNet: Создание сайта на uCoz">Подсказка слева</span>
    <br/>
    <br/>
    <br/>
    <span class="hint--top hint--error" data-hint="ZorNet: Создание сайта на uCoz">Подсказка сверху. Стиль - ошибка</span>
    <br/>
    <br/>
    <br/>
    <span class="hint--top hint--warning" data-hint="ZorNet: Создание сайта на uCoz">Подсказка сверху. Стиль - предупреждение</span>
    <br/>
    <br/>
    <br/>
    <span class="hint--top hint--info" data-hint="ZorNet: Создание сайта на uCoz">Подсказка сверху. Стиль - информация</span>
    <br/>
    <br/>
    <br/>
    <span class="hint--top hint--success" data-hint="ZorNet: Создание сайта на uCoz">Подсказка сверху. Стиль - выполенно успешно</span>
    <br/>
    <br/>
    <br/>
    <span class="hint--top hint--always" data-hint="ZorNet: Создание сайта на uCoz">Подсказка сверху. Стиль - всегда видна</span>
    <br/>
    <br/>
    <br/>
    <span class="hint--top hint--rounded" data-hint="ZorNet: Создание сайта на uCoz">Подсказка сверху. Стиль - с закруглениями углов</span>
    <br/>
    <br/>
    <br/>
    <span class="hint--top hint--no-animate" data-hint="ZorNet: Создание сайта на uCoz">Подсказка сверху. Стиль - без анимации</span>
    <br/>
    <br/>
    <br/>
    <span class="hint--top hint--bounce" data-hint="ZorNet: Создание сайта на uCoz">Подсказка сверху. Стиль - с эффектом подпрыгивания</span>
</center>

CSS

span {
    cursor:pointer;
}