JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css">
<div id="rectangle">
        <div class="col-md-3">
            <button class="btnTicketType btn btn-default">
              <i class="fa fa-check" aria-hidden="true"></i>
              Button 1
            </button>
            <small class="seatnumber">Text 1</small>
        </div>
                <div class="col-md-3">
            <button class="btnTicketType btn btn-default">
              <i class="fa fa-check" aria-hidden="true"></i>
              Button 2
             </button>
            <small class="seatnumber">Text 2</small>
        </div>
                <div class="col-md-3">
            <button class="btnTicketType btn btn-default">
              <i class="fa fa-check" aria-hidden="true"></i>
              Button 3
             </button>
            <small class="seatnumber">Text 3</small>
        </div>
</div>

CSS

.btnTicketType {
    margin-bottom:2%;
    margin-top:10%;
    width:95%;
    height:15em;
    font-size:1.5em;
    transition: all 2s;
}

.seatnumber{
    display:block; 
    width:100%; 
    text-align:center;
    font-size:1em;
}

#rectangle{
    height:100%;
    width:100%;
    overflow:auto;
    outline-color:black;
    outline-style:solid;
}

.clicked-button {
  opacity: .1;
   
}

JavaScript

$( ".btnTicketType" ).click(function() {
  $(this).addClass('clicked-button');
});