Card

Jobs recommended for you LinkedIn Clone

This tailwind example is contributed by $@(\/)(\/)¥, on 10-Apr-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Card

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

Author $@(\/)(\/)¥

884

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

Card blog
Targeta para blog

Author:
Raul antonio de la cruz hernandez

6 days ago

32
Card with Dark Mode
For blog post and e-commerce websites

Author:
OmKar Mehta

1 year ago

2.2k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

973
Profile Card
User Profile Card with Name and Location

Author:
Anubhav Ranjan

1 year ago

2.1k
Patient card

Author:
Anonymous

1 year ago

1.8k
Card with image full width
This component is a card designed for showcasing featured blog posts. It includes the post title, a captivating image, category links, and author details.

Author:
Mr Robot

2 years ago

13.4k
Linkedin Add to your feed Clone
Linkedin Add to your feed Clone

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

3.3k
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

4 months ago

669
Product card

Author:
Simon Scheffer

2 years ago

30.6k
Author box

Author:
Mr Robot

2 years ago

11.7k
Profile card

Author:
Jaber Zarif

1 year ago

2.3k
Product / Service Card
Example of a card that can be used as a blog, product, or service card with reviews.

Author:
Noob

3 years ago

17.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components