Home
Samuel Abera
Trending Users

Trending Users

Tailwind Flex Trending Users Card Design

This tailwind example is contributed by Samuel Abera, on 22-May-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is copy

Card Clone

Author Samuel Abera

2.2k

Fork Fullscreen

<div class="w-full h-screen flex justify-center items-center bg-gray-900 dark:bg-white">
    
    <div
        class="relative flex xl:w-[60%] md:w-[50%] sm:w-[80%] xs:w-[96%] gap-4 items-center p-2 border dark:border-gray-400/30 border-gray-400/30 rounded  shadow shadow-green-500 ">
        <div
            class="absolute flex justify-center gap-1 w-10 text-xl font-bold text-center text-green-500 font-semibold dark:bg-white bg-gray-800 rounded -top-2 -left-2">
            <span class="self-end text-sm text-red-500">#</span>
            ?
        </div>

<a class="w-full overflow-hidden rounded" style="max-width: 100px;" href="https://tailwindflex.com/@sammytg7">
            <img class="object-cover my-auto rounded w-28 h-28" width="200" height="200" src="https://lh3.googleusercontent.com/a/ACg8ocIexhmmTS8LcwWo1fPGY5Fl3KXpd-JuBE_Gj56P3rUR2g=s96-c" alt="">
        </a>

<div class="flex flex-col justify-between flex-grow gap-3 px-2">
            <div class="w-full">
                <a href="https://tailwindflex.com/@sammytg7" class="font-semibold md:text-xl text-gray-200 dark:text-black">
                    Samuel Abera
                </a>
                <p class="pt-1 text-sm dark:text-gray-700 two-lines text-gray-300">
                    Bringing web ideas to life! Full-stack developer with 4 years of experience.
                </p>
            </div>

<div class="flex items-center justify-between gap-1">
                <div class="text-sm dark:text-gray-700 text-gray-400">
                    21 components
                </div>
                <div title="Total points this month"
                    class="flex items-center gap-1 px-2 py-1 text-xs dark:text-gray-700 rounded cursor-pointer dark:bg-gray-300/30 bg-gray-700/90 text-gray-300">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="w-4 h-4">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path>
                    </svg>
                    <span>
                    7.7k
                </span>
                </div>
            </div>

</div>
    </div>
</div>

Related Examples

Twitter tweet clone
Replica of twitter tweet card

Author:
Sophia Baker

1 year ago

8.9k
Clone of LinkedIn Questionnaire Card
Clone of LinkedIn Questionnaire Card

Author:
Samuel Abera

7 months ago

2.3k
Linkedin Add to your feed Clone
Linkedin Add to your feed Clone

Author:
Samuel Abera

7 months ago

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

Author:
Samuel Abera

1 month ago

231
GitHub For you Feed
GitHub For you Feed Clone

Author:
Samuel Abera

1 month ago

539
User Feedback Card
A responsive user feedback card that displays user information, their role, and a testimonial. The card is styled using Tailwind CSS for a clean and modern look.

Author:
Anum Shahana

2 months ago

539
Product card
sleek and modern product card

Author:
OmKar Mehta

8 months ago

3.2k
Animated cards

Author:
Michael Andreuzza

7 months ago

3.3k
Animated cards with Tailwind CSS

Author:
Michael Andreuzza

7 months ago

6.2k
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

3 months ago

601
Tailwind CSS Book

Author:
Michael Andreuzza

7 months ago

1.5k
credit card checkout

Author:
Antony

9 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2024 TailwindFlex. All Rights Reserved.

v1.9