tailwind text code example

Example 1: tailwind text size

<p class="text-xs ...">The quick brown fox ...</p>
<p class="text-sm ...">The quick brown fox ...</p>
<p class="text-base ...">The quick brown fox ...</p>
<p class="text-lg ...">The quick brown fox ...</p>
<p class="text-xl ...">The quick brown fox ...</p>
<p class="text-2xl ...">The quick brown fox ...</p>
<p class="text-3xl ...">The quick brown fox ...</p>
<p class="text-4xl ...">The quick brown fox ...</p>
<p class="text-5xl ...">The quick brown fox ...</p>
<p class="text-6xl ...">The quick brown fox ...</p>
<p class="text-7xl ...">The quick brown fox ...</p>
<p class="text-8xl ...">The quick brown fox ...</p>
<p class="text-9xl ...">The quick brown fox ...</p>

Example 2: tailwind box with text

<section class="flex justify-center mt-10">
        <div class="bg-gray-800 py-1 w-11/12 rounded text-center border-b-4 border-red-400 flex justify-center ...">
            <p class="text-sm w-11/12 text-red-400">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor
                recusandae
                mollitia tenetur quisquam id delectus aliquid a non facilis tempora earum, blanditiis itaque soluta,
                consectetur corporis deleniti at maiores vero.</p>
        </div>
    </section>

Tags:

Css Example

Recent Posts