img.mdx

title	Tailwind CSS Image for React - Material Tailwind
description	Customise your web projects with our easy-to-use image examples for Tailwind CSS and React using Material Design guidelines.
navigation	img img-with-rounded-corners circular-img img-with-caption img-with-shadow img-with-blurred-caption more-examples
github	img
prev	footer
next	video

# Tailwind CSS Image - React

Use our Tailwind CSS img example 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.

<CodePreview component={<ImgExamples.DefaultImg />}>

export function DefaultImg() {
  return (
    <img
      className="h-96 w-full object-cover object-center"
      src="https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80"
      alt="nature image"
    />
  );
}

---

## Image With Rounded Corners

<CodePreview component={<ImgExamples.ImgWithRoundedCorners />}>

export function ImgWithRoundedCorners() {
  return (
    <img
      className="h-96 w-full rounded-lg object-cover object-center"
      src="https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80"
      alt="nature image"
    />
  );
}

---

## Circular Image

<CodePreview component={<ImgExamples.CircularImg />}>

export function CircularImg() {
  return (
    <img
      className="h-96 w-96 rounded-full object-cover object-center"
      src="https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80"
      alt="nature image"
    />
  );
}

---

## Image with Caption

<CodePreview component={<ImgExamples.ImgWithCaption />}>

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

export function ImgWithCaption() {
  return (
    <figure>
      <img
        className="h-96 w-full rounded-lg object-cover object-center"
        src="https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80"
        alt="nature image"
      />
      <Typography as="caption" variant="small" className="mt-2 text-center font-normal">
        Image caption
      </Typography>
    </figure>
  );
}

---

## Image with Shadow

<CodePreview component={<ImgExamples.ImgWithShadow />}>

export function ImgWithShadow() {
  return (
    <img
      className="h-96 w-full rounded-lg object-cover object-center shadow-xl shadow-blue-gray-900/50"
      src="https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80"
      alt="nature image"
    />
  );
}

---

## Image with Blurred Caption

<CodePreview component={<ImgExamples.ImgWithBlurredCaption />}>

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

export function ImgWithBlurredCaption() {
  return (
    <figure className="relative h-96 w-full">
      <img
        className="h-full w-full rounded-xl object-cover object-center"
        src="https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80"
        alt="nature image"
      />
      <figcaption className="absolute bottom-8 left-2/4 flex w-[calc(100%-4rem)] -translate-x-2/4 justify-between rounded-xl border border-white bg-white/75 py-4 px-6 shadow-lg shadow-black/5 saturate-200 backdrop-blur-sm">
        <div>
          <Typography variant="h5" color="blue-gray">
            Sara Lamalo
          </Typography>
          <Typography color="gray" className="mt-2 font-normal">
            20 July 2022
          </Typography>
        </div>
        <Typography variant="h5" color="blue-gray">
          Growth
        </Typography>
      </figcaption>
    </figure>
  );
}

---

## Explore More Tailwind CSS Examples

Check out more image component examples from Material Tailwind Blocks:

• Team Blocks
• Logo Blocks