Menu
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
298
<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.
142
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
