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

    Images

    Tailwind CSS Images

    Responsive images built with Tailwind CSS. Use classes for images to make your pictures responsive and more beautiful. Download for free without registration.


    Responsive images

    Use .max-w-full and .h-auto classes to make a image responsive.

    ...
    • HTML
            
                
          <img
            src="https://tecdn.b-cdn.net/img/new/slides/041.jpg"
            class="h-auto max-w-full"
            alt="..." />
          
            
        

    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

    Thumbnails

    Use .border class to give an image a rounded 1px border appearance.

    ...
    • HTML
            
                
          <div class="flex flex-wrap justify-center">
            <img
              src="https://tecdn.b-cdn.net/img/new/standard/city/041.jpg"
              class="max-w-sm rounded border bg-white p-1 dark:border-neutral-700 dark:bg-neutral-800"
              alt="..." />
          </div>
          
            
        

    Shadows

    Use shadow classes to add a shadow to the image.

    • HTML
            
                
          <div class="flex flex-wrap justify-center">
            <img
              src="https://tecdn.b-cdn.net/img/new/standard/city/042.jpg"
              class="h-auto max-w-sm shadow-lg dark:shadow-black/30"
              alt="" />
          </div>
          
            
        

    Shadow on hover

    Use .transition-shadow class to the element to apply a shadow hover effect.

    • HTML
            
                
          <div class="flex flex-wrap justify-center">
            <img
              src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
              class="h-auto max-w-sm rounded-lg shadow-none transition-shadow duration-300 ease-in-out hover:shadow-lg hover:shadow-black/30"
              alt="" />
          </div>
          
            
        

    Shapes

    Change the shape of the image.

    • HTML
            
                
          <div class="grid grid-cols-3 items-center gap-4">
            <div class="mb-4">
              <img
                src="https://tecdn.b-cdn.net/img/new/standard/city/047.jpg"
                class="h-auto max-w-full rounded-lg"
                alt="" />
            </div>
            <div class="mb-4">
              <img
                src="https://mdbootstrap.com//img/Photos/Square/1.jpg"
                class="h-auto max-w-full rounded-full"
                alt="" />
            </div>
            <div class="mb-4">
              <img
                src="https://tecdn.b-cdn.net/img/new/standard/city/044.jpg"
                class="h-auto max-w-full rounded-full"
                alt="" />
            </div>
          </div>
          
            
        

    Related resources

    Bootstrap Gallery Bootstrap Carousel Slider with Thumbnails How To Center Image How to make image responsive in Bootstrap Hover effect Gallery

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

    • Responsive images
    • Thumbnails
    • Shadows
    • Shadow on hover
    • Shapes
    • 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