CODEWITHSUNDEEP
javascriptcssreactjstailwind-css
Teshie Ethiopia
Teshie Ethiopia

Reputation: 666

How to make a styled circle component using tailwindcss?

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

Upvotes: 0

Views: 3292

Answers (3)

Awara Amini
Awara Amini

Reputation: 582

   <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"
   />

Upvotes: 0

MagnusEffect
MagnusEffect

Reputation: 3925

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>

Upvotes: 1

Jouni Kantola
Jouni Kantola

Reputation: 1359

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>

Upvotes: 3

Related Questions