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.

Hey there 👋 we want to make TW 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 Reddit Share via StumbleUpon

Thumbnails

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

HTML

        
            
      <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="..." />

Shadows

Use shadow classes to add a shadow to the image.

HTML

        
            
      <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="" />

Shadow on hover

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

HTML

        
            
      <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="" />

Shapes

Change the shape of the image.

HTML

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

Images

Responsive images

Thumbnails

Shadows

Shadow on hover

Shapes

Related resources

Tutorials:

Extended Docs:

Design System (Figma):