0

I am working on image upload component in my react app and I design the image uploader component.

Here is the code and the result respectively.

<div className="px-8 py-6 mt-2 text-left bg-white shadow-lg"> <form action=""> <div class="flex items-center justify-center bg-grey-lighter"> <label class=" flex flex-col items-center px-4 py-6 bg-white text-blue rounded-lg shadow-lg tracking-wide uppercase border border-blue cursor-pointer hover:bg-blue hover:text-white"> <AddAPhotoIcon /> <span class="mt-2 text-base leading-normal">Upload Photo</span> <input type="file" class="hidden" /> </label> </div> </form> </div>

enter image description here

But I want change it exactly as the following component.

enter image description here

Improve this question
1
  • well it's quite easy but what have you done so far? Commented Apr 7, 2022 at 18:30

3 Answers 3

Reset to default
3

Make sure you have the same width and height for the element you want circular, in combination with rounded-full.

I adapted your example and used h-40 and w-40 to control height and width. With rounded-full, the result is a circular component.

<div class="flex items-center justify-center"> <form action=""> <label class="text-blue border-blue hover:bg-blue flex h-40 w-40 cursor-pointer flex-col items-center justify-center rounded-full border bg-white uppercase tracking-wide shadow-lg hover:text-white"> <AddAPhotoIcon /> <span class="mt-2 text-base leading-normal">Upload Photo</span> <input type="file" class="hidden" /> </label> </form> </div>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

at least encourage developers to what they have tried so far don't just answer their question
1

Is this you want ??

<script src="https://cdn.tailwindcss.com"></script> <div class="p-10 w-72 border-4 border-gray-200 rounded-full"> <div class="bg-gray-300 p-20 w-52 rounded-full text-center"> Upload <br/>Photo </div> </div>

Improve this answer

Comments

0 
 <img src={`${backend_url}${i.image}`} // source of your image alt="black chair and white table" className="object-container object-center bg-white rounded-full w-40 h-40 border bg-white" />
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.