JSFiddle - React, Tailwind, and code Playground

by shanejones

HTML

<div class="flip-flop-wrap top">
  <div class="pin"></div>
  <div class="inner"></div>
</div>
<div class="flip-flop-wrap right">
  <div class="pin"></div>
  <div class="inner"></div>
</div>
<div class="flip-flop-wrap bottom">
  <div class="pin"></div>
  <div class="inner"></div>
</div>
<div class="flip-flop-wrap left">
  <div class="pin"></div>
  <div class="inner"></div>
</div>

SCSS

.flip-flop-wrap {
  
    margin: 30px;
  
    .pin {
      background: grey;
      height: 100px;
      width: 100px;
      border-top-right-radius: 50%;
      border-top-left-radius: 50%;
      border-bottom-right-radius: 50%;
      border-bottom-left-radius: 13px;
      border: 4px solid;   
    }
    
    &.top {
       .pin {
         transform: rotate(135deg);
       }
    }
    
    &.right {
       .pin {
         transform: rotate(225deg);
       }
    }
    
    &.bottom {
       .pin {
         transform: rotate(315deg);
       }
    }
    
    &.left {
       .pin {
         transform: rotate(45deg);
       }
    }

}