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 $@(\/)(\/)¥

874

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

Responsive Article Section

Author:
Prashant

3 years ago

16.3k
Personal card
A card to show minimal info for staff member

Author:
farid

10 months ago

1.1k
Shop Now Amazon x
Product cards

Author:
ORGIN_DREAMS

5 months ago

1k
credit card checkout

Author:
Antony

1 year ago

3.1k
News Feed

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

10 months ago

1.5k
Brand Grid with Hover Effect

Author:
ariaw

7 months ago

1.1k
GitHub For you Feed
GitHub For you Feed Clone

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

11 months ago

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

Author:
OmKar Mehta

1 year ago

2.2k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

1 year ago

1.7k
Features
A clean, responsive feature section with icons, smooth hover effects, soft backgrounds, and clear titles for modern website designs.

Author:
SAURAV SINGH

3 months ago

280
Event notification card

Author:
Odessa Young

2 years ago

9.4k
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Author:
Abhiraj

10 months ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components