JSFiddle - React, Tailwind, and code Playground

by Mohammed Sameer

HTML

<div class="parent">


</div>

CSS

#oval
{
position: absolute;
top: -2px;
left: 50%;
transform: translate(-50%, -50%);
padding: 5px 15px;
cursor: pointer;
border: none;
border-radius: 20px;
text-align: center;
color: #fff;
font-size: 15;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
#oval:hover
{
border: solid //a new color ;
background-color: //a new color ;
color: #000;
}
.parent
{
position: relative;
width: 600px;
padding: 30px 10px 10px 10px;
border-style: solid;
border-radius: 20px;
margin: auto;
text-align: center;
font-family: "Arial";
font-size: 14;
}

JavaScript

$("body").on("keydown", function (evt) {
$('.parent').html(evt.key + evt.keyCode);
  
});