JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div id="w">
<div id="content">
<h1><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Подсказки по ссылкам HTML5 и CSS3</font></font></h1>
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Наведите ссылку на страницу, чтобы отобразить различные подсказки.</font></font></p>
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Думайте об этом как о </font></font><a href="#" data-tool="Sample tooltip" class="tooltip animate"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">тестировании</font></font></a><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> для различных целей.</font></font></p>
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">А как насчет </font></font><a href="#" data-tool="screwy eh?" class="tooltip animate right"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">в стороне</font></font></a><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> от текста?</font></font></p>
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Почему бы не использовать гладкую </font></font><a href="#" class="tooltip animate blue" data-tool="banana bana fo filly"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">анимацию</font></font></a><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> для подсказок? </font><font style="vertical-align: inherit;">Если вам не нравятся переходы CSS3, просто удалите класс, чтобы </font></font><a href="#" class="tooltip" data-tool="simple!"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">отключить их</font></font></a><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> .</font></font></p>
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Давайте...

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { overflow-y: scroll; }
body { 
  background: #f0f0f0; 
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #313131;
  font-size: 62.5%; 
  line-height: 1; 
}

::selection { background: #a4ecab; }
::-moz-selection { background: #a4ecab; }
::-webkit-selection { background: #a4ecab; }

::-webkit-input-placeholder { /* WebKit browsers */
  color: #ccc;
  font-style: italic;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #ccc;
  font-style: italic;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #ccc;
  font-style: italic;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #ccc !important;
  font-style: italic;  
}

br { display: block; line-height: 2.2em; }
hr { width: 75%; border: 1px solid #ccc; margin-bottom: 15px; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

input, textarea { 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none; 
}

blockquote, q { quotes:...