Impacts

This tailwind example is contributed by Anonymous, on 29-Oct-2026. Component is made with Tailwind v3.4. It is responsive.

Other

Author Anonymous

Tailwind v3.4 5

Fork Fullscreen

<p class="flex justify-center w-full gap-2 pt-4 font-extrabold text-2xl md:text-3xl dark:text-white">
            <span>Impact</span>

<div title="All countributed components"
                class="flex flex-col justify-center items-center gap-2 border-2 border-dashed border-gray-500/50 p-4 rounded-md h-32 dark:text-gray-200">
                <div class="flex gap-2 items-center">
                    <span class="font-bold text-3xl md:text-4xl">
                30
            </span>
                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"></path>
                    </svg>
                </div>
                <span class="font-semibold text-sm text-center">Components contributed</span>
            </div>

<div title="Users got help"
                class="flex flex-col justify-center items-center gap-2 border-2 border-dashed border-gray-500/50 p-4 rounded-md h-32 dark:text-gray-200">
                <div class="flex gap-2 items-center">
                    <span class="font-bold text-3xl md:text-4xl">
                93.9k
            </span>
                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z">
                        </path>
                    </svg>
                </div>
                <span class="font-semibold text-sm text-center">Users got help</span>
            </div>

<div title="Total favorites received on components"
                class="flex flex-col justify-center items-center gap-2 border-2 border-dashed border-gray-500/50 p-4 rounded-md h-32 dark:text-gray-200">
                <div class="flex gap-2 items-center">
                    <span class="font-bold text-3xl md:text-4xl">
                60
            </span>
                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z">
                        </path>
                    </svg>
                </div>
                <span class="font-semibold text-sm text-center">Favorites receiveds</span>
            </div>

<div title="component views"
                class="md:col-start-2 lg:col-auto flex flex-col justify-center items-center gap-2 border-2 border-dashed border-gray-500/50 p-4 rounded-md h-32 dark:text-gray-200">
                <div class="flex gap-2 items-center">
                    <span class="font-bold text-3xl md:text-4xl">
                3.3k
            </span>
                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z">
                        </path>
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z">
                        </path>
                    </svg>
                </div>
                <span class="font-semibold text-sm text-center">Views in last 30 days</span>
            </div>

</div>

Related Examples

Pricing Plans

ariaw

1 year ago

634
Plant Game
Checking to see if it works

Becky Keyworth

1 year ago

1.1k
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS

Omer fils ELENGA

3 weeks ago

23
Career Page
This is a career page component built in tailwind

Deepak Sharma

1 year ago

1.7k
Forgot Password
Forgot Password

Tanvir Hasan Bappy (Tanvir)

10 months ago

733
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Rathanak Phan

1 year ago

1.1k
register

Anonymous

1 week ago

61
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Hamza Atig

1 year ago

2.2k
Interactive Game Flip Card – Pure HTML & CSS Component
An elegant and interactive game info flip card built purely with HTML and CSS. This component flips smoothly on hover to reveal detailed game information on the back, providing a modern and engaging way to showcase your games without using JavaScript. Perfect for gaming websites wanting sleek animations and clean design.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Abhiraj

1 year ago

2.2k
Coffee Menu

ariaw

1 year ago

930
Model Performance Rings
Model Performance Rings

Omer fils ELENGA

3 weeks ago

30