How to Create Circle with Text in Tailwind CSS ?
Last Updated :
07 May, 2023
Tailwind CSS is a popular utility-first CSS framework that provides a lot of classes to quickly style web pages without having to write custom CSS. In this article, we will learn how to create a circle with text inside it using Tailwind CSS.
A circle with text inside it is a common design element used in many websites and applications. It can highlight important information, provide context to a piece of content, or add visual interest to a page. With Tailwind CSS, creating a circle with text inside it is very easy.
In this article, we will learn how to create a circle with text in Tailwind CSS. This article will cover the following types of circles with text:
- Circle with text inside a square.
- Circle around a character.
- Circle around a word.
Circle with text inside a square:
Syntax:
<element class="rounded-lg overflow-hidden
text-center relative">
<element class="rounded-full inline-flex
items-center justify-center">
...
</element>
</element>
Example 1: Here, the outer div is used to create the outer rounded square, which contains the circle. ‘rounded-full‘ class is used to create a circle out of the inner div.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet" >
</ head >
< body >
< div class="w-1/4 h-full bg-green-500 px-8
pt-16 pb-24 rounded-lg overflow-hidden
text-center relative">
< div
class="w-40 h-40 rounded-full
inline-flex items-center justify-center
bg-white text-gray-700 text-xl font-bold">
GeeksforGeeks
</ div >
</ div >
</ body >
</ html >
|
Output:
Circle with text in Tailwind CSS
Circle around a character:
Syntax:
<element class="flex items-center justify-center rounded-full">
<element>...</element>
</element>
Example 2: Here, the approach is to use a flexbox to center the text inside the circle. In this example, we have used flex to create a circle around a character.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet" >
</ head >
< body >
< div class="flex items-center justify-center
h-12 w-12 rounded-full bg-green-600">
< span class = "text-white font-bold text-2xl" >
G
</ span >
</ div >
</ body >
</ html >
|
Output:
Circle with text in Tailwind css
Circle around a word:
Syntax:
<element class="inline-block text-center rounded-full">
<element>...</element>
</element>
Example 3: In this example, we have created a circle with the word “GeeksforGeeks” inside it using the border-radius utility.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet" >
</ head >
< body >
< div class="inline-block text-center p-2
rounded-full bg-green-600 text-white">
< span class = "text-2xl font-bold" >
GeeksforGeeks
</ span >
</ div >
</ body >
</ html >
|
Output:
Circle with text in Tailwind css
Share your thoughts in the comments
Please Login to comment...