Tagline

Short memorable phrase summarising the offer or brand.

html

<p class="tagline tagline--left" style="color:#241430;">
  Software that gets out of your way
  <span class="tagline__rule" style="background:#241430;"></span>
</p>
<style>
.tagline { font: 700 24px/1.4 system-ui, sans-serif; margin: 0; padding: 8px 0; }
.tagline--left { text-align: left; }
.tagline--center { text-align: center; }
.tagline__rule { display: block; width: 56px; height: 4px; border-radius: 2px; margin-top: 10px; }
.tagline--center .tagline__rule { margin-left: auto; margin-right: auto; }
</style>

tailwind

<p class="tagline-tw tagline-tw--left font-sans font-bold text-2xl leading-snug m-0 py-2" style="color:#241430;">
  Software that gets out of your way
  <span class="block w-14 h-1 rounded-full mt-2.5" style="background:#241430;"></span>
</p>
<style>
.tagline-tw--center { text-align: center; }
.tagline-tw--center span { margin-left: auto; margin-right: auto; }
</style>

react

export function Tagline({
  text = "Software that gets out of your way",
  align = "left",
  color = "#241430",
  showRule = true,
}) {
  const centered = align === "center";
  return (
    <p style={{ font: "700 24px/1.4 system-ui, sans-serif", margin: 0, padding: "8px 0", textAlign: align, color }}>
      {text}
      {showRule && (
        <span style={{ display: "block", width: 56, height: 4, borderRadius: 2, marginTop: 10, background: color,
          marginLeft: centered ? "auto" : 0, marginRight: centered ? "auto" : 0 }} />
      )}
    </p>
  );
}