<div id="app" class="h-screen flex justify-center items-center">
  <div class="container bg-white rounded-lg py-4 px-4 containerSoft">
    <div class="flex mb-8">
      <div class="w-1/3">
        <button class="rounded ">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 512 512"
            class="w-8 h-8"
            fill="#282b33"
          >
            <path
              d="M492 236H20c-11.046 0-20 8.954-20 20s8.954 20 20 20h472c11.046 0 20-8.954 20-20s-8.954-20-20-20zM492 76H20C8.954 76 0 84.954 0 96s8.954 20 20 20h472c11.046 0 20-8.954 20-20s-8.954-20-20-20zM492 396H20c-11.046 0-20 8.954-20 20s8.954 20 20 20h472c11.046 0 20-8.954 20-20s-8.954-20-20-20z"
            />
          </svg>
        </button>
      </div>
      <div class="w-1/3">
        <h1 class="text-center text-header text-lg uppercase">
          Music Player
        </h1>
      </div>
      <div class="w-1/3"></div>
    </div>
    <div class="flex justify-center mb-8">
      <div class="">
        <img
          src="https://i.imgur.com/YtTrHrb.jpg"
          alt="cover"
          class="rounded-full w-64 h-64 imgSoft"
        />
      </div>
    </div>
    <h1 class="text-center text-header text-xl font-bold">Ignite</h1>
    <h2 class="text-center eq-empty text-lg mb-4">Alan Walker</h2>
    <div class="px-16 mb-12">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 500 100"
        width="100%"
        height="100%"
      >
        <g transform="translate(10,50)">
          <line
            v-for="(yabs,index) in bars"
            :x1="index*10"
            :y1="-yabs"
            :x2="index*10"
            :y2="yabs"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-width="6"
            :class="[index > 15 && index < 35 ? 'eq-filled' : 'eq-empty']"
          />
        </g>
      </svg>
    </div>
    <div id="buttons" class="flex justify-center items-center">
      <button
        class="flex justify-center items-center  w-8 h-8 rounded-full soft"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512.016 512.016"
          class="w-4 h-4"
          fill="#282b33"
          stroke="none"
        >
          <path
            d="M507.336 100.696l-96-96C406.76.12 399.88-1.256 393.896 1.24c-5.984 2.496-9.888 8.288-9.888 14.752v48h-208c-97.216 0-176 78.784-176 176 0 8.832 7.168 16 16 16h64c8.832 0 16-7.168 16-16 0-44.192 35.808-80 80-80h208v48c0 6.464 3.904 12.32 9.888 14.784 5.984 2.496 12.864 1.12 17.44-3.456l96-96c6.24-6.24 6.24-16.384 0-22.624zM496.008 255.992h-64c-8.832 0-16 7.168-16 16 0 44.192-35.808 80-80 80h-208v-48c0-6.464-3.904-12.32-9.888-14.784s-12.832-1.088-17.44 3.488l-96 96c-6.24 6.24-6.24 16.384 0 22.624l96 96c4.576 4.576 11.456 5.952 17.44 3.456s9.888-8.32 9.888-14.784v-48h208c97.216 0 176-78.784 176-176 0-8.832-7.168-16-16-16z"
          />
        </svg>
      </button>
      <button
        class="flex justify-center items-center w-12 h-12 ml-6 rounded soft"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 45.771 45.772"
          class="w-6 h-6"
          fill="#131419"
          stroke="none"
        >
          <path
            d="M18.982 4.75c-1.217-.502-2.504-.222-3.433.711L1.245 19.892c-1.678 1.686-1.65 4.411.028 6.098l14.374 14.433c.929.932 2.113 1.213 3.33.71 1.215-.502 1.795-1.688 1.795-3.003V7.753c-.001-1.315-.572-2.503-1.79-3.003zM43.876 4.64c-1.216-.502-2.558-.222-3.486.711L26.058 19.783c-1.677 1.686-1.663 4.41.015 6.098L40.44 40.312c.93.932 2.217 1.213 3.435.711 1.215-.503 1.897-1.688 1.897-3.004V7.644c-.001-1.317-.679-2.502-1.896-3.004z"
          />
        </svg>
      </button>

      <button
        class="flex justify-center items-center  w-20 h-20 ml-6 rounded-full soft"
        @click="onPlayingChange"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 173.861 173.861"
          width="100%"
          height="100%"
          class="icons w-8 h-8"
        >
          <defs>
            <filter
              id="inset-shadow"
              x="-50%"
              y="-50%"
              width="200%"
              height="200%"
            >
              <feComponentTransfer in="SourceAlpha">
                <feFuncA type="table" tableValues="1 0" />
              </feComponentTransfer>
              <feGaussianBlur stdDeviation="12" />
              <feOffset dx="20" dy="20" result="offsetblur" />
              <feFlood flood-color="rgb(0, 0, 0)" result="color" />
              <feComposite in2="offsetblur" operator="in" />
              <feComposite in2="SourceAlpha" operator="in" />
              <feMerge>
                <feMergeNode in="SourceGraphic" />
                <feMergeNode />
              </feMerge>
            </filter>
          </defs>
          <g transform="translate(5,5)">
            <path
              d="M34.857 3.613C20.084-4.861 8.107 2.081 8.107 19.106v125.637c0 17.042 11.977 23.975 26.75 15.509L144.67 97.275c14.778-8.477 14.778-22.211 0-30.686L34.857 3.613z"
              :filter="'url(#inset-shadow)'"
              :fill="isPlaying ?  '#c3c3c3' : '#17191e'"
            />
          </g>
        </svg>
      </button>
      <button
        class="flex justify-center items-center  w-12 h-12 ml-6 rounded soft"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 57 57"
          class="w-6 h-6"
          fill="#131419"
          stroke="none"
        >
          <path
            d="M56.575 27.683l-27-19c-.306-.216-.703-.242-1.036-.07A.9988.9988 0 0028 9.5v17.777L1.575 8.694a1.0033 1.0033 0 00-1.036-.069C.208 8.797 0 9.14 0 9.513v37.975c0 .373.208.716.539.888.146.074.304.111.461.111.202 0 .403-.062.575-.182L28 29.723V47.5c0 .373.208.716.539.888.146.075.304.112.461.112.202 0 .404-.062.575-.183l27-19c.267-.186.425-.492.425-.817s-.158-.631-.425-.817z"
          />
        </svg>
      </button>

      <button
        class="flex justify-center items-center  w-8 h-8 ml-6 rounded-full soft"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 375.633 375.633"
          class="w-4 h-4"
          fill="#282b33"
          stroke="none"
        >
          <path
            d="M375.627 279.726l-78.877 67.608v-45.079h-13.277c-41.919 0-72.786-18.781-98.268-43.648 9.828-11.569 18.738-23.214 27.027-34.108 1.904-2.513 3.796-4.993 5.684-7.473 18.852 19.494 39.129 32.645 65.562 32.645h13.277v-37.568l78.872 67.623zM0 129.466h39.308c24.927 0 44.377 11.716 62.321 29.371 2.953-3.791 5.939-7.74 8.953-11.683 7.337-9.66 15.093-19.831 23.497-29.975-24.813-23.187-54.75-40.309-94.77-40.309H0v52.596zM296.75 28.299v44.818h-13.277c-69.375 0-108.488 51.421-143.004 96.804-31.046 40.749-57.85 75.989-101.161 75.989H0v52.59h39.308c69.386 0 108.498-51.394 143.015-96.766 31.035-40.798 57.844-76.033 101.15-76.033h13.277v37.84l78.883-67.629-78.883-67.613z"
          />
        </svg>
      </button>
    </div>
  </div>
</div>
/* 
Credits : 
Music Player Neumorphism Style by Sazzad Sazib 
https://dribbble.com/shots/9153970-Music-Player-Neumorphism-Style

Filter combination for inset-shadow 
https://codepen.io/venend/pen/KqKMOM
*/

@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");

body {
  font-family: "Open Sans", sans-serif;
  background-color: #131419;
}

.soft {
  box-shadow: -3px -3px 3px 0 rgba(255, 255, 255, 0.04),
    5px 5px 5px 0 rgba(0, 0, 0, 2);
}
.containerSoft {
  box-shadow: -6px -6px 16px 0 rgba(255, 255, 255, 0.1),
    6px 6px 16px 0 rgba(0, 0, 0, 2);
}
.imgSoft {
  box-shadow: -6px -6px 16px 0 rgba(255, 255, 255, 0.08),
    8px 8px 8px 0 rgba(0, 0, 0, 0.3);
}

.container {
  width: 480px;
  height: 750px;
  background-color: #17191e;
}

.eq-empty {
  color: #282b33;
}

.eq-filled {
  color: #c3c3c3;
}

.text-header {
  color: #505050;
}

.soft:active {
  box-shadow: -1px -1px 1px 0 rgba(255, 255, 255, 0.04),
    1px 1px 1px 0 rgba(0, 0, 0, 2);
}
.soft:focus {
  outline: none;
}
const app = new Vue({
  el: "#app",
  data: {
    bars: Array(49)
      .fill(0)
      .map(() => 5 + Math.random() * 20),
    isPlaying: false,
    currentTick: 0,
    counter: null
  },
  methods: {
    update: function() {
      this.bars.shift();
      this.bars.push(5 + Math.random() * 20);
    },
    onPlayingChange: function() {
      if (this.isPlaying) {
        this.isPlaying = false;
        clearInterval(this.counter);
      } else {
        this.isPlaying = true;
        this.counter = setInterval(() => {
          this.update();
        }, 150);
      }
    }
  },
  created: function() {
    this.onPlayingChange();
  }
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js