JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="card">
        <div class="card-image">
          <img class="img-responsive" src="">

        </div>
        <!-- card image -->

        <div class="card-content">
          <span class="card-title">Material Cards</span>
          <button type="button" id="show" class="btn btn-custom pull-right" aria-label="Left Align" value="show">
            <i class="fa fa-ellipsis-v"></i>
          </button>
        </div>
        <!-- card content -->
        <div class="card-action">
          <a href="#" target="new_blank">Link</a>
          <a href="#" target="new_blank">Link</a>
          <a href="#" target="new_blank">Link</a>
          <a href="#" target="new_blank">Link</a>
          <a href="#" target="new_blank">Link</a>
        </div>
        <!-- card actions -->
        <div class="card-reveal">
          <span class="card-title">Card Title</span>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
          <p>Here is some more information about this product that is only revealed once clicked on.</p>
        </div>
        <!-- card reveal -->
      </div>
      
      <div class="card">
        <div class="card-image">
          <img class="img-responsive" src="">

        </div>
        <!-- card image -->

        <div class="card-content">
          <span class="card-title">Material Cards</span>
          <button type="button" id="show" class="btn btn-custom pull-right" aria-label="Left Align" value="show">
            <i class="fa fa-ellipsis-v"></i>
          </button>
        </div>
        <!-- card content -->
        <div class="card-action">
          <a href="#" target="new_blank">Link</a>
          <a href="#" target="new_blank">Link</a>
          <a href="#" target="new_blank">Link</a>
          <a href="#" target="new_blank">Link</a>
          <a href="#"...

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
.card .card-image {
  overflow: hidden;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.card .card-image img {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.card .card-image:hover img {
  /*-webkit-transform: scale(1.2) rotate(-7deg);
    -moz-transform: scale(1.2) rotate(-7deg);
    -ms-transform: scale(1.2) rotate(-7deg);
    -o-transform: scale(1.2) rotate(-7deg);
    transform: scale(1.2) rotate(-7deg);*/
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2));
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

.card {
  font-family: 'Roboto', sans-serif;
  margin-top: 0px;
  position: relative;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.card .card-content {
  padding: 10px;
}

.card .card-content .card-title,
.card-reveal .card-title {
  font-size: 24px;
  font-weight: 200;
}

.card .card-action {
  padding: 20px;
  border-top: 1px solid rgba(160, 160, 160, 0.2);
}

.card .card-action a {
  font-size: 15px;
  color: #ffab40;
  text-transform: uppercase;
  margin-right: 20px;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.card .card-action a:hover {
  color: #ffd8a6;
  text-decoration: none;
}

.card .card-reveal {
  padding: 20px;
  position: absolute;
  background-color:...

JavaScript

$('#show').on('click', function() {
        $(this).parent().parent().children('.card-reveal').slideToggle('slow');		
   });
$('.close').on('click', function() {
$(this).parent().parent().children('.card-reveal').slideToggle('slow');
});