'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

csstailwind-css


Solution 1:[1]

 <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.

Solution 2:[2]

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>

Solution 3:[3]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ArdKr
Solution 2
Solution 3 Mohammad Zaer

Related Questions