JSFiddle - React, Tailwind, and code Playground

by Baliga

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.3.0/balloon.min.css">
<button data-balloon="hey" data-balloon-pos="up">Hover me!</button>
<button data-balloon="It seems today that all you see is violence in movies and sex on tv, but where are those good old-fashioned values on which we used to rely? " data-balloon-pos="left">Hover me!</button>
<button data-balloon="Whats up!" data-balloon-pos="up-right">Hover me!</button>
<button data-balloon="It seems today that all you see is violence in movies and sex on tv, but where are those good old-fashioned values on which we used to rely?" data-balloon-pos="down">Hover me!</button>

CSS

/* Basic page style */
body {
  margin: 50px;
  font-size: 15px;
  background: #fff;
  color: #222;
  font-family: sans-serif;
}

button {
  background: tomato;
  padding: 15px 30px;
  color: #fff;
  font-size: 15px;
  border: none;
  display: block;
  margin: 0 auto 30px;
}