Responsive headings built with Tailwind CSS. Use different typography classes to change the size, weight and appearance of the text. Free download.

H1

TW Elements

        
            
      import React from 'react';

      export default function App() {
        return (
          <h1 className="mb-2 mt-0 text-5xl font-medium leading-tight text-primary">
            TW Elements
          </h1>
        );
      }

Help us spread the word about Tailwind Elements for React (TER)

If you enjoy the project, help it grow & find more contributors by sharing it with your peers. Every share counts, thank you!

Share via Reddit

H2

TW Elements

        
            
      import React from 'react';

      export default function App() {
        return (
          <h2 className="mb-2 mt-0 text-4xl font-medium leading-tight text-primary">
            TW Elements
          </h2>
        );
      }

H3

TW Elements

        
            
      import React from 'react';

      export default function App() {
        return (
          <h3 className="mb-2 mt-0 text-3xl font-medium leading-tight text-primary">
            TW Elements
          </h3>
        );
      }

H4

TW Elements

        
            
      import React from 'react';

      export default function App() {
        return (
          <h4 className="mb-2 mt-0 text-2xl font-medium leading-tight text-primary">
            TW Elements
          </h4>
        );
      }

H5

TW Elements

        
            
      import React from 'react';

      export default function App() {
        return (
          <h5 className="mb-2 mt-0 text-xl font-medium leading-tight text-primary">
            TW Elements
          </h5>
        );
      }

H6

TW Elements

        
            
      import React from 'react';

      export default function App() {
        return (
          <h6 className="mb-2 mt-0 text-base font-medium leading-tight text-primary">
            TW Elements
          </h6>
        );
      }

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

Headings

Tailwind CSS React Headings

H1

TW Elements

H2

TW Elements

H3

TW Elements

H4

TW Elements

H5

TW Elements

H6

TW Elements

Headings

Tailwind CSS React Headings

H1

TW Elements

H2

TW Elements

H3

TW Elements

H4

TW Elements

H5

TW Elements

H6

TW Elements

Related resources