search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Dark mode
      • Theming
      • Changelog
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Next
    • Content & styles
      • Animations
      • Animations extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Pagination
      • Pills
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Collapse
      • Dropdown
      • Link
      • List group
      • Modal
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Timeline
      • Toasts
      • Tooltip
      • Video carousel
    • Forms
      • Checkbox
      • File input
      • Form templates
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • ResourcesNew
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New

    Headings

    Tailwind CSS React Headings

    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

    • JSX
            
                
          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

    • JSX
            
                
          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

    • JSX
            
                
          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

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

    Related resources

    Textarea Text Animations How to make text responsive in Bootstrap How to center text in Bootstrap Typography Paragraphs Tailwind Textarea

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

    • H1
    • H2
    • H3
    • H4
    • H5
    • H6
    • Related resources
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com