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 Reddit Share via StumbleUpon

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>

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

Images

Responsive images

Thumbnails

Shadows

Shadow on hover

Shapes

Related resources