JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <figure class="smile">
        <div class="eye"></div>
        <div class="eye"></div>
    </figure>
</div>

CSS

.wrap {
      width: 320px;
      height: 320px;
      overflow: hidden;
  }
  .smile {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      box-shadow: inset -10px -30px rgba(0, 0, 0, 0.05);
      background: #c5e2bd;
      animation: bobble 5s ease-in-out infinite;
      text-align: center;
      margin: auto;
  }
  .eye {
      display: inline-block;
      position: relative;
      top: 30px;
      width: 20px;
      height: 30px;
      margin: 0 5px 5px;
      background: rgba(0, 0, 0, .9);
      border-radius: 10px;
      border-radius: 50%;
  }
  @-webkit-keyframes bobble {
      33% {
          transform: rotate(10deg);
      }
      66% {
          transform: rotate(-10deg);
      }
  }
  keyframes bobble {
      33% {
          transform: rotate(10deg);
      }
      66% {
          transform: rotate(-10deg);
      }
  }