Circle with text in Tailwind css

user_14059904 0
Viewed 19613

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

tailwind-css css
3 Answers
 <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.

user_144721530

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>

user_92796820

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>
user_47177390
Related