Image types

We've designed our images so that they do not become larger then their wrapper container. Choose the one that best suits your needs.


Simple Image

This is a simple image, with rounded corners, that can beautifully go alongside some text, representing a blog post.

...
<div class="flex flex-wrap justify-center">
  <div class="w-6/12 sm:w-4/12 px-4">
    <img src="https://demos.creative-tim.com/tailwindcss-starter-project/_next/static/images/team-1-800x800-fa5a7ac2c81a43925586ea85f2fea332.jpg" alt="..." class="shadow rounded max-w-full h-auto align-middle border-none" />
  </div>
</div>

Circle Image

Cirlce Image

This circled image can work as a profile image.

...
<div class="flex flex-wrap justify-center">
  <div class="w-6/12 sm:w-4/12 px-4">
    <img src="https://demos.creative-tim.com/tailwindcss-starter-project/_next/static/images/team-2-800x800-3e08ef145920c93bbe320add0d2ef58d.jpg" alt="..." class="shadow rounded-full max-w-full h-auto align-middle border-none" />
  </div>
</div>

Simple Raised

The difference between this image and the first one, is the shadow. While the first image had none, this has a shadow that makes the image feel like it floats.

...
<div class="flex flex-wrap justify-center">
  <div class="w-6/12 sm:w-4/12 px-4">
    <img src="https://demos.creative-tim.com/tailwindcss-starter-project/_next/static/images/team-3-800x800-19201574ed51f77138a739c0452ca104.jpg" alt="..." class="shadow-lg rounded max-w-full h-auto align-middle border-none" />
  </div>
</div>

Circle Raised

Like the above image, this one features a shadow to make it look like it floats above the other content.

...
<div class="flex flex-wrap justify-center">
  <div class="w-6/12 sm:w-4/12 px-4">
    <img src="https://demos.creative-tim.com/tailwindcss-starter-project/_next/static/images/team-4-470x470-4ef82ef45a9598d24c4c951ead4d626a.png" alt="..." class="shadow-lg rounded-full max-w-full h-auto align-middle border-none" />
  </div>
</div>