JSFiddle - React, Tailwind, and code Playground

by rikazavr

HTML

<div class="buttons-center">
    <div class="wrapper-buttons" >
                
                 <button class="buttons-keyboard">
                    1
                 </button>
				         <button class="buttons-keyboard">
                    2
                 </button>
                 <button class="buttons-keyboard">
                    3
                 </button>    
				 <br/>
				         <button class="buttons-keyboard">
                   4
                 </button>
				          <button class="buttons-keyboard">
                   5
                 </button>
                  <button class="buttons-keyboard">
                   6
                 </button>
            
				 <br/>
				 
				         <button class="buttons-keyboard">
                    7
                 </button>
				         <button class="buttons-keyboard">
                    8
                 </button>
				         <button class="buttons-keyboard">
                    9
                 </button>
                 
		      <br/>
             <button class="buttons-keyboard" style="color: red">C</button>
             <button class="buttons-keyboard">0</button>
             <button class="buttons-keyboard">
               <div class="aspect-ratio-img">
                 <img src="https://i.ibb.co/rpw4ZRh/deletewhite.png" alt="deleteimg" border="0" class="img"/>
               </div>
             </button>
        </div>
           </div>

CSS

body {background: grey}

.buttons-keyboard {
  margin: 1.2%;
  background: white;
  border-radius: 10px 10px 10px 10px;
  outline: none;
  border: none;
  width: 30%;
  height: 8.5vh;
  box-shadow: 2px 4px 2px #C0C0C0;
  transition: all ease 0.3s;
  font-size: 200%; 
  color: black;
  max-height: 60px;
  /* display: flex; */
  /* justify-content: center; */
}

.aspect-ratio-img {
  display: flex;
  justify-content: center;
  position: relative;
  height: 55%;
  text-align: center;
}

.img {
  position: absolute;
  height: 100%;
  top: 0;
}

/* .imglight { display: block; height: 55%; } */

.buttons-keyboard:active { box-shadow: 0 3px 0 #DCDCDC;
                           top: 3px;}
				  
.wrapper-buttons { width: 100%; 
                   max-width: 800px;
				           display: flex;
			         	   flex-flow: row wrap;
			        	   justify-content: center;
				           align-items: flex-end;
				           position: absolute;
				           bottom: 60px;
                   }

.buttons-center { display: flex; 
                  justify-content: center;
				          width: 100%}