Tailwind CSS Image - React

Use our React and Tailwind CSS img examples to portray people or objects in your web projects. The img can be used to display media content on your website.

See below our beautiful img examples that you can use in your Tailwind CSS and React project. The examples also comes in different styles so you can adapt it easily to your needs.

Image Demo

Here's how to implement a simple and responsive img. It can be used to display media content on your website.

nature-image
"use client";

export function ImageDemo() {
  return (
    <img
      src="https://dub.sh/Y0NxRWv"
      alt="nature-image"
      className="h-96 w-full object-cover object-center"
    />
  );
}
"use client";

export function ImageDemo() {
  return (
    <img
      src="https://dub.sh/Y0NxRWv"
      alt="nature-image"
      className="h-96 w-full object-cover object-center"
    />
  );
}

Image with Rounded Corners

Here's how to implement an img with rounded corners using the rounded-lg classname.

nature-image
"use client";

export function ImageWithRoundedCorners() {
  return (
    <img
      src="https://dub.sh/Y0NxRWv"
      alt="nature-image"
      className="h-96 w-full rounded-lg object-cover object-center"
    />
  );
}
"use client";

export function ImageWithRoundedCorners() {
  return (
    <img
      src="https://dub.sh/Y0NxRWv"
      alt="nature-image"
      className="h-96 w-full rounded-lg object-cover object-center"
    />
  );
}

Circular Image

Here's how to implement a circular img using the rounded-full classname.

nature-image
"use client";

export function CircularImage() {
  return (
    <img
      src="https://dub.sh/Y0NxRWv"
      alt="nature-image"
      className="h-96 w-96 rounded-full object-cover object-center"
    />
  );
}
"use client";

export function CircularImage() {
  return (
    <img
      src="https://dub.sh/Y0NxRWv"
      alt="nature-image"
      className="h-96 w-96 rounded-full object-cover object-center"
    />
  );
}

Image with Shadow

Here's how to implement an img with a shadow using the shadow-lg and shadow-black/25 classnames.

nature-image
"use client";

export function ImageWithShadow() {
  return (
    <img
      src="https://dub.sh/Y0NxRWv"
      alt="nature-image"
      className="h-96 w-full rounded-lg object-cover object-center shadow-lg shadow-black/25"
    />
  );
}
"use client";

export function ImageWithShadow() {
  return (
    <img
      src="https://dub.sh/Y0NxRWv"
      alt="nature-image"
      className="h-96 w-full rounded-lg object-cover object-center shadow-lg shadow-black/25"
    />
  );
}

Image with Caption

Here's how to implement an img with a caption using the figure HTML elements.

nature-imageImage Caption
"use client";

import { Typography } from "@material-tailwind/react";

export function ImageWithCaption() {
  return (
    <figure>
      <img
        src="https://dub.sh/Y0NxRWv"
        alt="nature-image"
        className="h-96 w-full rounded-lg object-cover object-center"
      />
      <Typography as="caption" type="small" className="mt-2 block text-center">
        Image Caption
      </Typography>
    </figure>
  );
}
"use client";

import { Typography } from "@material-tailwind/react";

export function ImageWithCaption() {
  return (
    <figure>
      <img
        src="https://dub.sh/Y0NxRWv"
        alt="nature-image"
        className="h-96 w-full rounded-lg object-cover object-center"
      />
      <Typography as="caption" type="small" className="mt-2 block text-center">
        Image Caption
      </Typography>
    </figure>
  );
}

Image with Blurred Caption

Here's how to implement an img with a blurred caption using the Card and Typography components.

nature-image
Sara Lamalo

20 July 2022

Growth

"use client";

import { Card, Typography } from "@material-tailwind/react";

export function ImageWithBlurredCaption() {
  return (
    <figure className="relative h-96 w-full">
      <img
        src="https://dub.sh/Y0NxRWv"
        alt="nature-image"
        className="h-full w-full rounded-xl object-cover object-center"
      />
      <Card
        as="figcaption"
        className="absolute bottom-4 left-1/2 w-[calc(100%-2rem)] -translate-x-1/2 bg-opacity-75 saturate-200 backdrop-blur-md"
      >
        <Card.Body className="flex justify-between px-4">
          <div>
            <Typography type="h6">Sara Lamalo</Typography>
            <Typography className="mt-1 text-foreground">
              20 July 2022
            </Typography>
          </div>
          <Typography className="font-bold">Growth</Typography>
        </Card.Body>
      </Card>
    </figure>
  );
}
"use client";

import { Card, Typography } from "@material-tailwind/react";

export function ImageWithBlurredCaption() {
  return (
    <figure className="relative h-96 w-full">
      <img
        src="https://dub.sh/Y0NxRWv"
        alt="nature-image"
        className="h-full w-full rounded-xl object-cover object-center"
      />
      <Card
        as="figcaption"
        className="absolute bottom-4 left-1/2 w-[calc(100%-2rem)] -translate-x-1/2 bg-opacity-75 saturate-200 backdrop-blur-md"
      >
        <Card.Body className="flex justify-between px-4">
          <div>
            <Typography type="h6">Sara Lamalo</Typography>
            <Typography className="mt-1 text-foreground">
              20 July 2022
            </Typography>
          </div>
          <Typography className="font-bold">Growth</Typography>
        </Card.Body>
      </Card>
    </figure>
  );
}