Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a Circle with Text in Tailwind CSS
In this article, we will learn how to create a circular element with text inside using Tailwind CSS. Tailwind CSS is a functionally-focused CSS framework that allows for fast UI development. When following these steps You will be able to create eye-catching circular elements with text in your project.
Prerequisites
- Basic understanding of HTML and CSS.
- Familiarity with Tailwind CSS.
Creating Circle with text using Tailwind CSS
Step 1: Setting Up the Project
You need to first create a new directory for your project and navigate into the created project.
mkdir circle-text-project cd circle-text-project
Step 2: Add Tailwind CSS
To use Tailwind CSS you can either include it via CDN in your HTML file or set it up using npm and for simplicity we will use the CDN method.
Create and open your index.html file and add the following content-
Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Circle with Text</title>
<link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="flex items-center justify-center h-screen bg-gray-100">
<div class="flex items-center justify-center">
<div class="w-32 h-32 bg-green-500 rounded-full
flex items-center justify-center
text-white font-bold text-center
leading-tight text-sm">
Tutorialpoints
</div>
</div>
</body>
</html>
Output
Updated on: 2024-11-06T10:14:28+05:30
1K+ Views
Advertisements