Typography guide

Headings

Default-heading

Please fill in here

Please fill in here

<h1
  style="margin-bottom: 1em; font-size: 2.25em; font-weight: 800; letter-spacing: -0.025em; line-height: 1;color: rgb(17, 24, 39);"
>
  Please fill in here
</h1>
<p
  style="text-indent: 2em; font-weight: 400; margin-top: 1em; margin-bottom: 1em; font-size: 1.125em; line-height: 1.75em; color: rgb(107, 114, 128);"
>
  Please fill in here
</p>

Second-level heading

Please fill in here

Please fill in here

Please fill in here

<h2 style="font-size: 2.25em; font-weight: 800; line-height: 1">
  Please fill in here
</h2>
<p
  style="text-indent: 2em; margin-top: 1em; margin-bottom: 1em; font-size: 1.125em; line-height: 1.75em; color: rgb(107, 114, 128);"
>
  Please fill in here
</p>
<p
  style="text-indent: 2em; margin-top: 1em; margin-bottom: 1em; font-size: 1.125em; line-height: 1.75em; color: rgb(107, 114, 128); font-weight: 400;"
>
  Please fill in here
</p>

Highlighted heading

Please fill in here

Please fill in here

<h2 style="font-size: 2.25em; font-weight: 800; line-height: 1">
  Please fill in here
</h2>
<p
  style="text-indent: 2em; margin-top: 1em; margin-bottom: 1em; font-size: 1.125em; line-height: 1.75em; color: rgb(107, 114, 128);"
>
  Please fill in here
</p>
<p
  style="text-indent: 2em; margin-top: 1em; margin-bottom: 1em; font-size: 1.125em; line-height: 1.75em; color: rgb(107, 114, 128); font-weight: 400;"
>
  Please fill in here
</p>

Heading mark

PleasePlease fill in herefill in here

Please fill in here

<h1
  style="color:#111827;letter-spacing:-.025em;line-height:1;font-weight:800;font-size:2.25em;marginBottom: 1em;marginTop: 0;marginLeft: 0;marginRight: 0;"
>
  Please
  <mark
    style="color:#fff;padding-left:.5em;padding-right:.5em;background-color:#1c64f2;border-radius:.25em"
    >Please fill in here</mark
  >
  fill in here
</h1>
<p
  style="text-indent:2em;color:#6b7280;line-height:1.75em;font-weight:400;font-size:1.125em;margin: 0"
>
  Please fill in here
</p>

Heading gradient

Please fill in herePlease fill in here

Please fill in here

<h1
  style="color:#111827;font-weight:800;font-size:1.875em;line-height:2.25em;margin-bottom:1em"
>
  <span
    style="color:transparent;webkit-background-clip:text;background-image:linear-gradient(to right,#38bdf8,#059669)"
    >Please fill in here</span
  >
  Please fill in here
</h1>
<p
  style="color:#6b7280;font-weight:400;line-height:1.75em;font-size:1.125em;text-indent:2em"
>
  Please fill in here
</p>

Heading underline

Please fill in herePlease fill in here

Please fill in here

<h1
  style="color:#111827;letter-spacing:-.025em;line-height:1;font-weight:800;font-size:2.25em;margin-bottom:1em"
>
  Please fill in here
  <span
    style="text-decoration-thickness:8px;text-decoration-color:#76a9fa;text-decoration-line:underline"
    >Please fill in here</span
  >
</h1>
<p
  style="color:#6b7280;font-weight:400;line-height:1.75em;font-size:1.125em;text-indent:2em"
>
  Please fill in here
</p>

Breadcrumb context

Please fill in here

<nav aria-label="Breadcrumb" style="display:flex;margin-bottom:1em">
  <ol
    style="display:inline-flex;align-items:center;list-style:none;margin:0;padding:0"
  >
    <li style="display:inline-flex;align-items:center">
      <a
        href="#"
        style="color:#374151;font-weight:500;font-size:.875em;line-height:1.25em;align-items:center;display:inline-flex;text-decoration:inherit"
        >Please fill in here</a
      >
    </li>
    <li>
      <div style="display:flex;align-items:center">
        <svg
          style="color:#9ca3af;width:1.5em;height:1.5em"
          fill="currentColor"
          viewBox="0 0 20 20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fillRule="evenodd"
            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
            clipRule="evenodd"
          ></path>
        </svg>
        <a
          href="#"
          style="color:#374151;font-weight:500;font-size:.875em;line-height:1.25em;margin-left:.25em;text-decoration:inherit"
          >Please fill in here</a
        >
      </div>
    </li>
    <li aria-current="page">
      <div style="display:flex;align-items:center">
        <svg
          style="color:#9ca3af;width:1.5em;height:1.5em"
          fill="currentColor"
          viewBox="0 0 20 20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fillRule="evenodd"
            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
            clipRule="evenodd"
          ></path>
        </svg>
        <span
          style="color:#6b7280;font-weight:500;font-size:.875em;line-height:1.25em;margin-left:.25em"
          >Please fill in here</span
        >
      </div>
    </li>
  </ol>
</nav>
<h2
  style="color:#111827;letter-spacing:-.025em;line-height:1;font-weight:800;font-size:1.875em;margin-bottom:1em"
>
  Please fill in here
</h2>

Badge context

Please fill in herePlease fill in here

<h1
  style="
    font-weight: 800;
    font-size: 3em;
    line-height: 1;
    align-items: center;
    display: flex;
    margin: 0;
  "
>
  Please fill in here
  <span
    style="
      color: rgb(30 66 159/1);
      font-weight: 600;
      font-size: 1.5em;
      line-height: 2em;
      padding-bottom: 0.125em;
      padding-top: 0.125em;
      padding-left: 0.625em;
      padding-right: 0.625em;
      background-color: rgb(225 239 254/1);
      border-radius: 0.25em;
      margin-right: 0.5em;
      margin-left: 0.5em;
    "
  >
    Please fill in here
  </span>
</h1>

Secondary text

Please fill in herePlease fill in here

<h1 style="font-weight:800;font-size:3em;line-height:1">
  Please fill in here
  <small style="color:#6b7280;font-weight:600;margin-left:.5em;font-size:80%"
    >Please fill in here</small
  >
</h1>

Sizes

Heading one (H1)

Please fill in here

<h1
  style="
    font-weight: 800;
    font-size: 3em;
    line-height: 1;
    margin: 0;
  "
>
  Please fill in here
</h1>

Heading one (H2)

Please fill in here

<h2
  style="
    font-weight: 700;
    font-size: 2.25em;
    line-height: 2.25em;
    margin: 0;
  "
>
  Please fill in here
</h2>

Heading one (H3)

Please fill in here

<h3
  style="
    font-weight: 700;
    font-size: 1.875em;
    line-height: 2.25em;
    margin: 0;
  "
>
  Please fill in here
</h3>

Heading one (H4)

Please fill in here

<h4
  style="
    font-weight: 700;
    font-size: 1.5em;
    line-height: 2em;
    margin: 0;
  "
>
  Please fill in here
</h4>

Heading one (H5)

Please fill in here

<h5
  style="
    font-weight: 700;
    font-size: 1.25em;
    line-height: 1.75em;
    margin: 0;
  "
>
  Please fill in here
</h5>

Heading one (H6)

Please fill in here

<h6
  style="
    font-weight: 700;
    font-size: 1.125em;
    line-height: 1.75em;
    margin: 0;
  "
>
  Please fill in here
</h6>

Paragraphs

Default paragraph

Please fill in here

Please fill in here

<p
  style="
  color: rgb(107, 114, 128);
  font-weight: 300;
  margin-bottom: 0.75em;
"
>
  Please fill in here
</p>
<p style="color: rgb(107, 114, 128); font-weight: 300">Please fill in here</p>

Leading paragraph

Please fill in here

Please fill in here

<p
  style="color:#6b7280;font-weight:300;line-height:1.75em;font-size:1.125em;margin-bottom:.75em"
>
  Please fill in here
</p>
<p style="color:#6b7280;font-weight:300">Please fill in here</p>

Paragraph bold

Please fill in herePlease fill in here

<p
  style="
    color: rgb(107, 114, 128);
    font-weight: 300;
    margin-bottom: 0.75em;
  "
>
  Please fill in here
  <strong style="color: rgb(17, 24, 39); font-weight: 600">
    Please fill in here
  </strong>
</p>
<p
  style="
    color: rgb(107, 114, 128);
    font-weight: 300;
    margin-bottom: 0.75em;
  "
></p>

Paragraph underline

Please fill in herePlease fill in here

<p
  style="
  color: rgb(107, 114, 128);
  font-weight: 300;
  margin-bottom: 0.75em;
"
>
  Please fill in here
  <u
    style="
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
  "
  >
    Please fill in here
  </u>
</p>

Layout

One column

One column

<p
  style="
    color: rgb(107, 114, 128);
    font-weight: 300;
    margin-bottom: 0.75em;
  "
>
  One column
</p>
<p
  style="
    color: rgb(107, 114, 128);
    font-weight: 300;
    margin-bottom: 0.75em;
  "
>
  One column
</p>

Text alignment

left

<p
  style="
    color: rgb(107, 114, 128);
    font-weight: 300;
    text-align: left;
    margin-bottom: 0.75em;
  "
>
  left
</p>

center

<p
  style="
    color: rgb(107, 114, 128);
    font-weight: 300;
    text-align: center;
    margin-bottom: 0.75em;
  "
>
  center
</p>

right

<p
  style="
    color: rgb(107, 114, 128);
    font-weight: 300;
    text-align: right;
    margin-bottom: 0.75em;
  "
>
  right
</p>

Blockquote

Default blockquote

Please fill in here

<blockquote
  style="color:rgb(17,24,39;font-style:italic;font-weight:600;font-size:1.25em;line-height:1.75em"
>
  <p>Please fill in here</p>
</blockquote>

Solid background

Please fill in here

Please fill in here

Please fill in here

<p style="color: rgb(107, 114, 128)">Please fill in here</p>
<blockquote
  style="
    padding: 1em;
    background-color: rgb(249, 250, 251);
    border-color: rgb(209, 213, 219);
    border-left-width: 4px;
    margin-bottom: 1em;
    margin-top: 1em;
  "
>
  <p
    style="
      color: rgb(17, 24, 39);
      line-height: 1.625;
      font-style: italic;
      font-weight: 500;
      font-size: 1.25em;
    "
  >
    Please fill in here
  </p>
</blockquote>
<p style="color: rgb(107, 114, 128)">Please fill in here</p>

User testimonial

Please fill in here

Please fill in herePlease fill in here

<figure
  style="
    text-align: center;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
  "
>
  <svg
    style="
      color: rgb(156, 163, 175);
      width: 3em;
      height: 3em;
      margin-bottom: 0.75em;
      margin-left: auto;
      margin-right: auto;
      display: block;
      vertical-align: middle;
    "
    aria-hidden="true"
    viewBox="0 0 24 27"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M14.017 18L14.017 10.609C14.017 4.905 17.748 1.039 23 0L23.995 2.151C21.563 3.068 20 5.789 20 8H24V18H14.017ZM0 18V10.609C0 4.905 3.748 1.038 9 0L9.996 2.151C7.563 3.068 6 5.789 6 8H9.983L9.983 18L0 18Z"
      fill="currentColor"
    ></path>
  </svg>
  <blockquote>
    <p
      style="
        color: rgb(17, 24, 39);
        font-style: italic;
        font-weight: 500;
        font-size: 1.5em;
        line-height: 2em;
      "
    >
      Please fill in here
    </p>
  </blockquote>
  <figcaption
    style="
      justify-content: center;
      align-items: center;
      display: flex;
      margin-top: 1.5em;
    "
  >
    <img
      style="
        border-radius: 9999px;
        width: 1.5em;
        height: auto;
        max-width: 100%;
        display: block;
        vertical-align: middle;
      "
      src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/michael-gouch.png"
      alt="profile picture"
    />
    <div>
      <cite
        style="
          color: rgb(17, 24, 39);
          font-weight: 500;
          padding-right: 0.75em;
        "
      >
        Please fill in here
      </cite>
      <cite>Please fill in here</cite>
    </div>
  </figcaption>
</figure>

Alignment

Please fill in here

<blockquote
  style="
    color: rgb(17, 24, 39);
    font-style: italic;
    font-weight: 600;
    font-size: 1.25em;
    line-height: 1.75em;
    text-align: left;
  "
>
  <p>Please fill in here</p>
</blockquote>

Please fill in here

<blockquote
  style="
    color: rgb(17, 24, 39);
    font-style: italic;
    font-weight: 600;
    font-size: 1.25em;
    line-height: 1.75em;
    text-align: center;
  "
>
  <p>Please fill in here</p>
</blockquote>

Please fill in here

<blockquote
  style="
    color: rgb(17, 24, 39);
    font-style: italic;
    font-weight: 600;
    font-size: 1.25em;
    line-height: 1.75em;
    text-align: right;
  "
>
  <p>Please fill in here</p>
</blockquote>

Sizes

Please fill in here

<blockquote
  style="
    color: rgb(17, 24, 39);
    font-style: italic;
    font-weight: 600;
    line-height: 1.75em;
    font-size: 1.125em;
  "
>
  <p>Please fill in here</p>
</blockquote>

Please fill in here

<blockquote
  style="
    color: rgb(17, 24, 39);
    font-style: italic;
    font-weight: 600;
    line-height: 1.75em;
    font-size: 1.25em;
  "
>
  <p>Please fill in here</p>
</blockquote>

Please fill in here

<blockquote
  style="
    color: rgb(17, 24, 39);
    font-style: italic;
    font-weight: 600;
    line-height: 2em;
    font-size: 1.5em;
  "
>
  <p>Please fill in here</p>
</blockquote>

Images

Rounded corners

Border radius

<img
  style="
    border-radius: 0.5em;
    max-width: 32em;
    height: auto;
    display: block;
    vertical-align: middle;
  "
  src="https://flowbite.com/docs/images/examples/image-1@2x.jpg"
  alt="image description"
/>

Full circle

<img
  style="
    border-radius: 9999px;
    width: 24em;
    height: 24em;
    max-width: 100%;
    display: block;
    vertical-align: middle;
  "
  src="https://flowbite.com/docs/images/examples/image-4@2x.jpg"
  alt="image description"
/>

Image card

Please fill in here

<figure
  style="
    transition-property: all;
    transition-timing-function: cubic-bezier(
      0.4,
      0,
      0.2,
      1
    );
    filter: 'grayscale(100%)';
    cursor: pointer;
    max-width: 24em;
    position: relative;
    margin: 0
  "
>
  <a href="#" style="color: inherit; text-decoration: inherit">
    <img
      style="
        border-radius: 0.5em;
        height: auto;
        max-width: 100%;
        display: block;
        vertical-align: middle;
      "
      src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-3.png"
      alt="image description"
    />
  </a>
  <figcaption
    style="
      color: rgb(255, 255, 255);
      line-height: 1.75em;
      font-size: 1.125em;
      padding-left: 1em;
      padding-right: 1em;
      bottom: 1.5em;
      position: absolute;
    "
  >
    <p>Please fill in here</p>
  </figcaption>
</figure>

Image effects

Grayscale

<img
  style="
    transition-property: all;
    transition-timing-function: cubic-bezier(
      0.4,
      0,
      0.2,
      1
    );
    filter: grayscale(100%);
    border-radius: 0.5em;
    cursor: pointer;
    max-width: 32em;
    height: auto;
    display: block;
    vertical-align: middle;
  "
  src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-3.png"
  alt="image description"
/>

Alignment

Left

<img
  style="
    max-width: 32em;
    height: auto;
    display: block;
    vertical-align: middle;
  "
  src="https://flowbite.com/docs/images/examples/image-1@2x.jpg"
  alt="image description"
/>

center

<img
  style="
    max-width: 32em;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
    vertical-align: middle;
  "
  src="https://flowbite.com/docs/images/examples/image-1@2x.jpg"
  alt="image description"
/>

right

<img
  style="
    max-width: 32em;
    height: auto;
    margin-left: auto;
    display: block;
    vertical-align: middle;
  "
  src="https://flowbite.com/docs/images/examples/image-1@2x.jpg"
  alt="image description"
/>

Sizes

Small

<img
  style="
    max-width: 20em;
    height: auto;
    display: block;
    vertical-align: middle;
  "
  src="https://flowbite.com/docs/images/examples/image-1@2x.jpg"
  alt="image description"
/>

Medium

<img
  style="
    max-width: 28em;
    height: auto;
    display: block;
    vertical-align: middle;
  "
  src="https://flowbite.com/docs/images/examples/image-1@2x.jpg"
  alt="image description"
/>

Large

<img
  style="
    max-width: 36em;
    height: auto;
    display: block;
    vertical-align: middle;
  "
  src="https://flowbite.com/docs/images/examples/image-1@2x.jpg"
  alt="image description"
/>

Full width

<img
  style="
    max-width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
  "
  src="https://flowbite.com/docs/images/examples/image-1@2x.jpg"
  alt="image description"
/>

Lists

Unordored list

Nested

• Please fill in here
  1. Please fill in here
  2. Please fill in here
  3. Please fill in here
• Please fill in here
  • Please fill in here
  • Please fill in here
  • Please fill in here
• Please fill in here
  • Please fill in here
  • Please fill in here
  • Please fill in here

<ul
  style="
    color: rgb(107, 114, 128);
    list-style-type: disc;
    list-style-position: inside;
    margin: 0;
    padding: 0;
  "
>
  <li>
    Please fill in here
    <ol
      style="
        padding-left: 1.25em;
        list-style-type: decimal;
        list-style-position: inside;
        margin-top: 0.5em;
      "
    >
      <li>Please fill in here</li>
      <li style="margin-top: calc(0.25em * (1 - 0))">Please fill in here</li>
      <li style="margin-top: calc(0.25em * (1 - 0))">Please fill in here</li>
    </ol>
  </li>
  <li
    style="
      margin-bottom: calc(1em * 0);
      margin-top: calc(1em * (1 - 0));
    "
  >
    Please fill in here
    <ul
      style="
        padding-left: 1.25em;
        list-style-type: decimal;
        list-style-position: inside;
        margin-top: 0.5em;
      "
    >
      <li>Please fill in here</li>
      <li
        style="
          margin-bottom: calc(0.25em * 0);
          margin-top: calc(0.25em * (1 - 0));
        "
      >
        Please fill in here
      </li>
      <li
        style="
          margin-bottom: calc(0.25em * 0);
          margin-top: calc(0.25em * (1 - 0));
        "
      >
        Please fill in here
      </li>
    </ul>
  </li>
  <li
    style="
      margin-bottom: calc(1em * 0);
      margin-top: calc(1em * (1 - 0));
    "
  >
    Please fill in here
    <ul
      style="
        padding-left: 1.25em;
        list-style-type: decimal;
        list-style-position: inside;
        margin-top: 0.5em;
      "
    >
      <li>Please fill in here</li>
      <li
        style="
          margin-bottom: calc(0.25em * 0);
          margin-top: calc(0.25em * (1 - 0));
        "
      >
        Please fill in here
      </li>
      <li
        style="
          margin-bottom: calc(0.25em * 0);
          margin-top: calc(0.25em * (1 - 0));
        "
      >
        Please fill in here
      </li>
    </ul>
  </li>
</ul>

Unstyled

Please fill in here

• Please fill in here
• Please fill in here
• Please fill in here

<h2
  style="
    color: rgb(17, 24, 39);
    font-weight: 600;
    line-height: 1.75em;
    font-size: 1.125em;
    margin-bottom: 0.5em;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  "
>
  Please fill in here
</h2>

<ul
  style="
    color: rgb(107, 114, 128);
    list-style-type: none;
    list-style-position: inside;
    max-width: 28em;
    margin: 0;
    padding: 0;
  "
>
  <li>Please fill in here</li>
  <li
    style="
      margin-bottom: calc(0.25em * 0);
      margin-top: calc(0.25em * (1 - 0));
    "
  >
    Please fill in here
  </li>
  <li
    style="
      margin-bottom: calc(0.25em * 0);
      margin-top: calc(0.25em * (1 - 0));
    "
  >
    Please fill in here
  </li>
</ul>

Ordered list

Please fill in here

1. Please fill in herePlease fill in here
2. Please fill in herePlease fill in here
3. Please fill in herePlease fill in here

<h2
  style="
    color: rgb(17, 24, 39);
    font-weight: 600;
    line-height: 1.75em;
    font-size: 1.125em;
    margin-bottom: 0.5em;
  "
>
  Please fill in here
</h2>
<ol
  style="
    color: rgb(107, 114, 128);
    list-style-type: decimal;
    list-style-position: inside;
    max-width: 28em;
    margin: 0;
    padding: 0;
  "
>
  <li>
    <span>Please fill in here</span>
    <span>Please fill in here</span>
  </li>
  <li
    style="
      --tw-space-y-reverse: 0;
      margin-bottom: calc(
        0.25em * var(--tw-space-y-reverse)
      );
      margin-top: calc(
        0.25em * (1 - var(--tw-space-y-reverse))
      );
    "
  >
    <span style="color: rgb(17, 24, 39); font-weight: 600">
      Please fill in here
    </span>
    <span style="color: rgb(17, 24, 39); font-weight: 600">
      Please fill in here
    </span>
  </li>
  <li
    style="
      --tw-space-y-reverse: 0;
      margin-bottom: calc(
        0.25em * var(--tw-space-y-reverse)
      );
      margin-top: calc(
        0.25em * (1 - var(--tw-space-y-reverse))
      );
    "
  >
    <span style="color: rgb(17, 24, 39); font-weight: 600">
      Please fill in here
    </span>
    <span style="color: rgb(17, 24, 39); font-weight: 600">
      Please fill in here
    </span>
  </li>
</ol>

Nested

1. Please fill in here
   • Please fill in here
   • Please fill in here
   • Please fill in here
2. Please fill in here
   • Please fill in here
   • Please fill in here
   • Please fill in here
3. Please fill in here
   • Please fill in here
   • Please fill in here
   • Please fill in here

<ol
  style="
    --tw-text-opacity: 1;
    color: rgb(107, 114, 128);
    list-style-type: decimal;
    list-style-position: inside;
    margin: 0;
    padding: 0;
  "
>
  <li>
    Please fill in here
    <ul
      style="
        padding-left: 1.25em;
        list-style-type: disc;
        list-style-position: inside;
        margin-top: 0.5em;
      "
    >
      <li>Please fill in here</li>
      <li
        style="
          --tw-space-y-reverse: 0;
          margin-bottom: calc(
            0.25em * var(--tw-space-y-reverse)
          );
          margin-top: calc(
            0.25em * (1 - var(--tw-space-y-reverse))
          );
        "
      >
        Please fill in here
      </li>
      <li
        style="
          --tw-space-y-reverse: 0;
          margin-bottom: calc(
            0.25em * var(--tw-space-y-reverse)
          );
          margin-top: calc(
            0.25em * (1 - var(--tw-space-y-reverse))
          );
        "
      >
        Please fill in here
      </li>
    </ul>
  </li>
  <li>
    Please fill in here
    <ul
      style="
        padding-left: 1.25em;
        list-style-type: disc;
        list-style-position: inside;
        margin-top: 0.5em;
      "
    >
      <li>Please fill in here</li>
      <li
        style="
          --tw-space-y-reverse: 0;
          margin-bottom: calc(
            0.25em * var(--tw-space-y-reverse)
          );
          margin-top: calc(
            0.25em * (1 - var(--tw-space-y-reverse))
          );
        "
      >
        Please fill in here
      </li>
      <li
        style="
          --tw-space-y-reverse: 0;
          margin-bottom: calc(
            0.25em * var(--tw-space-y-reverse)
          );
          margin-top: calc(
            0.25em * (1 - var(--tw-space-y-reverse))
          );
        "
      >
        Please fill in here
      </li>
    </ul>
  </li>
  <li>
    Please fill in here
    <ul
      style="
        padding-left: 1.25em;
        list-style-type: disc;
        list-style-position: inside;
        margin-top: 0.5em;
      "
    >
      <li>Please fill in here</li>
      <li
        style="
          --tw-space-y-reverse: 0;
          margin-bottom: calc(
            0.25em * var(--tw-space-y-reverse)
          );
          margin-top: calc(
            0.25em * (1 - var(--tw-space-y-reverse))
          );
        "
      >
        Please fill in here
      </li>
      <li
        style="
          --tw-space-y-reverse: 0;
          margin-bottom: calc(
            0.25em * var(--tw-space-y-reverse)
          );
          margin-top: calc(
            0.25em * (1 - var(--tw-space-y-reverse))
          );
        "
      >
        Please fill in here
      </li>
    </ul>
  </li>
</ol>

HR

Default HR

Please fill in here

---

Please fill in here

<p style="color: rgb(107, 114, 128); margin: 0">Please fill in here</p>
<hr
  style="
    background-color: rgb(229, 231, 235);
    border-width: 0;
    height: 1px;
    margin-bottom: 2em;
    margin-top: 2em;
    color: inherit;
  "
/>
<p style="color: rgb(107, 114, 128); margin: 0">Please fill in here</p>

Trimmed

Please fill in here

---

Please fill in here

<p style="color: rgb(107, 114, 128); margin: 0">Please fill in here</p>
<hr
  style="
    background-color: rgb(243, 244, 246);
    border-width: 0;
    border-radius: 0.25em;
    width: 12em;
    height: 0.25em;
    margin-bottom: 1em;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    color: inherit;
  "
/>
<p style="color: rgb(107, 114, 128); margin: 0">Please fill in here</p>

Icon HR

Please fill in here

---

Please fill in here

<p style="color: rgb(107, 114, 128); margin: 0">Please fill in here</p>
<div
  style="
    justify-content: center;
    align-items: center;
    width: 100%;
    display: inline-flex;
  "
>
  <hr
    style="
      background-color: rgb(229, 231, 235);
      border-width: 0;
      border-radius: 0.25em;
      width: 16em;
      height: 0.25em;
      margin-bottom: 2em;
      margin-top: 2em;
      margin-left: 0;
      margin-right: 0;
    "
  />
  <div
    style="
      padding-left: 1em;
      padding-right: 1em;
      background-color: rgb(255, 255, 255);
      transform: translate(-50%, 0) rotate(0) skewX(0)
        skewY(0) scaleX(1) scaleY(1);
      left: 50%;
      position: absolute;
    "
  >
    <svg
      style="
        color: rgb(55, 65, 81);
        width: 1.25em;
        height: 1.25em;
        display: block;
        vertical-align: middle;
      "
      aria-hidden="true"
      viewBox="0 0 24 27"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M14.017 18L14.017 10.609C14.017 4.905 17.748 1.039 23 0L23.995 2.151C21.563 3.068 20 5.789 20 8H24V18H14.017ZM0 18V10.609C0 4.905 3.748 1.038 9 0L9.996 2.151C7.563 3.068 6 5.789 6 8H9.983L9.983 18L0 18Z"
        fill="currentColor"
      ></path>
    </svg>
  </div>
</div>

<p style="color: rgb(107, 114, 128); margin: 0">Please fill in here</p>

HR with text

Please fill in here

---

Please fill in here

Please fill in here

<p style="color: rgb(107, 114, 128); margin: 0">Please fill in here</p>
<div
  style="
    justify-content: center;
    align-items: center;
    width: 100%;
    display: inline-flex;
  "
>
  <hr
    style="
      background-color: rgb(229, 231, 235);
      border-width: 0;
      width: 16em;
      height: 1px;
      margin-bottom: 2em;
      margin-top: 2em;
      margin-left: 0;
      margin-right: 0;
    "
  />
  <span
    style="
      color: rgb(17, 24, 39);
      font-weight: 500;
      padding-left: 0.75em;
      padding-right: 0.75em;
      background-color: rgb(255 255 255/1);
      transform: translate(-50%, 0) rotate(0) skewX(0)
        skewY(0) scaleX(1) scaleY(1);
      left: 50%;
      position: absolute;
    "
  >
    Please fill in here
  </span>
</div>

<p style="color: rgb(107, 114, 128); margin: 0">Please fill in here</p>