Trending Users

Tailwind Flex Trending Users Card Design

This tailwind example is contributed by $@(\/)(\/)¥, on 22-May-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 4.6k 5

Fork Fullscreen

<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

Sophia Baker

3 years ago

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

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

2 years ago

4.1k
Linkedin Add to your feed Clone
Linkedin Add to your feed Clone

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

2 years ago

3.8k
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
Info card

Laurits

3 years ago

11.3k
Tailwind AoPS Demo
Starter code for an interactive Tailwind Demo

Joseph Barron

2 years ago

4.9k
card
Tarjeta descriptiva

Raul antonio de la cruz hernandez

10 months ago

562
Card Component
This component is a simple card (without image) component with hover effect & Dark mode Supported & full responsive

Shariar Hasan

2 years ago

4.3k
Experince Section

ABDO-SY

1 year ago

1.3k
Beautiful info cards
Responsive and minimal design

Amit Pachange

3 years ago

11k
Stats card with icons
Improved Code quality and added support for dark mode

Dika Rahman

2 years ago

2.6k