Paragraph with Highlighted Text Using Tailwind UI
A paragraph with highlighted text created with Tailwind adds visual emphasis to key content within your text, enhancing readability and user engagement.
section
Loading component...
47 lines
<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>