Ynex - Laravel Tailwind CSS Admin & Dashboard Template

Responsive image

Use .img-fluid class to the img tag to get responsive image.

<div class="text-center">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/media/media-48.jpg" class="img-fluid !inline-flex" alt="...">
</div>

Image With Radius

Use .rounded-md class along with .img-fluid to get border radius.

<div class="text-center">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/media/media-49.jpg" class="img-fluid !rounded-md !inline-flex" alt="...">
</div>

Rounded Image

Use .rounded-full class to img tag to get rounded image.

<div class="text-center">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/media/media-50.jpg" class="img-fluid !rounded-full !inline-flex" alt="...">
</div>

Image Left Align

<img class="!rounded-md float-start" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/media/media-53.jpg" alt="...">

Image Center Align

<img class="!rounded-md mx-auto block" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/media/media-55.jpg" alt="...">

Image Right Align

<img class="!rounded-md ltr:float-right rtl:float-left" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/media/media-54.jpg" alt="...">

Figures


    <div class="flex justify-between gap-2">
        <figure class="figure inline-block mb-4">
            <img class="m-[0.125rem] leading-none img-fluid rounded-md w-full" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/media/media-56.jpg" alt="...">
            <figcaption class="text-[0.875em] text-textmuted dark:text-white/70 mt-2">A caption for the above image.
            </figcaption>
        </figure>
        <figure class="figure ltr:float-right rtl:float-left">
            <img class="m-[0.125rem] leading-none img-fluid rounded-md w-full" src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/media/media-57.jpg" alt="...">
            <figcaption class="text-[0.875em] text-textmuted dark:text-white/70 text-end mt-2">A caption for the above image.
            </figcaption>
        </figure>
    </div>

Image Thumbnail

Use ti-img-thumbnail to give an image a rounded 1px border.

<div class="text-center">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/media/media-51.jpg" class="ti-img-thumbnail" alt="...">
</div>

Image Thumbnail

Use ti-img-thumbnail-rounded to give an image a rounded 1px border.

<div class="text-center">
    <img src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/media/media-52.jpg" class="ti-img-thumbnail-rounded" alt="...">
</div>

Switcher

Images & Figures