Tailwind CSS Avatar - Nuanxa

Komponen avatar digunakan untuk menampilkan gambar profil pengguna. Komponen ini mendukung berbagai gaya dan dapat dengan mudah dikustomisasi.

Requires Nuanxa JS

Default avatar

Komponen avatar default sederhana.

            
<img
  class="w-10 h-10 rounded-xl"
  src="/assets/img/user.png"
  alt="Default avatar"
/>

Rounded avatar

Avatar dengan tampilan membulat.

            
<img
  class="w-10 h-10 rounded-full"
  src="/assets/img/user.png"
  alt="Rounded avatar"
/>

Bordered avatar

Avatar dengan border di sekelilingnya.

            
<img
  class="w-10 h-10 rounded-xl ring-2 ring-gray-300 dark:ring-gray-700 p-1"
  src="/assets/img/user.png"
  alt="Border avatar"
/>

Avatar initials

Avatar yang menampilkan inisial pengguna.

            
<div
  class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-gray-200 dark:bg-gray-600 rounded-full"
>
  <span class="font-medium text-gray-700 dark:text-gray-300">DF</span>
</div>

Alert

Badge