JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="cn">
  <h1>Числа в Таро</h1>

<p>Независимо от опыта, которым обладает гадающий на таро, бывают случаи, когда значение карты глубоко скрывается в подсознании. Опытные тарологи советуют проговорить название карты вслух, чтобы не «тонуть» в нерешительности, опасаясь, что не сможете её интерпретировать, потому что самым большим врагом интуиции является сомнение. Но есть еще одна причина - в названии карты шифруется ее основной смысл.</p>
<p>Рассмотрим, к примеру, 8 мечей. Мечи символизируют интеллект, мышление, общение, а восьмёрка - практичность, организованность, совершенствование существующих навыков. 8 мечей говорит о необходимости собраться с мыслями, по-новому посмотреть на вещи. Таким образом, зная два или три основных значения масти и изображенное на карте число мы можем в считанные секунды получить значение искомой карты.</p>

<h2>Значения чисел</h2>

<h3>Единица</h3>
<ul>
  <li>Новое начинание, заложение фундамента, "не словом, а делом", перспективы, развитие.</li>
  <li>Новые отношения, работа, проект, хобби.</li>
  <li>Творчество, оригинальность, свежие идеи.</li>
  <li>Независимость, амбициозность, уверенность в себе, проявление истинного «я».</li>
  <li>Мужество, мотивация, лидерство.</li>
  <li>Активность, инновационность, индивидуальная и уникальная личность.</li>
  <li>Позитивное отношение, саморазвитие.</li>
  <li>Нетерпение, конкуренция, агрессия, низкая стрессоустойчивость, высокомерие, упрямство, эгоцентризм.</li>
  <li>Мужская энергия.</li>
</ul>

<h3>Двойка</h3>
<ul>
  <li>Двойка</li>
  <li>Уход (за собой и другими), поддержка, мир, тепло, понимание, умение договариваться.</li>
  <li>Терпение, равновесие, гармония, открытые возможности.</li>
  <li>Чувствительность, эмоциональность, комфорт, выражение и освобождение подавленных эмоций.</li>
  <li>Магические способности и интуиция.</li>
  <li>Полярность, способность видеть противоположности.</li>
  <li>Здоровье и умственное благополучие, медитация, йога, духовные практики.</li>
 ...

CSS

@import url('https://fonts.googleapis.com/css?family=Podkova&subset=cyrillic');

.cn {
  max-width: 800px;
  margin: 0 auto; 
}
html {
  font-size: 21px;
  line-height: 1.5;
  letter-spacing: .02em;
  word-spacing: .2em;
  background: #fff;
}
body {
  font-family: 'Podkova', serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Trebuchet MS', 'Helvetica', 'Arial', sans-serit;
  font-weight: 700;
  margin: 2em 0 1em;
  word-spacing: normal;
  line-height: 1.2;
}
h1 {
  font-size: 2.2em;
}
h2 {
  font-size: 1.8em;
}
h3 {
  font-size: 1.4em;
}
h4, h5, h6 {
  font-size: 1em;
}
p {
  margin: 1em 0;
}
ul {
  margin: 1em 0;
  list-style: none;
  padding: 0 0 0 .5em;
}
li {
  margin: .5em 0;
  position: relative;
  padding-left: 2em;
}
li:before {
  content: '⟴'; /* ➤ ⮞ ➼ 🡪 */
  position: absolute;
  left: 0;
}