Home
Samuel Abera
GitHub For you Feed

GitHub For you Feed

GitHub For you Feed Clone

This tailwind example is contributed by Samuel Abera, 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

Author Samuel Abera

539

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