Card

Jobs recommended for you LinkedIn Clone

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

Card

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

Author $@(\/)(\/)Y

772

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

Tailwind card with gradient border

Author:
Elijah Davis

2 years ago

15.7k
Chats Screen in neomorphism

Author:
Akram Khan

1 year ago

2k
Product review card

Author:
Moriba Traore

2 years ago

15k
beautifull Authentication Page
I create a Authentication page using cloude ai model.

Author:
Akram Khan

1 year ago

1.9k
Gradient card

Author:
TailwindFlex

2 years ago

8.9k
Confirmation model

Author:
Mr Robot

3 years ago

12.9k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

4 weeks ago

105
card2
card2

Author:
pablitodgb

3 months ago

117
Tailwind CSS Blog Card

Author:
Morris Muriuki Muthigani

2 months ago

130
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

Author:
KULDEEP

3 months ago

285
Product features cards

Author:
Henrik R.

1 year ago

3.6k
Card

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

8 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components