JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div class="foo"></div>

SCSS

.foo {
    background : red;
    display : inline-block;  
   
    border-radius : 50%;
    padding : 30px;
    overflow : hidden;
    box-shadow : 0 0 0 2px green;
    
    &:before {
        
        content : "";
            position :relative;
           
            width : 40px;
            height : 40px;
        display : inline-block;
         background : blue;
           box-shadow: 50px 50px 0 12px black,
               -90px 90px 0 12px black;
            
    }
        
        &:after {
            z-index : -1;
            content : "";
            display : inline-block;
            background : yellow;
            width : 150px;
            height : 150px;
            position : absolute;
            left : 0;
            border : solid 1px black;
            top : 0;
            
            
        }
   
}