CODEWITHSUNDEEP
csstailwind-css
trzew
trzew

Reputation: 445

Circle with text in Tailwind css

I am beginner webdeveloper. I have small problem with Tailwind CSS. I need this: https://ibb.co/KL8cDR2

This is my code:

<div class="w-1/2 h-10 rounded-full bg-gray-400" style="background-color:red">404</div>

but it's not working :( How can I make it? Please help me

Upvotes: 19

Views: 57289

Answers (4)

krishnaacharyaa
krishnaacharyaa

Reputation: 25050

Use rounded class with different options.

<div class="flex">
  <div class="m-3 flex h-20 w-20 items-center justify-center rounded-full bg-blue-600">
    <p>Circle</p>
  </div>

  <div class="m-3 flex h-20 w-20 items-center justify-center rounded-md bg-blue-600 text-center">
    <p>Rounded Square</p>
  </div>
</div>

Output:

enter image description here

Upvotes: 4

Viraj Singh
Viraj Singh

Reputation: 2358

The position absolute way:

<div class="rounded-full border-2 flex p-3 relative">
    <div class="absolute top-5 left-8">
        4
     </div>
</div>

In tailwind.config.js extend inset

theme: {
  inset: {
     '5': '5px',
     '8': '8px'
   }
}

The flex way:

 <div class="w-20 h-20 rounded-full flex justify-center items-center">
       <p>404</p>
 </div>


<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
   <div class="w-20 h-20 rounded-full border-2 border-black flex justify-center items-center">
       <p>404</p>
 </div>
</body>
</html>

Upvotes: 12

Mohammad Zaer
Mohammad Zaer

Reputation: 696

you can use width and height in this way by pixel or something

<div class="w-[200px] h-[200px] bg-red rounded-full flex 
 justify-center items-center">
   <p>404</p>
</div>

Upvotes: 4

ArdKr
ArdKr

Reputation: 364

 <div class="font-bold text-gray-700 rounded-full bg-white flex items-center justify-center font-mono" style="height: 500px; width: 500px; font-size: 170px;">404</div>

This should do the job. Make sure to add a custom class which defines height and width of the circle as well as the font-size and remove font-mono from classes and add your wanted font.

Upvotes: 29

Related Questions