Home
Anonymous
sticky headings

sticky headings

This tailwind example is contributed by Anonymous, on 04-Dec-2023. Component is made with Tailwind CSS v3. It is responsive.

Header Card

Author Anonymous

5.6k

Fork Fullscreen

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Leslie Abbott</p>
                  <p class="truncate text-sm text-gray-500">Co-Founder / CEO</p>
                </a>
              </div>
            </div>
          </li>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Hector Adams</p>
                  <p class="truncate text-sm text-gray-500">VP, Marketing</p>
                </a>
              </div>
            </div>
          </li>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1520785643438-5bf77931f493?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Blake Alexander</p>
                  <p class="truncate text-sm text-gray-500">Account Coordinator</p>
                </a>
              </div>
            </div>
          </li>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Fabricio Andrews</p>
                  <p class="truncate text-sm text-gray-500">Senior Art Director</p>
                </a>
              </div>
            </div>
          </li>

</ul>
      </div>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1501031170107-cfd33f0cbdcc?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Angela Beaver</p>
                  <p class="truncate text-sm text-gray-500">Chief Strategy Officer</p>
                </a>
              </div>
            </div>
          </li>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506980595904-70325b7fdd90?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Yvette Blanchard</p>
                  <p class="truncate text-sm text-gray-500">Studio Artist</p>
                </a>
              </div>
            </div>
          </li>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1513910367299-bce8d8a0ebf6?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Lawrence Brooks</p>
                  <p class="truncate text-sm text-gray-500">Content Specialist</p>
                </a>
              </div>
            </div>
          </li>

</ul>
      </div>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1517070208541-6ddc4d3efbcb?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Jeffrey Clark</p>
                  <p class="truncate text-sm text-gray-500">Senior Art Director</p>
                </a>
              </div>
            </div>
          </li>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Kathryn Cooper</p>
                  <p class="truncate text-sm text-gray-500">Associate Creative Director</p>
                </a>
              </div>
            </div>
          </li>

</ul>
      </div>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Alicia Edwards</p>
                  <p class="truncate text-sm text-gray-500">Junior Copywriter</p>
                </a>
              </div>
            </div>
          </li>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Benjamin Emerson</p>
                  <p class="truncate text-sm text-gray-500">Director, Print Operations</p>
                </a>
              </div>
            </div>
          </li>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1504703395950-b89145a5425b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Jillian Erics</p>
                  <p class="truncate text-sm text-gray-500">Designer</p>
                </a>
              </div>
            </div>
          </li>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Chelsea Evans</p>
                  <p class="truncate text-sm text-gray-500">Human Resources Manager</p>
                </a>
              </div>
            </div>
          </li>

</ul>
      </div>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Michael Gillard</p>
                  <p class="truncate text-sm text-gray-500">Co-Founder / CTO</p>
                </a>
              </div>
            </div>
          </li>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Dries Giuessepe</p>
                  <p class="truncate text-sm text-gray-500">Manager, Business Relations</p>
                </a>
              </div>
            </div>
          </li>

</ul>
      </div>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1507101105822-7472b28e22ac?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Jenny Harrison</p>
                  <p class="truncate text-sm text-gray-500">Studio Artist</p>
                </a>
              </div>
            </div>
          </li>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Lindsay Hatley</p>
                  <p class="truncate text-sm text-gray-500">Front-end Developer</p>
                </a>
              </div>
            </div>
          </li>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Anna Hill</p>
                  <p class="truncate text-sm text-gray-500">Partner, Creative</p>
                </a>
              </div>
            </div>
          </li>

</ul>
      </div>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Courtney Samuels</p>
                  <p class="truncate text-sm text-gray-500">Designer</p>
                </a>
              </div>
            </div>
          </li>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Tom Simpson</p>
                  <p class="truncate text-sm text-gray-500">Director, Product Development</p>
                </a>
              </div>
            </div>
          </li>

</ul>
      </div>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Floyd Thompson</p>
                  <p class="truncate text-sm text-gray-500">Principal Designer</p>
                </a>
              </div>
            </div>
          </li>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Leonard Timmons</p>
                  <p class="truncate text-sm text-gray-500">Senior Designer</p>
                </a>
              </div>
            </div>
          </li>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Whitney Trudeau</p>
                  <p class="truncate text-sm text-gray-500">Copywriter</p>
                </a>
              </div>
            </div>
          </li>

</ul>
      </div>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Kristin Watson</p>
                  <p class="truncate text-sm text-gray-500">VP, Human Resources</p>
                </a>
              </div>
            </div>
          </li>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Emily Wilson</p>
                  <p class="truncate text-sm text-gray-500">VP, User Experience</p>
                </a>
              </div>
            </div>
          </li>

</ul>
      </div>

<li class="bg-white">
            <div
              class="relative flex items-center space-x-3 px-6 py-5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 hover:bg-gray-50">
              <div class="flex-shrink-0">
                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                  
                  <span class="absolute inset-0" aria-hidden="true"></span>
                  <p class="text-sm font-medium text-gray-900">Emma Young</p>
                  <p class="truncate text-sm text-gray-500">Senior Front-end Developer</p>
                </a>
              </div>
            </div>
          </li>

</ul>
      </div>

</nav>

</div>
</div>

Related Examples

page heaading stacked
yeah booy, oh booy, o buy

Author:
Anonymous

1 year ago

8.9k
Active Beauty Main Page

Author:
Maxim

2 months ago

246
home
html , css

Author:
Hacker Development

3 weeks ago

254
Blog Card

Author:
Md. Tofayel islam

6 months ago

749
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

3 months ago

951
Cards section - Sport

Author:
ABDO-SY

2 months ago

924
Basic US Flag Card
Here's a set of card components styled with Tailwind CSS that represent various US-themed elements:

Author:
Uwase Alliance

4 days ago

13
Profile card
Profile card with social icons

Author:
Krishna Gudpalle

2 years ago

12.5k
Landing page

Author:
Maxim

2 months ago

624
Team Members Showcase with Portfolio Backlink
Showcase your team's talent with this beautifully designed and responsive team members grid. Each card includes the member's photo, name, role, and social links. A special portfolio backlink is included to highlight your personal contributions as a developer. Supports light and dark modes.

Author:
Abhiraj

4 months ago

689
Pokemon!
Cool Pokemon card!

Author:
Crimson

4 months ago

756
Food delivery ecommerce Card

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

4 months ago

895

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components