Linkedin Add to your feed Clone

This tailwind example is contributed by $@(\/)(\/)¥, on 25-Apr-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example is copy

Card Clone

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

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

Tailwind v3.4 3.8k 6

Fork Fullscreen

<div class="w-full flex gap-2 px-2">
                <img src="https://images.unsplash.com/photo-1730627667879-447d38cb03b3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxldGhpb3BpYW4lMjBhaXJsaW5lc3xlbnwwfDB8fHwxNzMyMjU3NzY5fDA&ixlib=rb-4.0.3&q=80&w=1080" alt="User profile" class="w-[3.4rem] h-[3.4rem] rounded-full" />
                <div class="flex flex-col">
                    <h4 class="text-md text-gray-800 font-semibold dark:text-gray-200">Ethiopian Airlines</h4>
                    <h6 class="text-sm text-gray-600 dark:text-gray-400">Airlines and Aviation</h6>
                    
                    <div class="w-fit px-3 flex justify-center items-center border border-black my-2 rounded-full dark:border-gray-200 dark:text-white">
                        <span class="material-symbols-outlined">add</span>
                        <h5 class="">Follow</h5>
                    </div>
                </div>
            </div>

<div class="w-full flex gap-2 px-2">
                <img src="https://images.unsplash.com/photo-1533636721434-0e2d61030955?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxibGFjayUyMHByb2ZpbGUlMjBpbWFnZXxlbnwwfDB8fHwxNzEzNTMwNjg5fDA&ixlib=rb-4.0.3&q=80&w=1080" alt="User profile" class="w-[3.4rem] h-[3.4rem] rounded-full" />
                <div class="flex flex-col">
                    <h4 class="text-md text-gray-800 font-semibold dark:text-gray-200">Eyasu Abera</h4>
                    <h6 class="text-sm text-gray-600 dark:text-gray-400">System Administrator</h6>
                    
                    <div class="w-fit px-3 flex justify-center items-center border border-black my-2 rounded-full dark:border-gray-200 dark:text-white">
                        <i class="fa fa-lock" aria-hidden="true"></i>
                        <h5 class="pl-1">Message</h5>
                    </div>
                </div>
            </div>

<div class="w-full flex gap-2 px-2">
                <img src="https://images.unsplash.com/photo-1678483790053-71367bc7a02c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw5fHxnb29nbGUlMjBsb2dvfGVufDB8MHx8fDE3MzIyNTc3MTF8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="User profile" class="w-[3.4rem] h-[3.4rem] rounded-full" />
                <div class="flex flex-col">
                    <h4 class="text-md text-gray-800 font-semibold dark:text-gray-200">Google</h4>
                    <h6 class="text-sm text-gray-600 dark:text-gray-400">Software Development</h6>
                    
                    <div class="w-fit px-3 flex justify-center items-center border border-black my-2 rounded-full dark:border-gray-200 dark:text-white">
                        <span class="material-symbols-outlined">add</span>
                        <h5 class="">Follow</h5>
                    </div>
                </div>
            </div>

<div class="w-full flex gap-1 px-4 pb-2 ">
                <h6 class="text-md text-gray-600 dark:text-gray-400">View all recommendations</h6>
                <span class="material-symbols-outlined dark:text-gray-300">arrow_right_alt</span>
            </div>
        </div>
    </div>    
</div>

Related Examples

Twitter tweet clone
Replica of twitter tweet card

Sophia Baker

3 years ago

10.4k
Clone of LinkedIn Questionnaire Card
Clone of LinkedIn Questionnaire Card

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

2 years ago

4.1k
Trending Users
Tailwind Flex Trending Users Card Design

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

2 years ago

4.6k
Kids E-learning Platform Card
Kids E-learning Platform Card Clone

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

1 year ago

2.5k
GitHub For you Feed
GitHub For you Feed Clone

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

1 year ago

2.8k
Gaming Platforms Grid

ariaw

9 months ago

880
credit card checkout

Antony

2 years ago

4k
Card Slider

Maxim

1 year ago

2.4k
cards
cards with background animation

Anonymous

2 years ago

3.8k
Hover effect card

Samuel Dawson

3 years ago

33.2k
Showcase Card

Jaber Zarif

2 years ago

3.2k
Website Pricing List Card Component
A Website Pricing List Card Component is a reusable UI element that displays pricing plans or packages on a website, typically for SaaS products, subscriptions, or service tiers. It helps users easily compare different pricing options and choose the best one.

dev-fab250

1 year ago

2k