JSFiddle - React, Tailwind, and code Playground

by learningforever

HTML

<span class="circle-number">1</span>

CSS

.circle-number {
    display: inline-block;
    width: 2.5em;  /* Increased width for better visibility */
    height: 2.5em;  /* Increased height for better visibility */
    line-height: 2.5em;  /* Adjusted to match the new height */
    border-radius: 50%;
    background-color: #1E90FF;  /* Changed to a more vibrant color */
    color: #fff;
    text-align: center;
    font-size: 1em;  /* Adjusted font size for better readability */
    font-weight: 700;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* Added shadow for a 3D effect */
    margin: 0 0.5em;  /* Added margin for spacing between circles */
    transition: background-color 0.3s ease;  /* Added transition for smooth color change on hover */
}

.circle-number:hover {
    background-color: #45a049;  /* Darker green on hover */
}