JSFiddle - React, Tailwind, and code Playground

by Chris Buttery

HTML

<div class="tomato"></div>

CSS

.tomato {
  width: 200px;
  height: 200px;
  background-color: #ff7942;
  border-radius: 50%;
  border: 30px solid #ff4700;
  transform: rotate(15deg);
  background-image: linear-gradient(to right,transparent 42%,#ff7942 42%,#ff7942 58%,transparent 58%), radial-gradient(#ff7942 35px,transparent 36px), radial-gradient(#a20000 80px,transparent 81px)
}

.tomato:after {
  content: "";
  display: block;
    content: '';
    position: absolute;
      width: 200px;
    height: 200px;
    background-repeat: no-repeat;
  background-image: radial-gradient(#ffb292 50%,transparent 50%),radial-gradient(#ffb292 50%,transparent 50%),radial-gradient(#ffb292 50%,transparent 50%),radial-gradient(#ffb292 50%,transparent 50%),radial-gradient(#ffb292 50%,transparent 50%),radial-gradient(#ffb292 50%,transparent 50%),radial-gradient(#ffb292 50%,transparent 50%), radial-gradient(#ffb292 50%,transparent 50%);
    background-size: 20px 20px;
    background-position: 
      50px 45px,
      30px 75px,
      30px 110px,
      50px 140px,
      130px 45px,
      150px 75px,
      150px 110px,
      130px 140px;
      
}