Tailwind CSS React 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.

        
            
      import React from 'react';

      export default function App() {
        return (
          <img
          src="https://tecdn.b-cdn.net/img/new/slides/041.jpg"
          className="h-auto max-w-full"
          alt="..." />
        );
      }

Hey there 👋 we're excited about TW Elements for React 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.

        
            
      import React from 'react';

      export default function App() {
        return (
            <img
            src="https://tecdn.b-cdn.net/img/new/standard/city/041.jpg"
            className="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.

        
            
      import React from 'react';

      export default function App() {
        return (
            <img
            src="https://tecdn.b-cdn.net/img/new/standard/city/042.jpg"
            className="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.

        
            
      import React from 'react';

      export default function App() {
        return (
            <img
            src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
            className="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.

        
            
      import React from 'react';

      export default function App() {
        return (
          <div className="mb-4">
            <img
                src="https://tecdn.b-cdn.net/img/new/standard/city/047.jpg"
                className="h-auto max-w-full rounded-lg"
                alt="" />
        </div>
        <div className="mb-4">
            <img
                src="https://mdbootstrap.com//img/Photos/Square/1.jpg"
                className="h-auto max-w-full rounded-full"
                alt="" />
        </div>
        <div className="mb-4">
            <img
                src="https://tecdn.b-cdn.net/img/new/standard/city/044.jpg"
                className="h-auto max-w-full rounded-full"
                alt="" />
        </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