Home
$@(\/)(\/)Y
Trending Users

Trending Users

Tailwind Flex Trending Users Card Design

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

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

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

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

Author:
Sophia Baker

2 years ago

9.4k
Clone of LinkedIn Questionnaire Card
Clone of LinkedIn Questionnaire Card

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

1 year ago

3.3k
Linkedin Add to your feed Clone
Linkedin Add to your feed Clone

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

1 year ago

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

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

6 months ago

1.1k
GitHub For you Feed
GitHub For you Feed Clone

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

6 months ago

1.7k
Blog Card
A blog card with dark-mode

Author:
Robert Chunga

5 months ago

1.1k
Elegant Cards
Useful Tailwind classes for creating several types of cards. Ranging from simple text to more complex cards with animations and video.

Author:
Nick Girga

4 weeks ago

117
Responsive Article Section

Author:
Prashant

2 years ago

15k
Advanced phone verification

Author:
Md. Tofayel islam

1 year ago

1.8k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

1 month ago

157
Feature Section Cards

Author:
Akram Khan

10 months ago

1.5k
Border gradient

Author:
Samuel Dawson

2 years ago

14.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components