Home
$@(\/)(\/)¥
Linkedin Add to your feed Clone

Linkedin Add to your feed Clone

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

Card Clone

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

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

3.3k

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

Author:
Sophia Baker

2 years ago

9.7k
Clone of LinkedIn Questionnaire Card
Clone of LinkedIn Questionnaire Card

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

1 year ago

3.7k
Trending Users
Tailwind Flex Trending Users Card Design

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

1 year ago

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

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

11 months ago

1.5k
GitHub For you Feed
GitHub For you Feed Clone

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

11 months ago

2.2k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

167
Profile Card
Responsive modern profile card

Author:
Rajesh Maheshwari

8 months ago

758
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.4k
Testimonials

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

6 months ago

1.5k
Product card

Author:
Oliver Hansen

2 years ago

13.5k
Issue card
card designed to display the details of a technical issue

Author:
ABDO-SY

8 months ago

1.9k
404 Error card
Error card at the center

Author:
Shakti

2 years ago

9.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components