Как мне сделать один в одном атрибуте разный цвет букв?

Question

У меня есть задача сделать один текст одного цвета а другой другого. Я не пойму как мне реализовать эту задачу. Если я делю сразу на несколько атрибутов, то не могу понять как позиционировать элементы как на макете. Использую tailwind. Вот макет, как нужно чтобы было:

Вот мой примерный код, без понятия позиционирования элементов как нужно.

   <div class="line">
  <hr class="mt-10 .border border-gray-400" />
  <div class="line-text flex mt-9">
    <h3 class="text-white">Copyright © 2021</h3>
    <h3 class="text-white  ">Design by</h3>
    <h3 class="text-green-500 ">Alibek Sergeev</h3>
  </div>
  <hr class="mt-10 .border border-gray-400" />
</div>

Answer 1

Заключаете каждую букву в отдельный тег и редактируете стиль для каждого тега. Вот пример.

<h1 style = "color:red" >п<dev style = "color:green">р</dev><dev style = "color:black">и</dev><dev style = "color:blue">в</dev><dev style = "color:pink">е</dev><dev style = "color:green">т</dev></h1>

Answer 2

На само деле такое себе решение. Лучше поставить каждую букву в span

.aboba{
  text-colot: red;
}

<span class="aboba">А</span>

а дальше просто применить цвета

БЛОГ НА HUSL

Как мне сделать один в одном атрибуте разный цвет букв?

Ответы (2 шт):