Paragraph with Highlighted Text Using Tailwind UI

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
  rel="stylesheet"
/>

<style>
  .body {
    font-family: "Plus Jakarta Sans", sans-serif;
  }
</style>

<div class="max-w-4xl px-8 py-32 mx-auto">
  <div class="mb-12 space-y-16 sm:mb-24">
    <h1 class="text-3xl font-semibold text-center uppercase md:text-4xl">
      Lorem Ipsum news
    </h1>
    <p class="text-lg text-justify">
      Lorem ipsum dolor sit
      <span
        class="relative inline-block px-1 mt-0 font-medium text-red-800 bg-red-100 rounded-lg"
      >
        amet consectetur adipisicing
      </span>
      elit. Aut sunt sint impedit atque voluptas, voluptatum facere? Odio
      ratione enim possimus quidem ad consequatur ,
      <span
        class="relative inline-block px-1 mt-0 font-medium text-indigo-800 bg-indigo-100 rounded-lg"
      >
        consequuntur cupiditate dolorem recusandae est nesciunt?
      </span>
      Assumenda!
    </p>
    <p class="text-lg text-justify">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
      <span
        class="relative inline-block px-1 mt-0 font-medium text-green-800 bg-green-100 rounded-lg"
      >
        Quae dolores placeat dolore minima sit enim a quis quas veniam rem
      </span>
      , minus cumque sapiente molestiae illo quam! Quaerat commodi voluptas
      illum.
    </p>
  </div>
</div>