JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<h2>Sometimes you don't need a full keyboard. <br/>You might also need to reserve some screen real estate.</h2>
<p>This serves as the perfect keyboard to be fixed at the bottom of any screen.(with work on iOS of course.)<br/>
    I made this when trying to come up with a unobtrusive way to organize tables and records.</p>
<p>It  consists of two containers, the second sliding inside the first. It's responsive so I would say its probably safest on medium to large screens. I'll be coming out with something else for mobile soon. Modify however, share it up.</p>
<div id="alphabetContainer">
  <div class="innerContainer">  
    <div class="letter">A</div>
    <div class="letter">B</div>
    <div class="letter">C</div>
    <div class="letter">D</div>
    <div class="letter">E</div>
    <div class="letter">F</div>
    <div class="letter">G</div>
    <div class="letter">H</div>
    <div class="letter">I</div>
    <div class="letter">J</div>
    <div class="letter">K</div>
    <div class="letter">L</div>
    <div class="letter">M</div>
      <div><a class="next" href="#">></a></div>
      <div><a class="prev" href="#"><</a></div>
    <div class="letter">N</div>
    <div class="letter">O</div>
    <div class="letter">P</div>
    <div class="letter">Q</div>
    <div class="letter">R</div>
    <div class="letter">S</div>
    <div class="letter">T</div>
    <div class="letter">U</div>
    <div class="letter">V</div>
    <div class="letter">W</div>
    <div class="letter">X</div>
    <div class="letter">Y</div>
    <div class="letter">Z</div>
  </div>
</div>

CSS

body {
    background:#70C6FF;
}
p{
    line-height:1.5;
}
#alphabetContainer{
    width:100%;
    overflow:hidden;
    border-radius:10px; 
    box-shadow:0 0 0 1px #666;
}
.innerContainer {
    width:200%;
    position:relative;
    right:0;
}
.letter, .next, .prev {
    text-align:center;
    color:#999;
    display:block;
    font-weight:bold;
    background:#e3e3e3;
    box-shadow:inset 0 0 2px #666;
    width:3.571%;
    padding: 10px 0;
    text-shadow: 1px 1px 0px #fff, -1px -1px  #666;
    height:3.8%;
    float:left;
}
.letter:hover, .next:hover, .prev:hover {
       box-shadow:inset 0 0 10px rgba(30,30,30,.6);
    color:#3399cc;
    
}

JavaScript

var containerMax = $('#alphabetContainer').width();

$('a.next').click(function() {
    $('.innerContainer').animate({
        right: containerMax ,
        }, 1000);
});

$('a.prev').click(function() {
    $('.innerContainer').animate({
        right: 0 ,
        }, 1000);
});