Profile Form

Stunning Profile and Cover Image Fields

This tailwind example is contributed by $@(\/)(\/)¥, on 22-Mar-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Author box, User information

Form Profile

$$@(\/)(\/)¥ profile image$

Author $@(\/)(\/)¥

Tailwind v3.4 5.5k 13

Fork Fullscreen

<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

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

10.4k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Hamza Atig

1 year ago

1.8k
login
login by : html , css

Hacker Development

1 year ago

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

Steve NGOYA

1 year ago

1.6k
Responsive Tailind css card
the best Responsive Card with image

irahoza daniel

1 year ago

1.2k
About me section with image

Kofi Osei

3 years ago

25.3k
Responsive Contact Section Using Tailwind CSS
This HTML and Tailwind CSS snippet creates a visually appealing and responsive contact section. Designed to adapt seamlessly across different screen sizes, this component features two main areas: the contact information block and a contact form. The contact block displays essential details like phone, email, and address, alongside social media links, all encapsulated within a cyan-themed card with rounded corners and shadow effects for depth. The form area, highlighted with a contrasting white background, ensures a user-friendly interface for submitting contact details. This code snippet is perfect for integration into any modern web application requiring a responsive and stylish contact section.

Fathallah Anass

2 years ago

3.7k
User profile card with Cover Image

Noob

4 years ago

34k
Form
form

Aman kumar

2 years ago

2.8k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Bunny

4 years ago

50.6k
Email format
This is a ui component to be used to send emails with custom design (deigned with tailwindcss)

Ranit Saha

1 year ago

1.5k
authentication form terminal
authentication form with zsh on mac terminal looks

ardianhu

2 years ago

3.5k