Back to application components
Media
Responsive media and avatar components for user profiles, image galleries, and content cards with flexible alignment and layouts.
Updated: N/ANo commit information available.
<div class="flex items-start gap-4">
<img
alt=""
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
class="size-20 rounded object-cover"
/>
<div>
<h3 class="font-medium text-gray-900 sm:text-lg">Title goes here</h3>
<p class="mt-0.5 text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio
nesciunt quas non animi.
</p>
</div>
</div><div class="flex items-center gap-4">
<img
alt=""
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
class="size-20 rounded object-cover"
/>
<div>
<h3 class="font-medium text-gray-900 sm:text-lg">Title goes here</h3>
<p class="mt-0.5 text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio
nesciunt quas non animi.
</p>
</div>
</div><div class="flex items-end gap-4">
<img
alt=""
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
class="size-20 rounded object-cover"
/>
<div>
<h3 class="font-medium text-gray-900 sm:text-lg">Title goes here</h3>
<p class="mt-0.5 text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio
nesciunt quas non animi.
</p>
</div>
</div><div class="flex items-stretch gap-4">
<img
alt=""
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
class="w-20 rounded object-cover"
/>
<div>
<h3 class="font-medium text-gray-900 sm:text-lg">Title goes here</h3>
<p class="mt-0.5 text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio
nesciunt quas non animi.
</p>
</div>
</div><div class="flex flex-row-reverse items-start gap-4">
<img
alt=""
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
class="size-20 rounded object-cover"
/>
<div>
<h3 class="font-medium text-gray-900 sm:text-lg">Title goes here</h3>
<p class="mt-0.5 text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio
nesciunt quas non animi.
</p>
</div>
</div><div class="flex flex-row-reverse items-center gap-4">
<img
alt=""
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
class="size-20 rounded object-cover"
/>
<div>
<h3 class="font-medium text-gray-900 sm:text-lg">Title goes here</h3>
<p class="mt-0.5 text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio
nesciunt quas non animi.
</p>
</div>
</div><div class="flex flex-row-reverse items-end gap-4">
<img
alt=""
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
class="size-20 rounded object-cover"
/>
<div>
<h3 class="font-medium text-gray-900 sm:text-lg">Title goes here</h3>
<p class="mt-0.5 text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio
nesciunt quas non animi.
</p>
</div>
</div><div class="flex flex-row-reverse items-stretch gap-4">
<img
alt=""
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
class="w-20 rounded object-cover"
/>
<div>
<h3 class="font-medium text-gray-900 sm:text-lg">Title goes here</h3>
<p class="mt-0.5 text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptas distinctio
nesciunt quas non animi.
</p>
</div>
</div>