<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<div class="softBar">
  <div id="smile" class="yellow softButton" onclick="selectItem('smile')">
    <i class=" fas fa-smile-wink"></i>
  </div>
  <div id="list" class="green softButton" onclick="selectItem('list')">
    <i class="fas fa-list-ul " data-fa-mask="fas fa-circle"></i> 
  </div>
  <div id="share" class="red softButton" onclick="selectItem('share')">
    <i class="fas fa-share-alt"></i>
  </div>
  <div id="user" class="pink softButton" onclick="selectItem('user')">
    <i class="fas fa-user"></i>
  </div>
  <div id="cog" class="turquoise softButton" onclick="selectItem('cog')">
    <i class="fas fa-cog"></i>
  </div>
</div>
<div class="contentBox">
  <h1 id="output">#Emoji</h1>
  <div class="demoCard">
    <div style="position: relative; ">
      License:&nbsp;
      <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0</a>
    </div>
  </div>
  <div class="demoCard">
    <div style="position: relative; ">Blog:&nbsp;
      <a href="https://epische.website" target="_blank">epische.website</a>
    </div>
  </div>
  <div class="demoCard">
    <div style="position: relative; ">
      Twitter:&nbsp;
      <a href="https://twitter.com/MenschOmaten" target="_blank">@MenschOmaten</a>
    </div>
  </div>
</div>

@import url("https://fonts.googleapis.com/css?family=Baloo+2&subset=latin-ext");
* {
  font-family: "Baloo 2", cursive;
}
:root {
  --yellow: linear-gradient(151deg, rgba(242,209,7,1) 0%, rgba(255,138,138,1) 100%);
  --green: linear-gradient(139deg, rgba(0,188,212,1) 0%, rgba(139,195,74,1) 100%);
  --red: linear-gradient(120deg, rgba(255,152,0,1)  0%, rgba(233,30,99,1) 100%);
  --pink: linear-gradient(147deg, rgba(104,190,252,1) 0%, rgba(229,55,252,1) 100%);
  --turquoise: linear-gradient(307deg, rgba(0,191,242,1) 0%, rgba(135,241,146,1) 100%);
}
html,
body {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  background-color: #f2f5f7;
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content: center;
}
.softBar{
  border-radius: 1rem;
  margin-bottom: 1rem;
  background: transparent;
  display: flex;
  padding: 0.25rem;
  justify-content: space-around;
  align-items: center;
  min-height: 4rem;
  min-width: 20rem;
  max-width: 20rem;
  box-shadow: inset 6px 6px 10px #d1d9e6, inset -6px -6px 10px #fff;
}
.softButton{
  cursor: pointer;
  min-width: 2.6rem;
  min-height: 2.55rem;
  max-width: 2.6rem;
  width: 2.6rem;
  max-height: 2.55rem;
  background-color: transparent;
  border-radius: 0.7rem;
  display: flex;
  border:none;
  margin:0;
  align-items: center;
  justify-content: center;
  box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #fff;
}
.fas{
  font-size: 1.5rem;
}
.green > .fas{
  background: var(--green);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color:transparent;
}

.yellow > .fas{
  background: var(--yellow);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color:transparent;

}

.red > .fas{
  background: var(--red);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color:transparent;

}

.pink > .fas{
  background: var(--pink);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color:transparent;
}

.turquoise > .fas{
  background: var(--turquoise);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color:transparent;
}

.yellow.selected{
  background:var(--yellow);
}
.green.selected{
  background:var(--green);
}
.pink.selected{
  background:var(--pink);
}
.red.selected{
  background:var(--red);
}
.turquoise.selected{
  background:var(--turquoise);
}
.selected{
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.25),
    inset -2px -2px 5px rgba(255, 255, 255, 0.25);
}
.selected > .fas{
  color:#f2f5f7
}

.contentBox{
  border-radius: 1rem;
  margin-bottom: 1rem;
  background: transparent;
  display: flex;
  flex-direction:column;
  padding: 1.5rem;
  min-height: 30rem;
  min-width: 17.5rem;
  max-width: 17.5rem;
  margin:0 1rem 0 1rem;
  box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #fff,
    inset 6px 6px 10px #d1d9e6, inset -6px -6px 10px #fff;
}
.demoCard {
  border-radius: 10px;
  margin: 0 0 1.5rem 0;
  padding: 0.7rem;
  position: relative;
  border: 2px solid transparent;
  box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #fff,
    inset 6px 6px 10px #d1d9e6, inset -6px -6px 10px #fff;
  color:rgba(0, 0, 0, 0.7);
}
a{
  color:rgba(0, 0, 0, 0.7);
}
.demoCard::before{
  content: "";
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(233, 30, 99);
  background: linear-gradient(
    90deg,
    rgba(255, 152, 0, 1) 0%,
    rgba(233, 30, 99, 1) 100%
  );
  filter: opacity(25%);
}
h1{
  margin-left: 1rem;
  margin-top: 0.5rem;
  opacity: 0.5;
}

var selected = "smile"
selectItem(selected)
function selectItem(e){
  document.getElementById(selected).classList.remove('selected');
  selected = e;
  document.getElementById("output").innerHTML='#'+e
  document.getElementById(selected).classList.add('selected');
}