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're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

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

Tailwind CSS Images

Responsive images

Thumbnails

Shadows

Shadow on hover

Shapes

Access restricted

To view this section you must have an active PRO account

Images

Tailwind CSS Images

Responsive images

Thumbnails

Shadows

Shadow on hover

Shapes

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):