Info Card

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

Card Stats

Author Prem..

Tailwind v3.4 20.8k 16

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:

Prashant

4 years ago

65.6k
Product card

Simon Scheffer

3 years ago

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

Arya

3 years ago

12.7k
Tiles for showing stats

Task Master

3 years ago

13.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.

Amit Pachange

4 years ago

53.8k
Information card

Samuel Dawson

3 years ago

12.8k
Info cards for admin panal

Sophia Baker

3 years ago

10.5k
Beautiful info cards
Responsive and minimal design

Amit Pachange

3 years ago

11k
Card with image
Blog post card

Mr Robot

3 years ago

11.1k
Semi transparent Info card

Prajwal Hallale

3 years ago

11.2k
Info cards

Samuel Dawson

3 years ago

11.5k
Weather info Card
Inspired from Mamba UI

Ron Hicks

4 years ago

12.7k
Stats block
basic stats section

Simon Scheffer

3 years ago

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

Arya

4 years ago

13.6k
Responsive Card Grid with hover animation

Prashant

4 years ago

20.7k
Info Card
Information card with image

Brandon D

4 years ago

10.3k
Info cards
Show various statistics on your website

Arya

3 years ago

12k