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>
        );
      }

Hey there 👋 we're excited about TW Elements for React and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

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