Home
pablitodgb
Profile1

Profile1

This tailwind example is contributed by pablitodgb, on 21-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Author box, User information

Card Profile

Author pablitodgb

Fork Fullscreen

<div class="p-0 m-0 h-screen w-screen bg-slate-500 flex justify-center items-center">
  <div class="min-h-20 h-fit max-h-fit w-96 min-w-auto bg-slate-100 text-gray-600 rounded-lg">
    <div class="w-full rounded-lg">
      <img class="h-[6rem] w-full object-cover rounded-lg " src="https://images.unsplash.com/photo-1686953412699-b8f522999488?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxhdnRhcnxlbnwwfDB8fHwxNzUwMzU1MzI2fDA&ixlib=rb-4.1.0&q=80&w=1080" alt="image"/>
      <img class="size-20 object-fill rounded-full relative -top-14 mx-auto border border-4 border-slate-100" src="https://images.unsplash.com/photo-1686953412699-b8f522999488?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxhdnRhcnxlbnwwfDB8fHwxNzUwMzU1MzI2fDA&ixlib=rb-4.1.0&q=80&w=1080" alt="image"/>
    </div>
    <div class="p-1 py-3 w-full text-center">
      <main class="font-bold block">Sarah Smith</main>
      <p class="font-think block">Freelance Web Designer<p>
    </div>
    <div class="flex justify-between px-4">
      <div><p>😊</p><p>2k</P></div>
      <div><p>😂</p><p>10k</P></div>
      <div><p>🤣</p><p>15</P></div>
    </div>
  <div class="border border-t-1 my-3"></div>
  <div class="w-max mx-auto py-2">
    <button class="bg-black text-white p-2 m-1 rounded-full w-20">Follow</button>
  </div>
  </div>
</div>

Related Examples