Home
Samuel Abera
Profile Form

Profile Form

Stunning Profile and Cover Image Fields

This tailwind example is contributed by Samuel Abera, on 22-Mar-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Author box, User information

Form Profile

Author Samuel Abera

3.9k

9

Fork Fullscreen

<div class="w-full h-screen flex items-center justify-center dark:bg-gray-900">
    
    <div
        class="md:w-[60%] sm:w-[70%] xs:w-[90%] mx-auto rounded-sm bg-[url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw5fHxjb3ZlcnxlbnwwfDB8fHwxNzExMTExMzEzfDA&ixlib=rb-4.0.3&q=80&w=1080')] bg-cover bg-center bg-no-repeat items-center">
        
        <div
            class="mx-auto flex justify-center w-[141px] h-[141px] rounded-full bg-[url('https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw3fHxwZW9wbGV8ZW58MHwwfHx8MTcxMTExMTM4N3ww&ixlib=rb-4.0.3&q=80&w=1080')] bg-cover bg-center bg-no-repeat">

<div class="bg-white rounded-full w-6 h-6 text-center ml-28 mt-4">

<input type="file" name="profile" id="upload_profile" hidden required>

<label for="upload_profile" class="inline-flex items-center">
                            <svg data-slot="icon" class="w-5 h-5 text-blue-700" fill="none" stroke-width="1.5"
                                stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
                                aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z">
                                </path>
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z">
                                </path>
                            </svg>
                        </label>
            </div>
        </div>
        <div class="flex justify-end">
            
            <input type="file" name="profile" id="upload_cover" hidden required>

<div class="bg-white flex items-center gap-1 rounded-tl-md px-2 font-semibold">
                <label for="upload_cover" class="inline-flex gap-1 items-center cursor-pointer">Cover
                        
                <svg data-slot="icon" class="w-5 h-5 text-blue-700" fill="none" stroke-width="1.5" stroke="currentColor"
                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z">
                    </path>
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z">
                    </path>
                </svg>
                </label>
            </div>

</div>
    </div>
</div>

Related Examples

Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

Author:
Samuel Abera

11 months ago

7.7k
Profile Card
User Profile Card with Name and Location

Author:
Anubhav Ranjan

5 months ago

975
Contact us form template

Author:
Lukas Müller

2 years ago

8.3k
Feedback Form

Author:
JaxStone

2 years ago

14.2k
User registration form

Author:
Laurits

2 years ago

10.4k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

3 weeks ago

334
Sign in form
simple full-height login form

Author:
Lukas Müller

2 years ago

8.5k
Payment Form

Author:
ABDO-SY

1 week ago

118
create event modified
it is the layout for creating an event

Author:
seth dridi

6 months ago

1.3k
Experience Card
Experience card section you can use for portfolio or other profiles.

Author:
Khalid

1 year ago

2.4k
Portfolio Hero Section 4

Author:
Samuel Abera

3 months ago

1.8k
Sign up for newsletter form

Author:
Amit Pachange

1 year ago

11.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1