JSFiddle - React, Tailwind, and code Playground

by Craig Haywood

HTML

<div class="text-divider">Text divider</div>

CSS

/* 🐞 codyhouse.co */
.text-divider {
  --text-divider-gap: 1rem;
  display: flex;
  align-items: center;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.text-divider::before, .text-divider::after {
  content: '';
  height: 1px;
  background-color: silver;
  flex-grow: 1;
}

.text-divider::before {
  margin-right: var(--text-divider-gap);
}

.text-divider::after {
  margin-left: var(--text-divider-gap);
}

/* demo stuff */
body2 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  padding: 2rem;
}