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://www.creative-tim.com/learning-lab/tailwind-starter-kit/img/team-1-800x800.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://www.creative-tim.com/learning-lab/tailwind-starter-kit/img/team-2-800x800.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://www.creative-tim.com/learning-lab/tailwind-starter-kit/img/team-3-800x800.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://www.creative-tim.com/learning-lab/tailwind-starter-kit/img/team-4-470x470.png" alt="..." class="shadow-lg rounded-full max-w-full h-auto align-middle border-none" />
  </div>
</div>