JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<script src="https://terre-noire.info/essais/stargate_keybord.jpg"></script>
<div class="keyboard">
     <ul class="keys">
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
         <li>6</li>
         <li>7</li>
         <li>8</li>
         <li>9</li>
         <li>0</li>
         <li>A</li>
         <li>Z</li>
         <li>E</li>
         <li>R</li>
         <li>T</li>
         <li>Y</li>
         <li>U</li>
         <li>I</li>
         <li>O</li>
         <li>P</li>
         <li>Q</li>
         <li>S</li>
         <li>D</li>
         <li>F</li>
         <li>G</li>
         <li>H</li>
         <li>J</li>
         <li>K</li>
         <li>L</li>
         <li>M</li>
         <li>W</li>
         <li>X</li>
         <li>C</li>
         <li>V</li>
         <li>B</li>
         <li>N</li>
         <li class="del">DEL</li>
         <li>OPENING GATE</li>
     </ul>
</div>

CSS

body {background:#000}

.keyboard {
    background:url('https://terre-noire.info/essais/stargate_keybord.jpg') no-repeat;
    width:700px;
    height:315px;
    padding:85px 50px 0 50px;
    transform-style: preserve-3d;
    transform: perspective(8cm);
}

ul.keys {
    margin-top:0 auto;
    overflow:hidden;
    width:657px;
    height:215px;
    margin-left:12px;
    list-style:none;
    background-color:transparent;
    transform: rotateY(0deg) rotateX(5deg) translate3d(0, 0, 15px);
    display:inline-flex;
    flex-wrap:wrap;
    padding-top:10px;
    padding-left:5px;
}

ul.keys li {
    width:9%;
    margin-right:2px;
    height:35px;
    text-align:center;
    color:#4ec4fb;
    text-shadow:0 0 8px rgba(3,137,200, .5);
    font-family:Arial, sans-serif;
    border:#4ec4fb 2px solid;
    line-height:35px;
    background:transparent;
    transition:ease all .3s;
}

ul.keys li.del {
    background:rgba(255,132,0,.3);
}

ul.keys li.del:hover {
    background:rgba(255,132,0,1);
}
ul.keys li:last-child {
    width:29%;
    text-align:center;
    background:rgba(3,200,22,.5);
}

ul.keys li:last-child:hover {
   background:rgba(3,200,22,1);
}

ul.keys li:hover {
    color:#fff;
    border:#fff 2px solid;
    cursor:pointer;
    background:rgba(250,250,250,.3);
}