search results:

    • Standard
    • React
    License Free hosting Learn Playground Services Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Dark mode
      • Theming
      • Changelog
      • Contribute
    • 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
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New

    Avatars

    Tailwind CSS ReactAvatars

    Use responsive avatar component with helper examples for avatar dropdown, avatar image, avatar shadow & more. Free download, open-source license.


    Basic examples

    Avatars are visual representations of people or entities and are often displayed within lists or cards.

    Avatar
    • JSX
            
                
          import React from 'react';
    
          export default function App() {
            return (
              <img
              src="https://tecdn.b-cdn.net/img/new/avatars/2.webp"
              className="w-32 rounded-full"
              alt="Avatar" />
            );
          }
          
            
        

    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 Dev.to Share via Twitter Share via Facebook Share via Pinterest Share via Reddit Share via Vkontakte Share via Weibo Share via HackerNews Share via Gmail Share via Email

    With shadow

    Use .shadow class to add a shadow to the avatar. In the example below, we add shadow-lg class.

    Avatar
    • JSX
            
                
            import React from 'react';
    
            export default function App() {
              return (
                <img
                src="https://mdbcdn.b-cdn.net/img/new/avatars/1.webp"
                className="w-32 rounded-full shadow-lg"
                alt="Avatar" />
              );
            }
            
            
        

    Square

    Use the .rounded-lg class to make avatars squared with rounded corners.

    Avatar
    • JSX
            
                
            import React from 'react';
    
            export default function App() {
              return (
                <img
                src="https://tecdn.b-cdn.net/img/new/avatars/1.webp"
                className="w-32 rounded-lg shadow-lg"
                alt="Avatar" />
              );
            }
            
            
        

    With content

    Easily combine the avatar component with content such as a username and a short description.

    Avatar
    John Doe

    Web designer

    • JSX
            
                
          import React from 'react';
    
          export default function App() {
            return (
              <div className="text-center">
                <img
                    src="https://tecdn.b-cdn.net/img/new/avatars/5.webp"
                    className="mx-auto mb-4 w-32 rounded-lg"
                    alt="Avatar" />
                <h5 className="mb-2 text-xl font-medium leading-tight">John Doe</h5>
                <p className="text-neutral-500 dark:text-neutral-400">Web designer</p>
            </div>   
            );
          }
          
            
        

    Related resources

    Bootstrap Avatar Bootstrap Testimonials / Reviews Icons Cards Carousel Rating

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

    • Basic example
    • With shadow
    • Square
    • With content
    • 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