JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<div class="ai-resize">
        <div class="outer_circle"> AI
            <div class="inner_circle"></div> 
        </div> 
      </div>

CSS

body{ 
     margin: 0;
     }
     
     
     .ai-resize{
       transform: scale(0.2);
       transform-origin: 0 0;
       float: left;
       color: #EBA33D;
     }
     
     .outer_circle { 
            position: relative; 
            margin: 25px; 
            width: 100px; 
            height: 100px; 
            border-radius: 50%; 
            background: #ffffff; 
    font-size: 70px;
    font-family: Arial;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
        } 
          
        .inner_circle { 
            background-image: linear-gradient( 
                     to bottom, rgb(136, 95, 250) 0%, 
                     rgb(95, 225, 196) 100%); 
            content: ''; 
            position: absolute; 
            top: -20px; 
            bottom: -20px; 
            right: -20px; 
            left: -20px; 
            z-index: -1; 
            border-radius: inherit; 
        }