JSFiddle - React, Tailwind, and code Playground

by ivos

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
 <div id="accordion">
   <div class="card">
     <div class="card-header" id="headingOne">
       <h5>
         <span class="fa fa-info-circle info"></span>&nbsp;
         <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
           Available actions
         </button>
       </h5>
     </div>
     <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">

       <div class=card-body>
         <div class="card-group">
           <div class="card">
             <div class="card-header">Edit</div>
             <div class=card-body>
               <p class="card-text"><b>Single click</b> on the cell - for editable cells only</p>
             </div>
           </div>

           <div class="card">
             <div class="card-header">Save</div>
             <div class=card-body>
               <p class="card-text">Press <b>Enter</b> or <b>click outside</b> the cell</p>
             </div>
           </div>

           <div class="card">
             <div class="card-header">Discard</div>
             <div class=card-body>
               <p class="card-text">Press <b>Escape</b> to cancel and exit edit mode.</p>
             </div>

           </div>
         </div>
       </div>
     </div>
     <div class="card-group-footer">
       <button type="button" class="btn btn-outline-primary btn-block">Add User</button>
     </div>
   </div>
 </div>