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

Linkedin Add to your feed Clone

This tailwind example is contributed by $@(\/)(\/)Y, 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

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

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

2.9k

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.5k
Clone of LinkedIn Questionnaire Card
Clone of LinkedIn Questionnaire Card

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

1 year ago

3.3k
Trending Users
Tailwind Flex Trending Users Card Design

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

1 year ago

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

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

7 months ago

1.1k
GitHub For you Feed
GitHub For you Feed Clone

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

7 months ago

1.8k
Info cards for admin panel

Author:
Sophia Baker

2 years ago

11.2k
Blog Author Card

Author:
EliteAI Tools

5 months ago

846
Logos cards

Author:
Maxim

5 months ago

744
opulent
this a page didicated for laptops,phones using tailwindcss

Author:
ishimwe shadad

4 weeks ago

177
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

2 months ago

186
Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

26.3k
Feature Card
Elevated card

Author:
Prajwal Hallale

2 years ago

10.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components