Show user details

This tailwind example is contributed by Lucas Martinez, on 12-Jan-2023. Component is made with Tailwind v3.4. similar terms for this example are Author box, User information

Profile Other

Author Lucas Martinez

Tailwind v3.4 26.2k 20

Fork Fullscreen

<div class="bg-white overflow-hidden shadow rounded-lg border">
    <div class="px-4 py-5 sm:px-6">
        <h3 class="text-lg leading-6 font-medium text-gray-900">
            User Profile
        </h3>
        <p class="mt-1 max-w-2xl text-sm text-gray-500">
            This is some information about the user.
        </p>
    </div>
    <div class="border-t border-gray-200 px-4 py-5 sm:p-0">
        <dl class="sm:divide-y sm:divide-gray-200">
            <div class="py-3 sm: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">
                    John Doe
                </dd>
            </div>
            <div class="py-3 sm: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">
                    johndoe@example.com
                </dd>
            </div>
            <div class="py-3 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt class="text-sm font-medium text-gray-500">
                    Phone number
                </dt>
                <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                    (123) 456-7890
                </dd>
            </div>
            <div class="py-3 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt class="text-sm font-medium text-gray-500">
                    Address
                </dt>
                <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                    123 Main St<br>
                     Anytown, USA 12345
                </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
Basic Resume template
simple and clean layout that provides a professional look.

R.P Ketan

3 years ago

28.1k
User Profile Card
Full-page Profile card

Prashant

4 years ago

20.2k
User profile card with Cover Image

Noob

3 years ago

33.9k
Nutrition facts table
Show Nutrient contents with a stripped table

Kofi Osei

3 years ago

14k
Invoice template

Shakti

3 years ago

28.8k
Tailwind invoice example

Elijah Davis

3 years ago

19.8k
Collapsible content

Rafferty Kim

3 years ago

14.5k
Modern resume template
modern resume template with data

Amit Pachange

3 years ago

23.3k
Show credit card details

Manuela Bianka

3 years ago

13.2k
background animation
background animation

Anonymous

3 years ago

53k
About me section with image

Kofi Osei

3 years ago

25.3k
Profile card

Mr Robot

3 years ago

13.4k
User profile card with social icons
Showcases a user's profile information along with links to their various social media accounts.

Simon Scheffer

3 years ago

15.7k
Popover
basic popover example

Dipti narayan

3 years ago

13.7k
Responsive user card with tailwind

Gopi Yadav

3 years ago

11.9k
Icon group

Conan Hilton

3 years ago

10.3k
Typewriter effect in tailwindcss with this simple trick
source: https://dev.to/lazysock/make-a-typewriter-effect-with-tailwindcss-in-5-minutes-dc

Anonymous

3 years ago

12.2k