Creating Circles with Tailwind CSS
Creating Circles with Tailwind CSS
Tailwind CSS

Creating Circles with Tailwind CSS

Lynne Buencamino's Profile
Lynne Buencaminoon Jul 2, 2021

Use Tailwind CSS to create the perfect circle and learn different ways to use them.

Creating a basic shape like circles or polygons can open a box full of ideas. Circles can be manipulated to make tons of cool features including avatars, notification dots, and even cool background effects.

By using Tailwind CSS you'll be drawing a circle in no time. We'll learn the basics of making your first circle with Tailwind CSS and try out some ideas you can use with circles.

Before we get down to making circles, let's start by setting up our CodePen to include Tailwind CSS. Create a new CodePen and add Tailwind under the CSS settings.

Adding Tailwind to CodePen

We're going to style our area a little and use Tailwind CSS's flex classes to move our circles in the center of our work area and change the background color to a green for some color.

Pro Tip: Using flex in the parent div will place its children side-by-side.

html<div class="min-h-screen flex items-center justify-center bg-green-500">
  <!-- circles will go here -->
</div>

The perfect circle, here we come! Here are three circles of various sizes.

Let's start with a circle's width and height. To be considered a circle, the shape's width and height are naturally the same in size. Tailwind CSS' width and height classes are easy to use.

I'll use w-32 and h-32 for an 8rem width and height. Then give this shape a background color of bg-red-600.

html<div class="w-32 h-32 bg-red-600"></div>

But hey! If you're following along, you'll notice that it's not a circle. It's a square.

Round out the edges completely by adjusting the border radius using rounded-full.

<div class="min-h-screen flex items-center justify-center bg-green-500 space-x-8">
   <div class="w-32 h-32 bg-red-600 rounded-full"></div>
</div>

Now that's a perfect circle!

After completing the previous step, take the circle you just made and create three circles of different sizes and colors that we'll use in further examples.

<div class="min-h-screen flex items-center justify-center bg-green-500 space-x-8">
   <div class="w-32 h-32 bg-red-600 rounded-full"></div>
   <div class="w-16 h-16 bg-red-500 rounded-full"></div>
   <div class="w-8 h-8 bg-red-400 rounded-full"></div>
</div>

Pro Tip: To add spacing between the flex children, use Tailwind CSS' space between like how we did in this example.

html<div
  class="min-h-screen flex items-center justify-center bg-green-500 space-x-8"
>
  <!-- circles will go here -->
</div>

And there you have it! Three perfect circles in three different sizes and colors spaced evenly apart next to each other.

We've seen text in boxes and paragraphs in sections, but what about text in a circle? Text in circles can be used for quotes, graphs, logos, names . . . literally anything.

Here we'll use the circles we made to create a round shape for the text to lay upon.

<div class="min-h-screen flex items-center justify-center bg-purple-500 space-x-8">
   <div class="relative w-36 h-36 bg-purple-50 rounded-full flex justify-center items-center text-center p-5 shadow-xl">
      <span class="absolute text-8xl left-0 top-0 text-purple-800">"
      </span>
      Make it simple, but significant.
   </div>
   <div class="relative w-24 h-24 bg-purple-100 rounded-full flex justify-center items-center text-center p-5 shadow-xl">
      <span class="absolute text-7xl left-0 top-0 text-purple-800">"
      </span>
      Great work.
   </div>
   <div class="relative w-12 h-12 bg-purple-200 rounded-full flex justify-center items-center text-center p-5 shadow-xl">
      <span class="absolute text-3xl left-0 top-0 text-purple-800">"
      </span>
      Yes.
   </div>
</div>

You can see that I changed the background color. Feel free to use any color that suits you. You'll also notice some features like the floating quotation marks and the shadow which we'll add for some fun elements towards the end.

To pick apart the final product, let's break this code down into pieces.

Since we already know how to make circles, let's look through new Tailwind CSS classes that was added to the parent div of each text of each circle for formatting.

  • text-center: Aligns the text to its center.
  • p-5: Adds padding around the text to give room between the text and the edge of the shape.

Next, just add your text in the styled div.

<div class="min-h-screen flex items-center justify-center bg-purple-500 space-x-8">
   <div class="w-36 h-36 bg-purple-50 rounded-full flex justify-center items-center text-center p-5">
      Make it simple, but significant.
   </div>
   <div class="w-24 h-24 bg-purple-100 rounded-full flex justify-center items-center text-center p-5">
      Great work.
   </div>
   <div class="w-12 h-12 bg-purple-200 rounded-full flex justify-center items-center text-center p-5">
      Yes.
   </div>
</div>

Shadows

Shadows can give a 3D effect and make it feel as if the shape is coming off the page. Here we added shadow-xl to the shape to create this effect.

html<div class="w-36 h-36 ... shadow-xl"></div>

Floating Quotation Mark

To create the floating quotation mark, we added a span tag to mark up the specific part of the text (which in this case is the quotation mark).

In the span tag we've added the classes:

  • absolute: Allows us to control the positioning of an element.
  • text-8xl: Increases the font size.
  • left-0: Places the element to its position. This will move the quotation mark to the very left of the element.
  • top-0: Places the element to its position. This will move the quotation mark to the very top of the element.
  • text-purple-800: Changes the text color.
html<span class="absolute text-8xl transform left-0 top-0 text-purple-800">
  "
</span>

Pro Tip: When using absolutely positioned elements, the parent should always be relative.

html<div class="relative...">
  <span class="absolute..."></span>
</div>

So don't forget to add the class relative to the parent of the span.

Way to go! You've used Tailwind CSS to create text circles and added some fun shadows and a floating quotation mark too.

<div class="min-h-screen flex items-center justify-center bg-purple-500 space-x-8">
   <div class="relative w-36 h-36 bg-purple-50 rounded-full flex justify-center items-center text-center p-5 shadow-xl">
      <span class="absolute text-8xl left-0 top-0 text-purple-800">"
      </span>
      Make it simple, but significant.
   </div>
   <div class="relative w-24 h-24 bg-purple-100 rounded-full flex justify-center items-center text-center p-5 shadow-xl">
      <span class="absolute text-7xl left-0 top-0 text-purple-800">"
      </span>
      Great work.
   </div>
   <div class="relative w-12 h-12 bg-purple-200 rounded-full flex justify-center items-center text-center p-5 shadow-xl">
      <span class="absolute text-3xl left-0 top-0 text-purple-800">"
      </span>
      Yes.
   </div>
</div>

When would it be useful to have images as circles? Everywhere! Well let's not overdo it, but we can use circular images for avatars, profile pictures, bubbles floating around your page, or even just a fun way to display your images.

Take a look at these three circular images and how little changes to each one can make a difference.

<div class="min-h-screen flex items-center justify-center bg-yellow-500 space-x-8">
   <img src="https://images.unsplash.com/photo-1624669240815-815a23372f37?" alt="baby with headphones" class="w-36 h-36 rounded-full object-cover">
   <img src="https://images.unsplash.com/photo-1624669240815-815a23372f37?" alt="baby with headphones" class="w-24 h-24 rounded-full object-cover border-2">
   <img src="https://images.unsplash.com/photo-1624669240815-815a23372f37?" alt="baby with headphones" class="w-12 h-12 rounded-full object-cover opacity-50">
</div>

Adding an image with Tailwind CSS is just like adding an image (we'll grab one from Unsplash) with HTML. By using the img tag, we can copy and paste the source of any image we wish to use.

HTML   <img src="https://images.unsplash.com/photo-1624669240815-815a23372f37?" alt="baby with headphones">

Pro Tip: Always add alt tags. They are used for accessibility. It describes the image(s) to the visually impaired, those who use screen readers, or those who turn off images when browsing the web.

Height, Width, and Border Radius

Just like styling a div to create a circle, add height, width, and border radius classes to the image to create a circle with your image.

<div class="min-h-screen flex items-center justify-center bg-yellow-500 space-x-8">
   <img src="https://images.unsplash.com/photo-1624669240815-815a23372f37?" alt="baby with headphones" class="w-36 h-36 rounded-full">
   <img src="https://images.unsplash.com/photo-1624669240815-815a23372f37?" alt="baby with headphones" class="w-24 h-24 rounded-full">
   <img src="https://images.unsplash.com/photo-1624669240815-815a23372f37?" alt="baby with headphones" class="w-12 h-12 rounded-full">
</div>

The image seems to be squished to fit the circle. What we want is to manipulate the size of the image to cover the entire space without changing the image's ratio. We'll use object-cover to do this.

html<img
  src="https://images.unsplash.com/photo-1624669240815-815a23372f37?"
  alt="baby with headphones"
  class="... object-cover"
/>

Border

On the second image, all we added was a border-2 to create a border width of 2px around the image.

Opacity

And on the third image, we're using opacity-50 changes the visibility using the opacity class.

Little changes like these can really make a difference! Here's our result of our circular images.

<div class="min-h-screen flex items-center justify-center bg-yellow-500 space-x-8">
   <img src="https://images.unsplash.com/photo-1624669240815-815a23372f37?" alt="baby with headphones" class="w-36 h-36 rounded-full object-cover">
   <img src="https://images.unsplash.com/photo-1624669240815-815a23372f37?" alt="baby with headphones" class="w-24 h-24 rounded-full object-cover border-2">
   <img src="https://images.unsplash.com/photo-1624669240815-815a23372f37?" alt="baby with headphones" class="w-12 h-12 rounded-full object-cover opacity-50">
</div>

We see notifications everywhere. I see this notification being used when my profile needs attention or if there is a comment or message that I haven't opened.

Adding those little notification alerts will excite your users and is easy to make with Tailwind CSS.

Two circles to make one circular avatar with a smaller notification circle at the top right in three different sizes.

<div class="min-h-screen flex items-center justify-center bg-gray-500 space-x-8">
   <div class="relative flex justify-center items-center">
      <img src="https://images.unsplash.com/photo-1624669240815-815a23372f37?" alt="baby with headphones" class="w-36 h-36 rounded-full object-cover">
      <span class="absolute inline-flex h-10 w-10 rounded-full bg-red-500 border-4 border-gray-500 top-0 right-0" />
   </div>
   <div class="relative flex justify-center items-center">
      <img src="https://images.unsplash.com/photo-1624669240815-815a23372f37?" alt="baby with headphones" class="w-24 h-24 rounded-full object-cover">
      <span class="absolute inline-flex h-7 w-7 rounded-full bg-red-500 border-4 border-gray-500 top-0 right-0" />
   </div>
   <div class="relative flex justify-center items-center">
      <img src="https://images.unsplash.com/photo-1624669240815-815a23372f37?" alt="baby with headphones" class="w-12 h-12 rounded-full object-cover">
      <span class="absolute inline-flex h-3 w-3 rounded-full bg-red-500 border-2 border-gray-500 top-0 right-0" />
   </div>
</div>

Now that we already made our circular images, we can add a couple of classes to set it up to be notification ready.

This is what we have so far from our previous circular image task:

<div class="min-h-screen flex items-center justify-center bg-gray-500 space-x-8">
   <img src="https://images.unsplash.com/photo-1624669240815-815a23372f37?" alt="baby with headphones" class="w-36 h-36 rounded-full object-cover">
   <img src="https://images.unsplash.com/photo-1624669240815-815a23372f37?" alt="baby with headphones" class="w-24 h-24 rounded-full object-cover">
   <img src="https://images.unsplash.com/photo-1624669240815-815a23372f37?" alt="baby with headphones" class="w-12 h-12 rounded-full object-cover">
</div>

Besides the background color changing and the removal of the opacity and border of two of the images, we're good to begin!

Wrapping our Avatar and Circular Notification in a div

First, let's put our image and our notification circle in one div. We're going to set the parent div to relative since our notification span will be set to absolute.

HTML<div class="">
    <img src="https://images.unsplash.com/photo-1624669240815-815a23372f37?" alt="baby with headphones" class="w-36 h-36 rounded-full object-cover">

    <!-- notification circle -->

</div>

Creating the Notification Circle and moving it

Create the circular notification by adding the following classes to the span tag:

  • absolute: Allows us to control the positioning of an element.
  • h-10: Sets the height of 2.5rem.
  • w-10: Sets the width of 2.5rem.
  • rounded-full: Completely rounds out the border radius.
  • bg-red-500: Changes the background color.
  • border-4: Increases the border width to 4px.
  • border-gray-500: Changes the border color.
  • right-0: Places the element to its position. This will move the notification to the very right of the element.
  • top-0: Places the element to its position. This will move the notification to the very top of the element.
<div class="min-h-screen flex items-center justify-center bg-gray-500 space-x-8">
   <div class="relative">
      <img src="https://images.unsplash.com/photo-1624669240815-815a23372f37?" alt="baby with headphones" class="w-36 h-36 rounded-full object-cover">
      <span class="absolute h-10 w-10 rounded-full bg-red-500 border-4 border-gray-500 top-0 right-0" />
   </div>
   <div class="relative">
      <img src="https://images.unsplash.com/photo-1624669240815-815a23372f37?" alt="baby with headphones" class="w-24 h-24 rounded-full object-cover">
      <span class="absolute h-7 w-7 rounded-full bg-red-500 border-4 border-gray-500 top-0 right-0" />
   </div>
   <div class="relative">
      <img src="https://images.unsplash.com/photo-1624669240815-815a23372f37?" alt="baby with headphones" class="w-12 h-12 rounded-full object-cover">
      <span class="absolute h-3 w-3 rounded-full bg-red-500 border-2 border-gray-500 top-0 right-0" />
   </div>
</div>

There it is! The notification on the top right of your avatar. Tailwind CSS allows you to animate easily too. You can make your notification pulse, ping, bounce. The possibilites are endless.

Circles are so much fun to work it. It can make all the difference in your user interface (UI) when adding fun shapes that your users' eyes are attracted to.

In this article, we were able use Tailwind CSS and walk through making a basic circle, multiple circles, cicles with text in them, circular images, and avatars with circular notifications. Try out one or all of these circles in your next project.

Want to learn more about Tailwind CSS? Check out Better Dev's Getting Started with Tailwind course.

Lynne Buencamino

Lynne Buencamino

Lynne Buencamino is an UI/UX Designer. Solves problems to create purposeful designs. Enjoys finding that perfect mesh between business goals and user experience.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)