Чтобы создать горизонтальную линию в CSS Tailwind с текстом между ними, вы можете использовать следующие методы:

Метод 1: использование компонента-разделителя
Tailwind CSS не предоставляет специального компонента для горизонтальных линий, но вы можете использовать компонент-разделитель и оформить его соответствующим образом. Вот пример:

<div class="flex items-center">
  <hr class="flex-grow border-t-2 border-gray-300">
  <span class="px-3 text-gray-500">Your Text</span>
  <hr class="flex-grow border-t-2 border-gray-300">
</div>

В этом примере мы используем два элемента

---

с элементом span между ними. Классы flexи items-centerиспользуются для горизонтального выравнивания элементов. Классы border-t-2и border-gray-300добавляют толстую серую рамку толщиной 2 пикселя вверху каждого

---

элемент. Классы px-3и text-gray-500стилизуют текст.

Метод 2: использование пользовательского CSS
Вы также можете создать собственный класс и применить его к элементу

---

для достижения желаемого эффекта. Вот пример:

<style>
  .hr-with-text {
    display: flex;
    align-items: center;
    width: 100%;
    border-top: 2px solid #ccc;
  }
  .hr-with-text span {
    padding: 0 1rem;
    color: #888;
  }
</style>
<div class="hr-with-text">
  <hr>
  <span>Your Text</span>
  <hr>
</div>

В этом примере мы определяем собственный класс под названием .hr-with-text, который использует флексбокс для выравнивания элементов по горизонтали. Свойство border-topдобавляет двухпиксельную сплошную линию в качестве горизонтального разделителя. Элемент внутри контейнера добавляет текст.