JSFiddle - React, Tailwind, and code Playground

by Timatnet

HTML

<strong>Игорь Лава</strong>, вот ваш<br/>
<h1>Портрет Личности.</h1>
<br/>
<i>1552 слов проанализированы: Более-менее достойный анализ (статистически значимый анализ от 3500 слов минимум, идеально от 6 тыс слов)</i><br/><br/>

<b>Резюме</b><br/>
Вы сердечный.<br/>
Вы чуткий: Вы чувствуете, что другие чувствуют и сострадательны к ним. Вы настойчивы: вы склонны говорить и взять на себя ответственность в ситуации, и вам комфортно вести за собой группу. И вы самоконтролирующийся: у вас есть контроль над своими желаниями, которые не особенно интенсивны.<br/>
Ваш выбор обусловлен стремлением к эффективности.<br/>
Вы относительно равнодушен к традиции вы больше заботиться о том, чтобы свой собственный путь, чем после того, что сделали другие. Вы предполагаете, чтобы независимость, вела большую часть того, что вы делаете: вы хотели бы установить свои собственные цели, чтобы решить, как наилучшим образом достичь их.<br/>


<b>Вы вероятней чем другие:</b><br/>
<ul>
<li>Нажмёте на рекламное объявление </li>
<li>Зафолловите в социальных медиа</li>
<li>Потратите на здоровье и фитнес</li>
</ul>

<div class="output--stats-row">
            <div class="output-big-5 output-stats-column">
              <h4 class="base--h4">Personality</h4>
              <div class="output-stats-column--percentile-label">*% = percentile</div>
              <div class="output-big-5--traits output-stats-column--traits">
    
      
          <div class="percent-bar-and-score">
            <div class="percent-bar-and-score--label output-big-5--trait-label output-big-5--trait-label_POSITIVE">
              Openness
              <i class="icon icon-down-arrow percent-bar-and-score--toggle-icon"></i>
              <div class="tooltip"><p>Openness to experience. Higher: Intellectually curious, emotionally-aware, sensitive to beauty and willing to try new things.
Lower: Preferring the plain, straightforward, and obvious over the complex, ambiguous, and subtle.</p>
</div>
            </div>
           ...

CSS

@charset "UTF-8";
/*
Basic usage:

.grid-column-5 {
	@include grid(5);
}
// last grid has no gutter on right
.grid-column-7 {
	@include grid(7, false);
}
*/
body, .base--input,
.base--STYLED input:not([type]), .base--color-input,
.base--STYLED input[type="color"], .base--date-input,
.base--STYLED input[type="date"], .base--datetime-local-input,
.base--STYLED input[type="datetime-local"], .base--email-input,
.base--STYLED input[type="email"], .base--file-input,
.base--STYLED input[type="file"], .base--hidden-input,
.base--STYLED input[type="hidden"], .base--month-input,
.base--STYLED input[type="month"], .base--number-input,
.base--STYLED input[type="number"], .base--password-input,
.base--STYLED input[type="password"], .base--range-input,
.base--STYLED input[type="range"], .base--search-input,
.base--STYLED input[type="search"], .base--tel-input,
.base--STYLED input[type="tel"], .base--text-input,
.base--STYLED input[type="text"], .base--time-input,
.base--STYLED input[type="time"], .base--url-input,
.base--STYLED input[type="url"], .base--week-input,
.base--STYLED input[type="week"], .base--select,
.base--STYLED select, .base--textarea,
.base--STYLED textarea {
  font-family: "Helvetica Neue", Helvetica, "Open Sans", Arial, "Lucida Grande", "Roboto", sans-serif; }

.base--code,
.base--STYLED code, .base--pre,
.base--STYLED pre, pre[class^="language-"],
pre[class*=" language-"], .base--pre code, pre[class^="language-"] code,
pre[class*=" language-"] code, .base--pre .base--code,
.base--STYLED pre .base--code, pre[class^="language-"] .base--code,
pre[class*=" language-"] .base--code {
  font-family: "Courier New", "Lucida Console", monospace; }

.icon {
  vertical-align: middle;
  display: inline; }

.base--div:before,
.base--STYLED div:before,
div:before, .base--article:before,
.base--STYLED article:before,
article:before, .base--div:after,
.base--STYLED div:after,
div:after, .base--article:after,
.base--STYLED article:after,
article:after {
  content: '';
 ...

JavaScript

var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // Note: some voices don't support altering params
msg.voiceURI = 'native';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 1; //0 to 2
msg.lang = 'ru-RU';


/*msg.onend = function(e) {
 console.log('Speak finished in ' + event.elapsedTime + ' seconds.');
 };*/

function speak(message, callback) {
    msg.text = message;
    msg.onend = callback;
    speechSynthesis.speak(msg);
}

speak("Игорь Лава, вот ваш Портрет Личности. Вы сердечный. Вы чуткий: Вы чувствуете, что другие чувствуют и сострадательны к ним. Вы настойчивы: вы склонны говорить и взять на себя ответственность в ситуации, и вам комфортно вести за собой группу. И вы самоконтролирующийся: у вас есть контроль над своими желаниями, которые не особенно интенсивны. Ваш выбор обусловлен стремлением к эффективности. Вы относительно равнодушен к традиции вы больше заботиться о том, чтобы свой собственный путь, чем после того, что сделали другие. Вы предполагаете, чтобы независимость, вела большую часть того, что вы делаете: вы хотели бы установить свои собственные цели, чтобы решить, как наилучшим образом достичь их.");