JSFiddle - React, Tailwind, and code Playground

by Denis Tverdokhlebov

HTML

Статья- https://habr.com/ru/post/457946/
<a target="_blank" href="https://code.tutsplus.com/ru/tutorials/getting-started-with-chartjs-introduction--cms-28278">Работа с Chart.js: Первое знакомство</a>
<a target="_blank" href="https://www.chartjs.org/">ChartJS</a>

<div class="box">
  <h3>amCharts</h3>
  <div class="low">одна из JavaScript библиотек, полезных тем, кто ищет простое и в то же время гибкое решение для визуализации данных.</div>
  <h4>Основные возможности</h4>
  <ul>
    <li>Много разнообразных типов графиков, включая интерактивные карты и диаграммы Ганта.</li>
    <li>Возможность анализа данных «вглубь» (дрилдаун) и другие хорошо проработанные интерактивные опции.</li>
    <li>Документация, описывающая все нужные методы, хорошо написана, правда, на мой вкус, не слишком удобна в использовании.</li>
    <li>Крутая анимация графиков.</li>
    <li>Интеграция с React, Angular, Vue, Ember и др.</li>
    <li>Готовый плагин для WordPress.</li>
    <li>Экспорт графиков в изображение или PDF файл.</li>
    <li>«Живые» графики, полноценная кастомизация, специальные возможности в соответствии со стандартами W3C.
    </li>
    <li>Полная техподдержка для всех пользователей и приоритетная для клиентов с лицензией.</li>
    <li>Клиенты: Microsoft, Amazon, Ebay, NASA, Samsung, Yandex, AT&T и др.</li>
  </ul>
  <h4>Стоимость</h4>
  <p>Фирменная маркировка со ссылкой в бесплатной версии. Чтобы убрать брендинг, нужно купить платную лицензию (от $180), плюсом предоставляется доступ к приоритетной поддержке.</p>
  <h4>Узнать больше об amCharts</h4>
  <a target="_blank" href="http://amcharts.com/">Официальный сайт</a>
  <a target="_blank" href="https://docs.amcharts.com/">Документация</a>
  <a target="_blank" href="http://www.amcharts.com/download/">Скачать библиотеку</a>
</div>

<div class="box">
  <h3>AnyChart</h3>
  <div class="low">хорошо проработанная, легковесная, многофункциональная JS библиотека для визуализации данных с рендерингом в SVG/VML. Позволяет...

CSS

a {
  display: block;
  padding: 5px 0;
  text-decoration: none;
  color: #000000;
  width: 100%;
  border-bottom: 1px solid #ededed;
}

a:hover {
  background-color: #ededed;
}

.box {
  background-color: #ededed;
  width: 100%;
  border: 1px solid #ededed;
  padding: 10px 30px;
  margin: 5px 0;
}

.low {
  font-style: italic;
}