How to make a styled circle component using tailwindcss?-CodePudding

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 >
            <label >
              <AddAPhotoIcon />
              <span >Upload Photo</span>
              <input type="file"  />
            </label>
          </div>
        </form>
      </div>

But I want change it exactly as the following component.

CodePudding user response：

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 >
  <form action="">
    <label >
      <AddAPhotoIcon />
      <span >Upload Photo</span>
      <input type="file"  />
    </label>
  </form>
</div>