How to Create Circle with Text in Tailwind CSS ?

Last Updated : 17 Oct, 2024

To create a circle with text inside using Tailwind CSS, a utility-first framework that simplifies styling. Using Tailwind’s predefined classes, you can quickly design circular elements, center the text inside, and customize the appearance all without writing custom CSS.

Table of Content

Circle with text inside a square
Circle around a character
Circle around a word

Circle with text inside a square

A square frame, with its straight edges, makes a great background for a circle that represents creativity and togetherness. The circle sits nicely in the center of the square, catching the eye. Inside the circle, you can add text that invites people to read the message.

Syntax

<element class="rounded-lg overflow-hidden 
        text-center relative">
    <element class="rounded-full inline-flex 
        items-center justify-center">
        ...
    </element>
</element>

Example 1: In this example, 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">
            Code World
        </div>
    </div>
</body>

</html>

Output:

Circle with text inside a square

Circle around a character

The circle helps the character stand out and makes you notice them. It creates a safe space around them, showing they’re important. The circle can mean different things, like safety or adventure.

Syntax:

<element class="flex items-center justify-center rounded-full">
    <element>...</element>
</element>

Example : 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">
            A
        </span>
    </div>
</body>

</html>

Output:

Circle around a character

Circle around a word

Imagine a word inside a circle. The circle draws your eye to the word, making it stand out. It can show that the word is important or special. This simple design makes it easy to focus on what the word means.

Syntax:

<element class="inline-block text-center rounded-full">
         <element>...</element>
</element>

Example : 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">
            Code World
        </span>
    </div>
</body>

</html>

Output:

Circle around a word

How to Create a Rounded Card in Tailwind CSS ?

yashdkadam

Improve

Article Tags :

How to Create Circle with Text in Tailwind CSS ?

Circle with text inside a square

Syntax

Circle around a character

Circle around a word

Similar Reads

Thank You!

What kind of Experience do you want to share?