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.2k

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.6k
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.5k
Kids E-learning Platform Card
Kids E-learning Platform Card Clone

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

11 months ago

1.4k
GitHub For you Feed
GitHub For you Feed Clone

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

10 months ago

2.2k
Dashboard Stats Widget
Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

Author:
dev-fab250

4 months ago

1.3k
Blog Card

Author:
Md. Tofayel islam

11 months ago

1.6k
Pricing section Lima
Pricing section Lima with responsive design

Author:
Mubashir hussain

1 year ago

2.3k
File Upload

Author:
Rajesh Maheshwari

7 months ago

800
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

614
User profile card

Author:
Mr Robot

2 years ago

11.3k
Call to Action Box

Author:
Aitrik Saha

8 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components