JSFiddle - React, Tailwind, and code Playground

by Ganga Ponnu

HTML

<div id="oval_parent">
<div id="oval"></div>

<img class="players" style="left:-12px; top:125px;" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/ultra-glossy-silver-buttons-icons-symbols-shapes/021313-ultra-glossy-silver-button-icon-symbols-shapes-shapes-circle-clear.png" alt="Smiley face">
    
<img class="players" style="left:504px; top:125px;" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/ultra-glossy-silver-buttons-icons-symbols-shapes/021313-ultra-glossy-silver-button-icon-symbols-shapes-shapes-circle-clear.png" alt="Smiley face">
    
<img class="players" style="left:415px; top:0px;" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/ultra-glossy-silver-buttons-icons-symbols-shapes/021313-ultra-glossy-silver-button-icon-symbols-shapes-shapes-circle-clear.png" alt="Smiley face">
    
<img class="players" style="left:75px; top:252px;" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/ultra-glossy-silver-buttons-icons-symbols-shapes/021313-ultra-glossy-silver-button-icon-symbols-shapes-shapes-circle-clear.png" alt="Smiley face">
    
<img class="players" style="left:415px; top:252px;" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/ultra-glossy-silver-buttons-icons-symbols-shapes/021313-ultra-glossy-silver-button-icon-symbols-shapes-shapes-circle-clear.png" alt="Smiley face">
    
<img class="players" style="left:75px; top:0px;" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/ultra-glossy-silver-buttons-icons-symbols-shapes/021313-ultra-glossy-silver-button-icon-symbols-shapes-shapes-circle-clear.png" alt="Smiley face">
    
<img class="players" style="left:245px; top:-10px;" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/ultra-glossy-silver-buttons-icons-symbols-shapes/021313-ultra-glossy-silver-button-icon-symbols-shapes-shapes-circle-clear.png" alt="Smiley face">
  ...

CSS

#oval_parent{
position:absolute;
left:6px; top:50px;
background:blue;
width:575px;
height:330px;
overflow:hidden;
}

#oval {
position:relative;
background:#194D1E;
background: -moz-radial-gradient(center, ellipse cover, #008000 0%, #000000 100%); /* ff3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #008000), color-stop(100%, #000000)); /* safari4+,chrome */
background: -webkit-radial-gradient(center, ellipse cover, #008000 0%, #000000 100%); /* safari5.1+,chrome10+ */
background: -o-radial-gradient(center, ellipse cover, #008000 0%, #000000 100%); /* opera 11.10+ */
background: -ms-radial-gradient(center, ellipse cover, #008000 0%, #000000 100%); /* ie10+ */
background: radial-gradient(ellipse at center, #008000 0%, #000000 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008000', endColorstr='#000000',GradientType=1 ); /* ie6-9...