JSFiddle - React, Tailwind, and code Playground

by niki4810

HTML

<div class="mn-cards-list">
    <article class="mn-card">
        <div class="front">
            <div class="mn-card-media">
                <div class="mn-card-media-box">
                    <div class="mn-card-media-left green"></div>
                    <div class="mn-card-media-main">
                        <div class="mn-card-media-main-heading"> <span><span class="identifier">Contract 
                            HQ0012</span> Hospira Sent for approval</span>
                        </div>
                        <div class="mn-card-media-sub-heading"> <span>two days ago
                        </span>

                        </div>
                    </div>
                </div>
            </div>
            <div class="mn-card-body">This is a short description about the approval card</div>
            <hr class="mn-section-break" />
            <div class="mn-action-section clearfix">
                <div class="mn-action-left mn-action-approve"> <a href="#">Approve</a>

                </div>
                <div class="mn-action-main">
                    <ul>
                        <li class="mn-action-reject">Reject</li>
                    </ul>
                </div>
            </div>
            <div class="circle">i</div>
        </div>
        <div class="back">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor nibh, iaculis sed scelerisque vitae, gravida id enim. Sed lobortis ante non nisi sagittis consectetur. Praesent ut venenatis orci, ut dapibus tellus. Aliquam aliquet nibh nec tellus egestas iaculis. Donec fermentum magna eget lectus adipiscing, vitae interdum massa lobortis.
            <div class="circle">i</div>
        </div>
    </article>
    <article class="mn-card">
        <div class="front">
            <div class="mn-card-media">
                <div class="mn-card-media-box">
                    <div class="mn-card-media-left blue"></div>
                    <div class="mn-card-media-main">
      ...

CSS

body {
    background-color: #F0F1F2;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.4);
}
.mn-cards-list {
    padding: 8px 14px 14px 14px;
}
.mn-card {
    position:relative;
    /* border: 1px solid #CFD4D9; */
    cursor: pointer;
    position: relative;
    font-size: 15px;
    line-height: 17px;
    /* background-color: #FFF; */
    white-space: normal;
    height:154px;
}
.mn-card .circle {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(204, 204, 204, 0.3);
    color: #000;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    display: inline-block;
    text-align: center;
    font-style: italic;
    font-size: 16px;
}
.mn-card:not(:first-child) {
    margin-top: 18px;
}
/* flip related styles */
 .mn-card.flip {
    border:0px;
    background-color:transparent;
    height:154px;
}
.mn-card .front {
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    padding: 5px;
    background : #fff;
    width: inherit;
    height: inherit;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    /* -- transition is the magic sauce for animation -- */
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.mn-card.flip .front {
    z-index: 900;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -moz-box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
}
.mn-card .back {
    z-index: 800;
    width: inherit;
   ...

JavaScript

$(function () {
    // set up block configuration
    $('.circle').click(function (e) {
        var closest = $(e.currentTarget).closest(".mn-card");
        closest.toggleClass('flip');
    });
});