JSFiddle - React, Tailwind, and code Playground
by harsh dand
HTML
<div class="circle"></div>
<div class="circle" style="margin-left:240px;"></div>
<div class="roof"></div>
<div class="windscreen"></div>
<div class="roof roof-bonnet"></div>
<div class="circle circle-headlight"></div>
<div class="circle circle-headlight right-headlight"></div>
<div id="numberplate">REG PLATE</div>
CSS
.circle {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: yellow;
position: absolute;
z-index: 20;
border: 1px solid #AAAAAA;
box-shadow: 0 0 8px 2px yellow;
}
.roof {
width: 280px;
height: 80px;
background-color: gray;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
left: 0;
z-index: -2;
position: relative;
}
.windscreen {
width: 250px;
height: 75px;
left:5px;
background: -moz-linear-gradient(-45deg, #e0f3fa 0%, #e8eef2 10%, #f2f6f9 18%, #f2f6f9 33%, #eaf4f9 50%, #f2f6f9 68%, #f2f6f9 71%, #f2f6f9 83%, #f2f6f9 90%, #e3edf4 97%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e0f3fa), color-stop(10%,#e8eef2), color-stop(18%,#f2f6f9), color-stop(33%,#f2f6f9), color-stop(50%,#eaf4f9), color-stop(68%,#f2f6f9), color-stop(71%,#f2f6f9), color-stop(83%,#f2f6f9), color-stop(90%,#f2f6f9), color-stop(97%,#e3edf4));
background: -webkit-linear-gradient(-45deg, #e0f3fa 0%,#e8eef2 10%,#f2f6f9 18%,#f2f6f9 33%,#eaf4f9 50%,#f2f6f9 68%,#f2f6f9 71%,#f2f6f9 83%,#f2f6f9 90%,#e3edf4 97%);
background: -o-linear-gradient(-45deg, #e0f3fa 0%,#e8eef2 10%,#f2f6f9 18%,#f2f6f9 33%,#eaf4f9 50%,#f2f6f9 68%,#f2f6f9 71%,#f2f6f9 83%,#f2f6f9 90%,#e3edf4 97%);
background: -ms-linear-gradient(-45deg, #e0f3fa 0%,#e8eef2 10%,#f2f6f9 18%,#f2f6f9 33%,#eaf4f9 50%,#f2f6f9 68%,#f2f6f9 71%,#f2f6f9 83%,#f2f6f9 90%,#e3edf4 97%);
background: linear-gradient(135deg, #e0f3fa 0%,#e8eef2 10%,#f2f6f9 18%,#f2f6f9 33%,#eaf4f9 50%,#f2f6f9 68%,#f2f6f9 71%,#f2f6f9 83%,#f2f6f9 90%,#e3edf4 97%);
background: rgb(226,226,226); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background:...