JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div class="circle"></div>
<div class="circle" style="margin-left:240px;"></div>


<div class="roof"></div>

<div class="windscreen"><div class="mirror"></div><div class="mirrorL"></div></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

body{
    padding-left:100px;
}
.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 {
    position:relative;
  width: 260px;
  height: 75px;
  background: rgb(41, 137, 216);
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(10%, rgba(41, 137, 216, 1)), color-stop(22%, rgba(170, 170, 170, 1)), color-stop(35%, rgba(41, 137, 216, 1)), color-stop(50%, rgba(170, 170, 170, 1)), color-stop(65%, rgba(41, 137, 216, 1)), color-stop(78%, rgba(170, 170, 170, 1)), color-stop(90%, rgba(41, 137, 216, 1)), color-stop(100%, rgba(41, 137, 216, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170,...