Tailwind images

Responsive images built with Tailwind. MAdditional classes for images that will make your pictures responsive and more beautiful.


Simple rounded

...
1
2
3
4
5
6
<div class="flex flex-wrap justify-center">
  <div class="w-8/12 sm:w-6/12 px-4">
    <img src="https://mdbootstrap.com/img/new/standard/city/026.jpg" alt="..."
      class="rounded max-w-full h-auto align-middle border-none" />
  </div>
</div>

Circle

...
1
2
3
4
5
6
<div class="flex flex-wrap justify-center">
  <div class="w-8/12 sm:w-3/12 px-4">
    <img src="https://mdbootstrap.com/img/new/avatars/15.jpg" alt="..."
      class="rounded-full max-w-full h-auto align-middle border-none" />
  </div>
</div>

Simple with shadow

...
1
2
3
4
5
6
<div class="flex flex-wrap justify-center">
  <div class="w-8/12 sm:w-6/12 px-4">
    <img src="https://mdbootstrap.com/img/new/standard/nature/016.jpg" alt="..."
      class="shadow-xl rounded max-w-full h-auto align-middle border-none" />
  </div>
</div>

Circle with shadow

...
1
2
3
4
5
6
<div class="flex flex-wrap justify-center">
  <div class="w-6/12 sm:w-2/12 px-4">
    <img src="https://mdbootstrap.com/img/new/avatars/1.jpg" alt="..."
      class="shadow-xl rounded-full max-w-full h-auto align-middle border-none" />
  </div>
</div>