search results:

    Get started License Playground Services Free hosting Community
    • + D
    • Light
    • Dark
    Tailwind Elements
    • Getting started
      • Quick start
      • Dark mode
      • Theming
      • Changelog
      • Contribute
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Svelte
      • Vue
    • Content & styles
      • Animations
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Checkbox
      • Datepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • Design Blocks
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Team
      • Testimonials
    • Coming Soon
      • Angular
      • Builder
      • React
      • Templates
      • Vue

    Avatars

    Tailwind CSS Avatars

    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
    • HTML
            
                
          <img
            src="https://tecdn.b-cdn.net/img/new/avatars/2.webp"
            class="w-32 rounded-full"
            alt="Avatar" />
          
            
        

    Hey there 👋 we want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow 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 StumbleUpon 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
    • HTML
            
                
            <img
              src="https://mdbcdn.b-cdn.net/img/new/avatars/1.webp"
              class="w-32 rounded-full shadow-lg"
              alt="Avatar" />
            
            
        

    Square

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

    Avatar
    • HTML
            
                
            <img
              src="https://tecdn.b-cdn.net/img/new/avatars/1.webp"
              class="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

    • HTML
            
                
          <div class="text-center">
            <img
              src="https://tecdn.b-cdn.net/img/new/avatars/5.webp"
              class="mx-auto mb-4 w-32 rounded-lg"
              alt="Avatar" />
            <h5 class="mb-2 text-xl font-medium leading-tight">John Doe</h5>
            <p class="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