Необходимо решить проблему позиционирования текста при попутном ветре

Question

Это желаемый дизайн

Это то, что я получаю с моим кодом

      <div class="bg-white font-circularstd -mt-12 z-0">
<div class="flex flex-col">
  <div class="bg-orange-bgbody2 w-720 h-800">
    <h2 class="text-center text-md3 pt-139">Promoted Jobs</h2>
    <p class="text-center text-md2 pt-16">
      These opportunities are shown on every page of our site and shared
      daily on our Twitter account.
    </p>
  </div>
</div>

Answer 1

В.Т., я провел небольшое исследование и получил то же самое, что и вы. Для Tailwind вам понадобится линейный градиент, чтобы получить 2 цвета в ОДНОМ погружении, чтобы вы могли легко центрировать текст. Извините, я немного опоздал, но вы действительно решили свой собственный ответ!

Рад, что ты нашел ответ!

Answer 2

Я только что понял это. Мне нужно было использовать только один div и использовать l = linear-gradient

Сначала нам нужно перейти в tailwind.config.js и добавить следующий код:

      theme: {
extend: {
   backgroundImage: {
    'split-colors': "linear-gradient(90deg, #FFEED9 50% , white 50%);"
  }
 }

Answer 3

Добро пожаловать в Stack Overflow! Просто отрегулируйте маржу. Попробуй это:

      <h2 style="margin-left: 50%;" class="text-center text-md3 pt-139">Promoted Jobs</h2>
    <p style="margin-left: 50%;" class="text-center text-md2 pt-16">
      These opportunities are shown on every page of our site and shared
      daily on our Twitter account.
    </p>

Мы просто добавляем style="margin-left: 50%;", и все должно быть готово. Сообщите мне, если это сработает!