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

1.1k

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

Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3.5k
Pricing Table

Author:
Akshay

3 years ago

11k
Card 30/70

Author:
Maxim

9 months ago

652
Ripple Animation
Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are loading, loader,Author box, User information,Transitions

Author:
Tofayel Islam

4 weeks ago

323
omerlinkStream
omerlinkStream

Author:
Omer fils ELENGA

2 weeks ago

195
card
simple card for begin

Author:
Omer fils ELENGA

11 months ago

2.1k
Profile1

Author:
pablitodgb

7 months ago

359
card
It's a product card

Author:
SAURAV SINGH

9 months ago

1.2k
Subcribe Card - Alert - Notification

Author:
ABDO-SY

10 months ago

934
Card Component
This component is a simple card (without image) component with hover effect & Dark mode Supported & full responsive

Author:
Shariar Hasan

1 year ago

3.5k
Product Card

Author:
Maxim

10 months ago

1.6k
Animated Info Card
Animated info card

Author:
Shivam Vishwakarma

1 year ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components