Home
Ti To
About Me Card

About Me Card

About Me Card

This tailwind example is contributed by Ti To, on 05-Jan-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Get in touch, Contact form

Card Avatar Contact us

Author Ti To

151

Fork Fullscreen

<div class="h-screen w-full flex items-center justify-center dark:bg-gray-900">

<div
        class="relative w-full max-w-2xl my-8 md:my-16 flex flex-col items-start space-y-4 sm:flex-row sm:space-y-0 sm:space-x-6 px-4 py-8 border-2 border-dashed border-gray-400 dark:border-gray-400 shadow-lg rounded-lg">

<span class="absolute text-xs font-medium top-0 left-0 rounded-br-lg rounded-tl-lg px-2 py-1 bg-primary-100 dark:bg-gray-900 dark:text-gray-300 border-gray-400 dark:border-gray-400 border-b-2 border-r-2 border-dashed ">
            About Me
        </span>

<div class="w-full flex justify-center sm:justify-start sm:w-auto">
            <img class="object-cover w-20 h-20 mt-3 mr-3 rounded-full" src="https://i.ibb.co/xCvndYT/Screenshot-from-2024-01-05-12-39-14.png">
        </div>
        <a <div class="w-full sm:w-auto flex flex-col items-center sm:items-start">

<p class="font-display mb-2 text-2xl font-semibold dark:text-gray-200" itemprop="author">
                Phileas Fogg
            </p>

<div class="mb-4 md:text-lg text-gray-400">
                <p>Phileas is a rascal, scoundrel and raconteur </p>
            </div>

<div class="flex gap-4">

<a title="VeilMail.io Email Address" href="https://veilmail.io/e/FkKh7o" target="_blank"
                    rel="noopener noreferrer">

<a title="VeilMail.io Email Address" href="https://veilmail.io/e/FkKh7o" target="_blank"
                        rel="noopener noreferrer">
                        <svg class="h-6 w-6 dark:text-gray-300" 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="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418">
                            </path>

</svg>
                    </a>
            </div>
    </div>
</div>
</div>

Related Examples

Profile Card
Show more details on hover

Author:
Tamani Phiri

10 months ago

10.3k
Contact us form with map
Contact us form with map

Author:
Chithira Kumar M

7 months ago

6.4k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

1 month ago

583
Pricing section Lima
Pricing section Lima with responsive design

Author:
Mubashir hussain

3 months ago

257
Trending Users
Tailwind Flex Trending Users Card Design

Author:
Samuel Abera

1 month ago

320
Grid
Grid Grid-Cards

Author:
sardorazimov2901

2 weeks ago

52
Tailwind card

Author:
Conan Hilton

1 year ago

9.9k
Holiday package card
Responsive card

Author:
Aman kumar

5 months ago

3.2k
Tailwind AoPS Demo
Starter code for an interactive Tailwind Demo

Author:
Joseph Barron

3 months ago

854
Responsive Feature Card

Author:
Gopi Yadav

1 year ago

11.1k
Card

Author:
Ameth Galarcio

4 weeks ago

292
Contact page

Author:
Mahir

1 year ago

12.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 1400+ componenent

TailwindFlex.com

Tailwindflex.com is a free tailwind examples library. It's a one-stop destination for ready-made tailwind examples.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2024 TailwindFlex. All Rights Reserved.

v1.6