JSFiddle - React, Tailwind, and code Playground

by pleymo

HTML

<div class="buttons">
    
<div style="float:left">
<a href="#" class="button27">1</a>  
</div>
    
<div style="float:left">
<a href="#" class="button27">1</a>  
</div>
    
    <div style="float:left">
<a href="#" class="button27">1</a>  
</div>
    
</div>

CSS

a.button27 {
  position: relative;
  display: inline-block;
  width: 270px;
  height: 2em;
  line-height: 2em;
    margin: 20px;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  color: #000;
  outline: none;
  border-radius: 5px;
-webkit-box-shadow: 0px 2px 4px 1px rgba(102, 102, 102, 0.86);
-moz-box-shadow:    0px 2px 4px 1px rgba(102, 102, 102, 0.86);
box-shadow:         0px 2px 4px 1px rgba(102, 102, 102, 0.86);
}
a.button27:hover {

-webkit-box-shadow: 0px 1px 2px 1px rgba(10, 72, 178, 0.86);
-moz-box-shadow:    0px 1px 2px 1px rgba(10, 72, 178, 0.86);
box-shadow:         0px 1px 2px 1px rgba(10, 72, 178, 0.86);
}
a.button27:active {
  background: none;
    box-shadow: 0 0 0 1px #bbb inset, 0 1px 3px rgba(0,0,0,.5) inset, 0 1px 2px #fff;
}

.buttons {
    width:1100px;    
}