Home
Prem..
Info Card

Info Card

This tailwind example is contributed by Prem.., on 10-Oct-2022. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Info, Show info, Statistics

Card Stats

Author Prem..

17.8k

Fork Fullscreen

<div class="bg-white max-w-2xl shadow overflow-hidden sm:rounded-lg">
    <div class="px-4 py-5 sm:px-6">
        <h3 class="text-lg leading-6 font-medium text-gray-900">
            User database
        </h3>
        <p class="mt-1 max-w-2xl text-sm text-gray-500">
            Details and informations about user.
        </p>
    </div>
    <div class="border-t border-gray-200">
        <dl>
            <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt class="text-sm font-medium text-gray-500">
                    Full name
                </dt>
                <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                    Mickael Poulaz
                </dd>
            </div>
            <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt class="text-sm font-medium text-gray-500">
                    Best techno
                </dt>
                <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                    React JS
                </dd>
            </div>
            <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt class="text-sm font-medium text-gray-500">
                    Email address
                </dt>
                <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                    m.poul@example.com
                </dd>
            </div>
            <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt class="text-sm font-medium text-gray-500">
                    Salary
                </dt>
                <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                    $10,000
                </dd>
            </div>
            <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt class="text-sm font-medium text-gray-500">
                    About
                </dt>
                <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                    To get social media testimonials like these, keep your customers engaged with your social media accounts by posting regularly yourself
                </dd>
            </div>
        </dl>
    </div>
</div>

Related Examples

User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Author:
Prashant

2 years ago

59.6k
Product card

Author:
Simon Scheffer

2 years ago

27.7k
Info cards for admin panel
Display various Infos and statatics in admin panel with these cards

Author:
Arya

2 years ago

11.2k
Tiles for showing stats

Author:
Task Master

2 years ago

11.8k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

2 years ago

48k
Information card

Author:
Samuel Dawson

2 years ago

11k
Info cards for admin panal

Author:
Sophia Baker

2 years ago

8.8k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

2 years ago

9.7k
Card with image
Blog post card

Author:
Mr Robot

2 years ago

9.7k
Info cards

Author:
Samuel Dawson

2 years ago

9.8k
Semi transparent Info card

Author:
Prajwal Hallale

2 years ago

10.9k
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

2 years ago

11.3k
Stats block
basic stats section

Author:
Simon Scheffer

2 years ago

9.6k
Info card for admin panal
Show stats on your dashboard

Author:
Arya

2 years ago

12.2k
Responsive Card Grid with hover animation

Author:
Prashant

2 years ago

17.7k
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

10.7k
Info Card
Information card with image

Author:
Brandon D

2 years ago

8.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components