<head>
  <script src="https://unpkg.com/feather-icons"></script>
</head>
<body>
  <div class="keyboard">
    <div class="row">
      <div class="key key__esc">
        <i data-feather="x"></i>
      </div>
      <div class="key key__symbols">
        ! <span> 1
      </div>
      <div class="key key__symbols">
        @ <span> 2
      </div>
      <div class="key key__symbols">
        # <span> 3
      </div>
      <div class="key key__symbols">
        $ <span> 4
      </div>
      <div class="key key__symbols">
        % <span> 5
      </div>
      <div class="key key__symbols">
        ^ <span> 6
      </div>
      <div class="key key__symbols">
        & <span> 7
      </div>
      <div class="key key__symbols">
        * <span> 8
      </div>
      <div class="key key__symbols">
        ( <span> 9
      </div>
      <div class="key key__symbols">
        ) <span> 0
      </div>
      <div class="key key__symbols">
        _ <span> -
      </div>
      <div class="key key__symbols">
        + <span> =
      </div>
      <div class="key key__delete key__icon">
        <i data-feather="delete"></i>
      </div>
    </div>
        
    <div class="row">
      <div class="key key__oneandhalf">
        <i data-feather="log-in"></i>
      </div>
      <div class="key">
        Q
      </div>
      <div class="key">
        W
      </div>
      <div class="key">
        E
      </div>
      <div class="key">
        R
      </div>
      <div class="key">
        T
      </div>
      <div class="key">
        Y
      </div>
      <div class="key">
        U
      </div>
      <div class="key">
        I
      </div>
      <div class="key">
        O
      </div>
      <div class="key">
        P
      </div>
      <div class="key key__symbols">
        { <span> [
      </div>
      <div class="key key__symbols">
        } <span> ]
      </div>
      <div class="key key__symbols key__oneandhalf">
        | <span> \
      </div>
    </div>
        
    <div class="row">
      <div class="key key__caps">
        <i data-feather="meh"></i>
      </div>
      <div class="key">
        A
      </div>
      <div class="key">
        S
      </div>
      <div class="key">
        D
      </div>
      <div class="key">
        F
      </div>
      <div class="key">
        G
      </div>
      <div class="key">
        H
      </div>
      <div class="key">
        J
      </div>
      <div class="key">
        K
      </div>
      <div class="key">
        L
      </div>
      <div class="key key__symbols">
        : <span> ;
      </div>
      <div class="key key__symbols">
        " <span> '
      </div>
      <div class="key key__enter">
        <i data-feather="corner-down-left"></i>
      </div>
    </div>
    
    <div class="row">
      <div class="key key__shift-left">
        <i data-feather="arrow-up-circle"></i>
      </div>
      <div class="key">
        Z
      </div>
      <div class="key">
        X
      </div>
      <div class="key">
        C
      </div>
      <div class="key">
        V
      </div>
      <div class="key">
        B
      </div>
      <div class="key">
        N
      </div>
      <div class="key">
        M
      </div>
      <div class="key key__symbols">
        > <span> .
      </div>
      <div class="key key__symbols">
        < <span> .
      </div>
      <div class="key key__symbols">
        ? <span> /
      </div>
      <div class="key">
        <i data-feather="arrow-up-circle"></i>
      </div>
      <div class="key key__arrow">
        <i data-feather="arrow-up"></i>
      </div>
      <div class="key">
        <i data-feather="trash-2"></i>
      </div>
    </div>
        
    <div class="row">
      <div class="key key__bottom-funct">
        ^
      </div>
      <div class="key key__bottom-funct">
        <i data-feather="activity"></i>
      </div>
      <div class="key key__bottom-funct">
        <i data-feather="command"></i>
      </div>
      <div class="key key__spacebar">
      </div>
      <div class="key">
        <i data-feather="command"></i>
      </div>
      <div class="key">
        <i data-feather="activity"></i>
      </div>
      <div class="key key__arrow">
        <i data-feather="arrow-left"></i>
      </div>
      <div class="key key__arrow">
        <i data-feather="arrow-down"></i>
      </div>
      <div class="key key__arrow">
        <i data-feather="arrow-right"></i>
      </div>
    </div>
  </div>
</body>
:root {
  --green: #A2CCB6;
  --yellow: #FCEEB5;
  --peach: #EE786E;
  --off-white: #FFFFF4;
}

body {
  background-color: #FFFFFF;
  margin-top: 50px;
  font-family: Arial;
}

span {
  display: block;
  margin-top: -5px;
}

.keyboard {
  width: 780px;
  height: 262px;
  margin: 0px auto;
  border: 3px solid #000000;
  border-radius: 10px;
  background: #000000;
}

.row {
  margin-top: 2px;
  overflow: hidden;
}

.key {
  width: 50px;
  height: 50px;
  float: left;
  cursor: pointer;
  background-color: var(--off-white);
  color: #000000;
  line-height: 48px;
  text-align: center;
  margin-left: 2px;
  border-radius: 4px;
}

.key__symbols {
  line-height: 28px;
}

.key__delete {
  width: 100px;
}

.key__oneandhalf {
  width: 75px;
}

.key__esc {
  background: var(--peach);
}

.key__enter {
  width: 112px;
}

.key__caps {
  width: 90px;
}

.key__shift-left {
  width: 100px;
}

.key__spacebar {
  width: 300px;
}

.key__bottom-funct {
  width: 70px;
}

.key__arrow {
  background: var(--green);
}

.feather {
  margin-top: 10px;
}
feather.replace();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.