HTML code
This is the html code used to create this tailwind snippet
Download<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Followers with Search Input</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="pt-5 bg-gray-100">
<div class="container mx-auto px-4">
<!-- Profile Header Card -->
<div class="bg-white rounded shadow-md overflow-hidden mb-8">
<div class="p-0">
<!-- Cover Image -->
<img src="https://www.bootdey.com/image/1352x300/FF00FF/000000" alt="Cover" class="w-full h-auto">
<!-- Profile Info Row -->
<div class="flex flex-col lg:flex-row items-center">
<!-- Left Column: Stats -->
<div class="w-full lg:w-1/3 order-2 lg:order-1">
<div class="flex items-center justify-around m-4">
<div class="text-center">
<svg class="w-6 h-6 mx-auto mb-2 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
<h4 class="mb-0 text-2xl font-semibold leading-tight">938</h4>
<p class="mb-0 text-base text-gray-600">Posts</p>
</div>
<div class="text-center">
<svg class="w-6 h-6 mx-auto mb-2 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
</svg>
<h4 class="mb-0 text-2xl font-semibold leading-tight">3,586</h4>
<p class="mb-0 text-base text-gray-600">Followers</p>
</div>
<div class="text-center">
<svg class="w-6 h-6 mx-auto mb-2 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<h4 class="mb-0 text-2xl font-semibold leading-tight">2,659</h4>
<p class="mb-0 text-base text-gray-600">Following</p>
</div>
</div>
</div>
<!-- Center Column: Profile Avatar & Name -->
<div class="w-full lg:w-1/3 -mt-3 order-1 lg:order-2">
<div class="-mt-20">
<div class="flex items-center justify-center mb-2">
<div class="w-[110px] h-[110px] rounded-full flex items-center justify-center bg-gradient-to-br from-blue-400 to-pink-500">
<div class="w-[100px] h-[100px] border-4 border-white rounded-full flex items-center justify-center overflow-hidden bg-white">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Mathew Anderson" class="w-full h-full object-cover">
</div>
</div>
</div>
<div class="text-center">
<h5 class="text-xl mb-0 font-semibold">Mathew Anderson</h5>
<p class="mb-0 text-base text-gray-600">Designer</p>
</div>
</div>
</div>
<!-- Right Column: Social Links & Button -->
<div class="w-full lg:w-1/3 order-3">
<ul class="list-none flex items-center justify-center lg:justify-start my-3 gap-3 px-4">
<li class="relative">
<a class="text-white flex items-center justify-center bg-blue-600 p-2 text-sm rounded-full w-8 h-8 hover:bg-blue-700 transition" href="#">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
</a>
</li>
<li class="relative">
<a class="text-white bg-gray-500 flex items-center justify-center p-2 text-sm rounded-full w-8 h-8 hover:bg-gray-600 transition" href="#">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</a>
</li>
<li class="relative">
<a class="text-white bg-gray-500 flex items-center justify-center p-2 text-sm rounded-full w-8 h-8 hover:bg-gray-600 transition" href="#">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221l-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.18-.357.295-.6.295-.002 0-.003 0-.005 0l.213-3.054 5.56-5.022c.24-.213-.054-.334-.373-.121L7.9 13.62l-2.97-.924c-.64-.203-.658-.64.135-.954l11.566-4.458c.538-.196 1.006.128.832.941z"/>
</svg>
</a>
</li>
<li class="relative">
<a class="text-white bg-red-600 flex items-center justify-center p-2 text-sm rounded-full w-8 h-8 hover:bg-red-700 transition" href="#">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
</svg>
</a>
</li>
<li>
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition font-medium">Add To Story</button>
</li>
</ul>
</div>
</div>
<!-- Navigation Tabs -->
<ul class="nav-tabs flex justify-end mt-2 bg-blue-50 rounded-lg p-0 m-0 list-none" role="tablist">
<li class="flex-none" role="presentation">
<button class="tab-button flex items-center justify-center bg-transparent text-base py-4 px-6 relative rounded-none border-b-2 border-transparent hover:text-blue-600 transition" data-tab="pills-profile">
<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
</svg>
<span class="hidden md:block">Profile</span>
</button>
</li>
<li class="flex-none" role="presentation">
<button class="tab-button active flex items-center justify-center bg-transparent text-base py-4 px-6 relative rounded-none border-b-2 border-blue-600 text-blue-600 transition" data-tab="pills-followers">
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
<span class="hidden md:block">Followers</span>
</button>
</li>
<li class="flex-none" role="presentation">
<button class="tab-button flex items-center justify-center bg-transparent text-base py-4 px-6 relative rounded-none border-b-2 border-transparent hover:text-blue-600 transition" data-tab="pills-friends">
<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg>
<span class="hidden md:block">Friends</span>
</button>
</li>
<li class="flex-none" role="presentation">
<button class="tab-button flex items-center justify-center bg-transparent text-base py-4 px-6 relative rounded-none border-b-2 border-transparent hover:text-blue-600 transition" data-tab="pills-gallery">
<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg>
<span class="hidden md:block">Gallery</span>
</button>
</li>
</ul>
</div>
</div>
<!-- Tab Content -->
<div class="tab-content">
<!-- Followers Tab -->
<div class="tab-pane active" id="pills-followers">
<!-- Header with Search -->
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mt-3 mb-4 gap-3">
<h3 class="mb-0 font-semibold flex items-center text-xl">
Followers
<span class="bg-gray-500 text-white text-xs rounded px-2 py-1 ml-2">20</span>
</h3>
<div class="relative w-full sm:w-auto">
<input type="text" class="w-full sm:w-64 py-2 pl-10 pr-4 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" id="text-srh" placeholder="Search Followers">
<svg class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
</div>
</div>
<!-- Followers Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
<!-- Follower Card 1 -->
<div class="bg-white rounded shadow-md">
<div class="p-4 flex items-center gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Betty Adams" class="rounded-full w-10 h-10">
<div class="flex-1">
<h5 class="font-semibold mb-0 text-base">Betty Adams</h5>
<span class="text-xs flex items-center text-gray-600">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
Sint Maarten
</span>
</div>
<button class="border border-blue-600 text-blue-600 bg-white py-1 px-3 rounded hover:bg-blue-50 transition text-sm font-medium">Follow</button>
</div>
</div>
<!-- Follower Card 2 -->
<div class="bg-white rounded shadow-md">
<div class="p-4 flex items-center gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Virginia Wong" class="rounded-full w-10 h-10">
<div class="flex-1">
<h5 class="font-semibold mb-0 text-base">Virginia Wong</h5>
<span class="text-xs flex items-center text-gray-600">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
Tunisia
</span>
</div>
<button class="border border-blue-600 text-blue-600 bg-white py-1 px-3 rounded hover:bg-blue-50 transition text-sm font-medium">Follow</button>
</div>
</div>
<!-- Follower Card 3 -->
<div class="bg-white rounded shadow-md">
<div class="p-4 flex items-center gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Birdie Burgess" class="rounded-full w-10 h-10">
<div class="flex-1">
<h5 class="font-semibold mb-0 text-base">Birdie Burgess</h5>
<span class="text-xs flex items-center text-gray-600">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
Algeria
</span>
</div>
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-700 transition text-sm font-medium">Followed</button>
</div>
</div>
<!-- Follower Card 4 -->
<div class="bg-white rounded shadow-md">
<div class="p-4 flex items-center gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="Steven Lindsey" class="rounded-full w-10 h-10">
<div class="flex-1">
<h5 class="font-semibold mb-0 text-base">Steven Lindsey</h5>
<span class="text-xs flex items-center text-gray-600">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
Malaysia
</span>
</div>
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-700 transition text-sm font-medium">Followed</button>
</div>
</div>
<!-- Follower Card 5 -->
<div class="bg-white rounded shadow-md">
<div class="p-4 flex items-center gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="Hannah Rhodes" class="rounded-full w-10 h-10">
<div class="flex-1">
<h5 class="font-semibold mb-0 text-base">Hannah Rhodes</h5>
<span class="text-xs flex items-center text-gray-600">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
Grenada
</span>
</div>
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-700 transition text-sm font-medium">Followed</button>
</div>
</div>
<!-- Follower Card 6 -->
<div class="bg-white rounded shadow-md">
<div class="p-4 flex items-center gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="Effie Gross" class="rounded-full w-10 h-10">
<div class="flex-1">
<h5 class="font-semibold mb-0 text-base">Effie Gross</h5>
<span class="text-xs flex items-center text-gray-600">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
Azerbaijan
</span>
</div>
<button class="border border-blue-600 text-blue-600 bg-white py-1 px-3 rounded hover:bg-blue-50 transition text-sm font-medium">Follow</button>
</div>
</div>
<!-- Follower Card 7 -->
<div class="bg-white rounded shadow-md">
<div class="p-4 flex items-center gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Mark Barton" class="rounded-full w-10 h-10">
<div class="flex-1">
<h5 class="font-semibold mb-0 text-base">Mark Barton</h5>
<span class="text-xs flex items-center text-gray-600">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
French Southern Territories
</span>
</div>
<button class="border border-blue-600 text-blue-600 bg-white py-1 px-3 rounded hover:bg-blue-50 transition text-sm font-medium">Follow</button>
</div>
</div>
<!-- Follower Card 8 -->
<div class="bg-white rounded shadow-md">
<div class="p-4 flex items-center gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="Carolyn Knight" class="rounded-full w-10 h-10">
<div class="flex-1">
<h5 class="font-semibold mb-0 text-base">Carolyn Knight</h5>
<span class="text-xs flex items-center text-gray-600">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
Nauru
</span>
</div>
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-700 transition text-sm font-medium">Followed</button>
</div>
</div>
<!-- Follower Card 9 -->
<div class="bg-white rounded shadow-md">
<div class="p-4 flex items-center gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Elizabeth Malone" class="rounded-full w-10 h-10">
<div class="flex-1">
<h5 class="font-semibold mb-0 text-base">Elizabeth Malone</h5>
<span class="text-xs flex items-center text-gray-600">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
Djibouti
</span>
</div>
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-700 transition text-sm font-medium">Followed</button>
</div>
</div>
<!-- Follower Card 10 -->
<div class="bg-white rounded shadow-md">
<div class="p-4 flex items-center gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Jon Cohen" class="rounded-full w-10 h-10">
<div class="flex-1">
<h5 class="font-semibold mb-0 text-base">Jon Cohen</h5>
<span class="text-xs flex items-center text-gray-600">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
United States
</span>
</div>
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-700 transition text-sm font-medium">Followed</button>
</div>
</div>
<!-- Follower Card 11 -->
<div class="bg-white rounded shadow-md">
<div class="p-4 flex items-center gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Mary Hernandez" class="rounded-full w-10 h-10">
<div class="flex-1">
<h5 class="font-semibold mb-0 text-base">Mary Hernandez</h5>
<span class="text-xs flex items-center text-gray-600">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
Equatorial Guinea
</span>
</div>
<button class="border border-blue-600 text-blue-600 bg-white py-1 px-3 rounded hover:bg-blue-50 transition text-sm font-medium">Follow</button>
</div>
</div>
<!-- Follower Card 12 -->
<div class="bg-white rounded shadow-md">
<div class="p-4 flex items-center gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Willie Peterson" class="rounded-full w-10 h-10">
<div class="flex-1">
<h5 class="font-semibold mb-0 text-base">Willie Peterson</h5>
<span class="text-xs flex items-center text-gray-600">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
Solomon Islands
</span>
</div>
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-700 transition text-sm font-medium">Followed</button>
</div>
</div>
<!-- Follower Card 13 -->
<div class="bg-white rounded shadow-md">
<div class="p-4 flex items-center gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Harvey Baldwin" class="rounded-full w-10 h-10">
<div class="flex-1">
<h5 class="font-semibold mb-0 text-base">Harvey Baldwin</h5>
<span class="text-xs flex items-center text-gray-600">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
Uruguay
</span>
</div>
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-700 transition text-sm font-medium">Followed</button>
</div>
</div>
<!-- Follower Card 14 -->
<div class="bg-white rounded shadow-md">
<div class="p-4 flex items-center gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="Alice George" class="rounded-full w-10 h-10">
<div class="flex-1">
<h5 class="font-semibold mb-0 text-base">Alice George</h5>
<span class="text-xs flex items-center text-gray-600">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
Madagascar
</span>
</div>
<button class="border border-blue-600 text-blue-600 bg-white py-1 px-3 rounded hover:bg-blue-50 transition text-sm font-medium">Follow</button>
</div>
</div>
<!-- Follower Card 15 -->
<div class="bg-white rounded shadow-md">
<div class="p-4 flex items-center gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="Beulah Simpson" class="rounded-full w-10 h-10">
<div class="flex-1">
<h5 class="font-semibold mb-0 text-base">Beulah Simpson</h5>
<span class="text-xs flex items-center text-gray-600">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
Bahrain
</span>
</div>
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-700 transition text-sm font-medium">Followed</button>
</div>
</div>
<!-- Follower Card 16 -->
<div class="bg-white rounded shadow-md">
<div class="p-4 flex items-center gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="Francis Barber" class="rounded-full w-10 h-10">
<div class="flex-1">
<h5 class="font-semibold mb-0 text-base">Francis Barber</h5>
<span class="text-xs flex items-center text-gray-600">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
Colombia
</span>
</div>
<button class="border border-blue-600 text-blue-600 bg-white py-1 px-3 rounded hover:bg-blue-50 transition text-sm font-medium">Follow</button>
</div>
</div>
<!-- Follower Card 17 -->
<div class="bg-white rounded shadow-md">
<div class="p-4 flex items-center gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Christian Morales" class="rounded-full w-10 h-10">
<div class="flex-1">
<h5 class="font-semibold mb-0 text-base">Christian Morales</h5>
<span class="text-xs flex items-center text-gray-600">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
Maldives
</span>
</div>
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-700 transition text-sm font-medium">Followed</button>
</div>
</div>
<!-- Follower Card 18 -->
<div class="bg-white rounded shadow-md">
<div class="p-4 flex items-center gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="Laura Nelson" class="rounded-full w-10 h-10">
<div class="flex-1">
<h5 class="font-semibold mb-0 text-base">Laura Nelson</h5>
<span class="text-xs flex items-center text-gray-600">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
St. Helena
</span>
</div>
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-700 transition text-sm font-medium">Followed</button>
</div>
</div>
<!-- Follower Card 19 -->
<div class="bg-white rounded shadow-md">
<div class="p-4 flex items-center gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Betty Reynolds" class="rounded-full w-10 h-10">
<div class="flex-1">
<h5 class="font-semibold mb-0 text-base">Betty Reynolds</h5>
<span class="text-xs flex items-center text-gray-600">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
Congo
</span>
</div>
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-700 transition text-sm font-medium">Followed</button>
</div>
</div>
<!-- Follower Card 20 -->
<div class="bg-white rounded shadow-md">
<div class="p-4 flex items-center gap-3">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Keith Quinn" class="rounded-full w-10 h-10">
<div class="flex-1">
<h5 class="font-semibold mb-0 text-base">Keith Quinn</h5>
<span class="text-xs flex items-center text-gray-600">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
French Polynesia
</span>
</div>
<button class="border border-blue-600 text-blue-600 bg-white py-1 px-3 rounded hover:bg-blue-50 transition text-sm font-medium">Follow</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Tab Switching Functionality
const tabButtons = document.querySelectorAll('.tab-button');
const tabPanes = document.querySelectorAll('.tab-pane');
tabButtons.forEach(button => {
button.addEventListener('click', function() {
// Remove active class from all buttons
tabButtons.forEach(btn => {
btn.classList.remove('active', 'border-blue-600', 'text-blue-600');
btn.classList.add('border-transparent');
});
// Add active class to clicked button
this.classList.add('active', 'border-blue-600', 'text-blue-600');
this.classList.remove('border-transparent');
// Hide all tab panes
tabPanes.forEach(pane => {
pane.classList.remove('active');
});
// Show corresponding tab pane
const tabId = this.getAttribute('data-tab');
const activePane = document.getElementById(tabId);
if (activePane) {
activePane.classList.add('active');
}
});
});
// Search Functionality
const searchInput = document.getElementById('text-srh');
const followerCards = document.querySelectorAll('#pills-followers .bg-white.rounded');
searchInput.addEventListener('input', function() {
const searchTerm = this.value.toLowerCase();
followerCards.forEach(card => {
const name = card.querySelector('h5').textContent.toLowerCase();
const location = card.querySelector('.text-xs').textContent.toLowerCase();
if (name.includes(searchTerm) || location.includes(searchTerm)) {
card.parentElement.style.display = '';
} else {
card.parentElement.style.display = 'none';
}
});
});
</script>
</body>
</html>