JSFiddle - React, Tailwind, and code Playground

by Sachin Patel

HTML

<div class="keyboard gradient-border mb-3 row board_left">


  <div class="clearfix"></div>

  <div class="clearfix"></div>
  <div class="col">
    <div class="keyitems mb-3">
      <div class="onediv">
        <div class="row mb-2">
          <div class="keylight-1">

            <span data-key="Esc" class="key" style="color:#f8e71c;"></span></div>

          <div class="key_blank_w10">&nbsp;</div>
          <div class="keylight-1">
            <span data-key="f1" class="key" style="color:#f8e71c;"></span>
          </div>
          <div class="keylight-1" style="box-shadow: -6px 0px 7px -3px #f8e71c;">
            <span data-key="f2" class="key" style="color:#f8e71c;"></span>
          </div>
          <div class="keylight-1" style="box-shadow: -6px 0px 7px -3px #28ff00;">
            <span data-key="f3" class="key" style="color:#28ff00;"></span>
          </div>
          <div class="keylight-1" style="box-shadow: -6px 0px 7px -3px #28ff00;">
            <span data-key="f4" class="key" style="color:#28ff00;"></span>
          </div>
          <div class="key_blank_w8">&nbsp;</div>
          <div class="keylight-1">
            <span data-key="f5" class="key" style="color:#28ff00;"></span>
          </div>
          <div class="keylight-1" style="box-shadow: -6px 0px 7px -3px #28ff00;">
            <span data-key="f6" class="key" style="color:#28ff00;"></span>
          </div>
          <div class="keylight-1" style="box-shadow: -6px 0px 7px -3px #28ff00;">
            <span data-key="f7" class="key" style="color:#28ff00;"></span>
          </div>
          <div class="keylight-1" style="box-shadow: -6px 0px 7px -3px #50e3c2;">
            <span data-key="f8" class="key" style="color:#50e3c2;"></span>
          </div>
          <div class="key_blank_w8">&nbsp;</div>
          <div class="keylight-1">
            <span data-key="f9" class="key" style="color:#00e7ff;"></span>
          </div>
          <div class="keylight-1" style="box-shadow: -6px 0px 7px -3px...

CSS

.key_blank_w10 {
  width: 8%;
}

.key_blank_w8 {
  width: 3%;
}

.keyboard {
  display: flex;
  /* flex-direction: column; */
  /* justify-content: center; */
  /* align-items: center; */
  /* font-size: 0; */
  /* padding: 0.25rem; */
  border-radius: 12px;
  padding: 10px 0 5px;
  height: 100%;
}

.keyitems {
  /* justify-content: center; */
  align-items: center;

  border-radius: 8px;
  padding: 12px 10px;
  /* align-content: center; */
  /* align-self: center; */
  flex-direction: column;
  background-repeat: repeat-y;
  background-size: 100%;
  box-shadow: inset 0 0 10px #000000;
  /* background-color: rgba(255, 255, 255, 0.96); */
  position: relative;
  margin: 0;

}

.keyitems:after {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.keyboard .row {
  height: 30px;
  display: flex;
  justify-content: space-between;
  /* width: 617.2px; */
  padding-top: 1px;
  margin-bottom: 2px;
}

.keyboard span {
  border-radius: 3px;
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  display: inline-block;
  font-family: system-ui, sans-serif;
  font-size: 0.5rem;
  font-weight: 400;
  line-height: 1.8;
  /* padding: 0.33em 0.56em; */
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border: 5px solid #1d1d1d;
  border-top: 2px solid transparent;
  border-bottom: 6px solid transparent;
  background-color: #404040;
  /* border-color: #1d1d1d; */
  border-top-color: #1d1d1d;
  /* border-bottom-color: #1d1d1d; */
  box-shadow: 0 -0.125em 0 0.073em #090909, 0 0.125em 0 -0.063em rgba(0, 0, 0, 0.2);
  transition: -webkit-transform 100ms;
  transition: transform 100ms;
  transition: transform 100ms, -webkit-transform 100ms;
  transition: all .2s ease-in-out;
  outline: 0;
  cursor: pointer;
  z-index: 2;
}

.keyboard span:hover,
.keyboard span[data-key=space]:hover,
.keyboard span[data-key=lwin]:hover {
  border-top-color: #656565;
  border-left-color: #656565;
 ...

JavaScript

var colorcode = "#00ff00";


$(".keylight-1").css("box-shadow", colorcode + " -6px 0px 7px -3px");
$(".key").css("color", colorcode);