How to Create Circle with Text in Tailwind CSS ?
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 = "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 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"> w3wiki </ div > </ div > </ body > </ html > |
Output:
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 = "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 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 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 “w3wiki” inside it using the border-radius utility.
HTML
<!DOCTYPE html> < html > < head > < link href = "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 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" > w3wiki </ span > </ div > </ body > </ html > |
Output: