LogoLanding51

Hide element on small screen

  • hidden: By default, hide the element (display: none) on all screen sizes.
  • md:inline: When the screen is getting bigger than the medium breakpoint (min-width 768 px), the element will be displayed as an inline element.
  • Together they hide the element on small (mobile) screens and show it as an inline element on tablets and larger.
Code: ResponsiveDesignHideElement.jsx
export default function ResponsiveDesignHideElement() {
    return (
        <a href="#" className="hidden md:inline">Blog - This link will be hidden on small screen</a>
    );
}

Change font size based on screen size

Text font size can be adjusted based on the screen size. On small screens, you can use a smaller font size, and on larger screens, you can increase the font size for better readability.

  • text-2xl: By default, the font size to 2xl (32px).
  • md:text-5xl: When the screen is getting bigger than the medium breakpoint (min-width 768 px), the font size will increased to 5xl (48px).
Live Demo

Font size will increase on bigger screen

Code: ResponsiveDesignFontSize.jsx
export default function ResponsiveDesignFontSize() {
    return (
        <h1 className="text-2xl md:text-5xl">Font size will increase on bigger screen</h1>
    );
}

Show hamburger menu on small screens and a full navigation bar on larger screens.

Code: ResponsiveDesignNavbarHamburgerMenu.jsx
import { useState } from 'react';


export default function ResponsiveDesignNavbarHamburgerMenu() {
    const [menuOpen, setMenuOpen] = useState(false);


    return (
        <nav className="bg-gray-800 p-4">
            <div className="container mx-auto flex justify-between items-center">
                <div className="text-white text-lg">Brand</div>


                {/* Hamburger button for mobile view */}
                <button
                    onClick={() => setMenuOpen((prev) => !prev)}
                    className="text-white md:hidden"
                    aria-label="Toggle menu"
                >
                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
                    </svg>
                </button>


                {/* Navigation links for desktop view */}
                <div className="hidden md:flex space-x-4">
                    <a href="#" className="text-white hover:bg-gray-700 px-3 py-2 rounded">Home</a>
                    <a href="#" className="text-white hover:bg-gray-700 px-3 py-2 rounded">About</a>
                    <a href="#" className="text-white hover:bg-gray-700 px-3 py-2 rounded">Services</a>
                    <a href="#" className="text-white hover:bg-gray-700 px-3 py-2 rounded">Contact</a>
                </div>
            </div>


            {/* Dropdown menu for mobile view */}
            {menuOpen && (
                <div className="md:hidden container mx-auto px-4 pt-2 pb-4 space-y-2">
                    <a href="#" className="block text-white hover:bg-gray-700 px-3 py-2 rounded">Home</a>
                    <a href="#" className="block text-white hover:bg-gray-700 px-3 py-2 rounded">About</a>
                    <a href="#" className="block text-white hover:bg-gray-700 px-3 py-2 rounded">Services</a>
                    <a href="#" className="block text-white hover:bg-gray-700 px-3 py-2 rounded">Contact</a>
                </div>
            )}
        </nav>


    );
};