React Images

Material Tailwind images for display different images in different forms.


Image

Image
import React from "react";
import Image from "@material-tailwind/react/Image";

export default function Image() {
    return (
        <Image
            src="image-link-here"
            rounded={false}
            raised={false}
            alt="Image"
        />
    )
}
 

Rounded Image

Rounded Image
import React from "react";
import Image from "@material-tailwind/react/Image";

export default function Image() {
    return (
        <Image
            src="image-link-here"
            rounded={true}
            raised={false}
            alt="Rounded Image"
        />
    )
}
 

Raised Image

Raised Image
import React from "react";
import Image from "@material-tailwind/react/Image";

export default function Image() {
    return (
        <Image
            src="image-link-here"
            rounded={false}
            raised={true}
            alt="Raised Image"
        />
    )
}
 

Rounded Raised Image

Rounded Raised Image
import React from "react";
import Image from "@material-tailwind/react/Image";

export default function Image() {
    return (
        <Image
            src="image-link-here"
            rounded={true}
            raised={true}
            alt="Rounded Raised Image"
        />
    )
}