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" data-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" data-id="show" class="btn btn-custom pull-right" aria-label="Left Align" value="show">
                        <i class="fa fa-ellipsis-v"></i>
 ...

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:...

JavaScript

$('[data-id="show"], .close').on('click', function() {
    $(this).closest('.card').find('.card-reveal').slideToggle('slow');
});