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= 
"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"> 
            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= 
"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 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= 
"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"> 
            GeeksforGeeks 
        </span> 
    </div> 
</body> 
  
</html> 