Tailwind paragraphs

Responsive paragraphs built with Tailwind. Use different typography classes to change the size and weight of the text.


Basic

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.

        
            
    <p class="text-base font-light leading-relaxed mt-0 mb-4 text-gray-800">
      I will be the leader of a company that ends up being worth billions of
      dollars, because I got the answers. I understand culture. I am the
      nucleus. I think that’s a responsibility that I have, to push
      possibilities, to show people, this is the level that things could be at.
    </p>

    
        
    

Lead

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.

        
            
    <p class="text-xl font-light leading-relaxed mt-6 mb-4 text-gray-800">
      I will be the leader of a company that ends up being worth billions of
      dollars, because I got the answers. I understand culture. I am the
      nucleus. I think that’s a responsibility that I have, to push
      possibilities, to show people, this is the level that things could be at.
    </p>

    
        
    

Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

- Someone famous in Source Title
        
            

    <p class="text-base font-light leading-relaxed mt-0 mb-0 text-gray-800">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
      erat a ante.
    </p>
    <footer class="block text-gray-600">
      - Someone famous in <cite>Source Title</cite>
    </footer>

    
        
    

Small

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
        
            
    <small class="font-normal leading-normal mt-0 mb-4 text-gray-800">
      I will be the leader of a company that ends up being worth billions of
      dollars, because I got the answers. I understand culture. I am the
      nucleus. I think that’s a responsibility that I have, to push
      possibilities, to show people, this is the level that things could be at.
    </small>
    
        
    

Inline text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

        
            
    <p>You can use the mark tag to <mark class="bg-blue-200">highlight</mark> text.</p>
    <p><del>This line of text is meant to be treated as deleted text.</del></p>
    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
    <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
    <p><u>This line of text will render as underlined.</u></p>
    <p><small>This line of text is meant to be treated as fine print.</small></p>
    <p><strong>This line rendered as bold text.</strong></p>
    <p><em>This line rendered as italicized text.</em></p>
    
        
    

If you are looking for more advanced options, try Bootstrap Typography from MDBootstrap.