JSFiddle - React, Tailwind, and code Playground

by JP Obley

HTML

<div class="dashboard">
  <div class="icon">
    <svg version="1.1" id="car" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100.4 97.5" style="enable-background:new 0 0 100.4 97.5;" xml:space="preserve">
    <g id="body">
	<path d="M57.1,97.5H42c-12.6,0-22.8-10.2-22.8-22.8V26.5C19.2,11.9,31.1,0,45.7,0h7.6c14.6,0,26.5,11.9,26.5,26.5v48.1
		C79.9,87.3,69.7,97.5,57.1,97.5z M45.7,5.2c-11.7,0-21.3,9.6-21.3,21.3v48.1c0,9.7,7.9,17.6,17.6,17.6h15.1
		c9.7,0,17.6-7.9,17.6-17.6V26.5c0-11.7-9.6-21.3-21.3-21.3C53.3,5.2,45.7,5.2,45.7,5.2z"/>
	<g>
		<path d="M62.8,40.6c-5.1-1.9-21.4-1.9-26.5,0c-0.9,0.3-1.9-0.1-2.1-1l-2.9-12.9c12.5-4.5,24.8-4.8,36.6,0L65,39.5
			C64.7,40.3,63.8,40.8,62.8,40.6z"/>
		<path d="M36.3,62.6c5.1,1.9,21.4,1.9,26.5,0c0.9-0.3,1.9,0.1,2.1,1l2.9,12.9c-12.5,4.5-24.8,4.8-36.6,0l2.9-12.9
			C34.5,62.8,35.4,62.2,36.3,62.6z"/>
	</g>
	<path d="M21.6,22.1h-2.4c-1.3,0-2.4,1-2.4,2.4v16.6c0,1.3,1,2.4,2.4,2.4h2.4c1.3,0,2.4-1,2.4-2.4V24.6C24,23.3,22.9,22.1,21.6,22.1
		z"/>
	<path d="M21.6,59.2h-2.4c-1.3,0-2.4,1-2.4,2.4v16.6c0,1.3,1,2.4,2.4,2.4h2.4c1.3,0,2.4-1,2.4-2.4V61.5C24,60.3,22.9,59.2,21.6,59.2
		z"/>
	<g>
		<path d="M28.4,30.6v39.5c0,0.2,0.3,0.3,0.5,0.1l4.1-10.8v-0.1V43.7v-0.1l-4.1-13.1C28.8,30.1,28.4,30.2,28.4,30.6z"/>
		<path d="M70.7,30.6v39.5c0,0.2-0.3,0.3-0.5,0.1l-3.9-10.9v-0.1V43.7v-0.1l4.1-13.1C70.4,30.1,70.7,30.2,70.7,30.6z"/>
	</g>
	<path d="M78.4,22.1h2.4c1.3,0,2.4,1,2.4,2.4v16.6c0,1.3-1,2.4-2.4,2.4h-2.4c-1.3,0-2.4-1-2.4-2.4V24.6
		C76.1,23.3,77.1,22.1,78.4,22.1z"/>
	<path d="M78.4,59.2h2.4c1.3,0,2.4,1,2.4,2.4v16.6c0,1.3-1,2.4-2.4,2.4h-2.4c-1.3,0-2.4-1-2.4-2.4V61.5
		C76.1,60.3,77.1,59.2,78.4,59.2z"/>
    </g>
    <g id="doors">
      <path id="rearleft" d="M23.9,57L3.6,72.1c-0.8,0.8-2.2,0.8-3,0l0,0c-0.8-0.8-0.8-2.2,0-3L20.9,54L23.9,57z"/>
      <path id="rearright" d="M76.5,57l20.3,15.1c0.8,0.8,2.2,0.8,3,0l0,0c0.8-0.8,0.8-2.2,0-3L79.5,54L76.5,57z"/>
      <path id="frontleft"...

SCSS

.icon {
  #car {
    width: 300px;
    #doors {
      >path {
        display: none;
      }
      &.frontright {
        #frontright {
          display: block;
        }
      }
      &.frontleft {
        #frontleft {
          display: block;
        }
      }
      &.rearright {
        #rearright {
          display: block;
        }
      }
      &.rearleft {
        #rearleft {
          display: block;
        }
      }
    }
  }
}

.dashboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  .buttons {
    margin-top: 20px;
    button {
      cursor: pointer;
      border: none;
      outline: none;
      padding: 8px 16px;
      margin: 0px 8px;
      font-size: 16px;
      &:active {
        background: #eeeeee;
      }
    }
  }
}

body {
  background: dodgerblue;
  padding: 20px;
}

JavaScript

var car = document.getElementById('car');
var doors = document.getElementById('doors');
var buttons = document.querySelectorAll('button');

function updateDoors() {
  doors.classList.toggle(this.dataset.position);
}

buttons.forEach(function(button) {
  button.onclick = updateDoors;
});