Home
$@(\/)(\/)Y
GitHub For you Feed

GitHub For you Feed

GitHub For you Feed Clone

This tailwind example is contributed by $@(\/)(\/)Y, on 15-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Author box, User information,copy

Card Profile Clone

$$@(\/)(\/)Y profile image$

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

1.8k

Fork Fullscreen

<div class="h-screen w-full flex flex-col gap-4 justify-center bg-gray-200 dark:bg-gray-900">
    
    <div
        class="lg:w-[60%] md:w-[70%] sm:w-[80%] xs:w-[90%] w-[94%] mx-auto bg-white dark:bg-gray-800 flex flex-col gap-4 border border-gray-300 sm:px-6 px-4 py-4 rounded-lg shadow-lg shadow-gray-400 dark:shadow-gray-700">
        
        <div class="w-full flex justify-between">
            <div class="flex items-center gap-[1rem]">
                <div class="relative">
                    <div
                        class="w-[1.2rem] h-[1.2rem] flex items-center justify-center bg-blue-600 outline outline-2 outline-gray-200 rounded-full absolute bottom-0 -right-2">
                        <ion-icon class="text-sm text-white" name="person"></ion-icon>
                    </div>
                    <img class="w-[3rem] h-[3rem] object-cover rounded-full" src="https://avatars.githubusercontent.com/u/80972003?s=400&u=4abe9028a5d2ea962729656808fe48e31a202751&v=4" alt="Follower Image" />
                </div>
                
                <div class="flex flex-col justify-center pt-4">
                    <div class="text-lg dark:text-white">samuelabera7
                        <span class="text-sm dark:text-gray-300">followed</span>
                    </div>
                    <p class="text-sm dark:text-gray-300">1 week ago</p>
                </div>
            </div>

<div class="w-full px-4 py-4 bg-gray-200 dark:bg-gray-700 rounded-md">
            <div class="w-full flex gap-2">
                <img class="w-[2.8rem] h-[2.8rem] object-cover rounded-full" src="https://images.unsplash.com/photo-1522529599102-193c0d76b5b6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw4fHxtYW58ZW58MHwwfHx8MTczMTY1NzgyMnww&ixlib=rb-4.0.3&q=80&w=1080" alt="Img" />

<div class="w-full flex flex-col">
                    <div class="w-full flex justify-between">
                        <h3 class="font-semibold dark:text-white">somic24
                            <span class="text-sm text-gray-600 dark:text-gray-300">somictg</span>
                        </h3>
                        <button class="h-fit xs:px-[.7rem] px-[.4rem] py-[.1rem] border border-gray-400 dark:border-gray-500 dark:text-gray-100 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 cursor-pointer">Follow</button>
                    </div>
                    <h5 class="text-gray-900 dark:text-gray-100">Focus on AI !</h5>
                    <div
                        class="flex xs:flex-row flex-col xs:justify-start justify-center gap-2 text-sm dark:text-gray-300">
                        <p>111 repositories</p>
                        <p>80.2k followers</p>
                    </div>
                </div>

</div>
        </div>
    </div>
</div>

Related Examples