Card

Jobs recommended for you LinkedIn Clone

This tailwind example is contributed by Samuel Abera, on 10-Apr-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Card

Author Samuel Abera

Fork Fullscreen

<div
        class="w-full relative md:w-11/12 lg:w-8/12 bg-whie dark:bg-gray-900 border border-gray-300 dark:border-gray-500 rounded-xl pb-6">
        <h4 class="text-left m-4 font-semibold dark:text-white">Jobs recommended for you</h4>

<div class="w-[15rem] flex flex-col bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-500 rounded-xl pb-4">
                <div
                    class="h-[3.5rem] relative rounded-t-xl bg-cover bg-center bg-[url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMXx8Z3JvdXAlMjBwaG90byUyMG9mZmljZXxlbnwwfDB8fHwxNzQ0MTExNDU5fDA&ixlib=rb-4.0.3&q=80&w=1080')]">
                    <img class="absolute -bottom-8 left-2 z-10 w-[3.5rem] h-[3.5rem] rounded object-cover" src="https://images.unsplash.com/photo-1665686310934-8fab52b3821b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHx3b21hbnxlbnwwfDB8fHwxNzQ0MTExNjkzfDA&ixlib=rb-4.0.3&q=80&w=1080" alt="avater" />
                </div>
                <div class="mt-10 pl-4 w-[88%] flex flex-col">
                    <h4 class="text-[14px] font-semibold dark:text-white">
                        Arts Project Manager
                        British Council
                    </h4>
                    <p class=" text-[13px] mt-1 text-gray-600 dark:text-gray-300">
                        Addis Ababa, Addis Ababa, Ethiopia
                    </p>

<p class="text-[13px] text-gray-600 dark:text-gray-300">3 months ago</p>
                </div>
            </div>
            
            <div class="w-[15rem] flex flex-col bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-500 rounded-xl pb-4">
                <div
                    class="h-[3.5rem] relative rounded-t-xl bg-cover bg-center bg-[url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw5fHxjb3ZlcnxlbnwwfDB8fHwxNzQ0MDIxNjg5fDA&ixlib=rb-4.0.3&q=80&w=1080')]">
                    <img class="absolute -bottom-8 left-2 z-10 w-[3.5rem] h-[3.5rem] rounded object-cover" src="https://images.unsplash.com/photo-1511367461989-f85a21fda167?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxwcm9maWxlfGVufDB8MHx8fDE3NDQwMjIxMjR8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="avater" />
                </div>
                <div class="mt-10 pl-4 w-[88%] flex flex-col">
                    <h4 class="text-[14px] font-semibold dark:text-white">
                        Project Coordinator- (SALSA Project)
                        ABH PARTNERS PLC</h4>
                    <p class=" text-[13px] mt-1 text-gray-600 dark:text-gray-300">
                        Addis Ababa, Addis Ababa, Ethiopia
                    </p>

<p class="text-[13px] text-gray-600 dark:text-gray-300">3 months ago</p>
                </div>
            </div>
            
            <div class="w-[15rem] flex flex-col bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-500 rounded-xl pb-4">
                <div
                    class="h-[3.5rem] relative rounded-t-xl bg-cover bg-center bg-[url('https://images.unsplash.com/photo-1504805572947-34fad45aed93?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMnx8Z3JvdXAlMjBwaG90byUyMG9mZmljZXxlbnwwfDB8fHwxNzQ0MTExNDU5fDA&ixlib=rb-4.0.3&q=80&w=1080')]">
                    <img class="absolute -bottom-8 left-2 z-10 w-[3.5rem] h-[3.5rem] rounded object-cover" src="https://images.unsplash.com/photo-1507679799987-c73779587ccf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMHx8bWFufGVufDB8MHx8fDE3NDQxMTE2MzZ8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="avater" />
                </div>
                <div class="mt-10 pl-4 w-[88%] flex flex-col">
                    <h4 class="text-[14px] font-semibold dark:text-white">
                        Project Coordinator- (SALSA Project)
                        ABH PARTNERS PLC</h4>
                    <p class=" text-[13px] mt-1 text-gray-600 dark:text-gray-300">
                        Addis Ababa, Addis Ababa, Ethiopia
                    </p>

<p class="text-[13px] text-gray-600 dark:text-gray-300">3 months ago</p>
                </div>
            </div>
        </div>
    </div>

</div>

Related Examples