CodePen Embed - 3-d Pricing-table

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Pricing plan</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-5 col-sm-6">
            <div class="pricingTable">
                <div class="pricing_heading">
                    <h3 class="title">Pricing Plan</h3>
                    <span class="value">
                        $12.99
                        <span class="month">per month</span>
                    </span>
                </div>
                <div class="content">
                    <ul>
                        <li>Lorem ipsum</li>
                        <li>Lorem ipsum</li>
                        <li>Lorem ipsum</li>
                        <li>Lorem ipsum</li>
                        <li>Lorem ipsum</li>
                    </ul>
                    <div class="link">
                        <a href="#">sign up</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-5 col-sm-6">
            <div class="pricingTable">
                <div class="pricing_heading">
                    <h3 class="title">Pricing Plan</h3>
                    <span class="value">
                        $22.99
                        <span class="month">per month</span>
                    </span>
                </div>
                <div class="content">
                    <ul>
                        <li>Lorem ipsum</li>
                        <li>Lorem ipsum</li>
                        <li>Lorem ipsum</li>
                        <li>Lorem ipsum</li>
                        <li>Lorem ipsum</li>
                    </ul>
                    <div class="link">
                        <a href="#">sign up</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

.pricingTable{
            margin-top:30px;
            text-align: center;
            position: relative;
        }
        .pricingTable .pricing_heading:after{
            content: "";
            width: 36px;
            height: 29.5%;
            background:#EF476F;
            position: absolute;
            top: -1px;
            right: 0;
            z-index: 2;
            transform: skewY(45deg) translateY(18px);
            transition: all 0.4s ease 0s;
        }
        .pricingTable .title{
            font-size: 20px;
            font-weight: 700;
            line-height: 30px;
            color: #000;
            text-transform: uppercase;
            background: #EF476F;
            padding: 15px 0 0;
            margin: 0 35px 0 0;
            transition: all 0.4s ease 0s;
        }
        .pricingTable .value{
            display: block;
            font-size: 35px;
            font-weight: 700;
            color: #000;
            background: #EF476F;
            padding: 5px 0 10px;
            margin: 0 35px 0 0;
            transition: all 0.4s ease 0s;
        }
        .pricingTable:hover .title,
        .pricingTable:hover .value{
            color: #fff;
        }
        .pricingTable .month{
            display: block;
            font-size: 13px;
            font-weight: 500;
            color: #fff;
            text-transform: uppercase;
        }
        .pricingTable .content{
            border-left: 1px solid #f2f2f2;
            position: relative;
        }
        .pricingTable .content:after{
            content: "";
            width: 35px;
            height: 100%;
            background: #f8f8f8;
            box-shadow: 9px 9px 20px #ddd;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1;
            transform: skewY(-45deg) translateY(-18px);
            transition: all 0.4s ease 0s;
        }
        .pricingTable .content ul{
            padding: 0;
            margin: 0 35px 0 0;
            list-style: none;
            background: #fff;
        }
        .pricingTable .content ul li{
            display: block;
            font-size: 15px;
            color: #333;
            line-height: 23px;
            padding: 11px 0;
            border-bottom: 1px solid #f2f2f2;
        }
        .pricingTable .link{
            background: #fff;
            padding: 20px 0;
            margin-right: 35px;
            border-bottom: 1px solid #f2f2f2;
        }
        .pricingTable .link a{
            display: inline-block;
            padding: 9px 20px;
            font-weight: 700;
            color: #EF476F;
            text-transform: uppercase;
            border: 1px solid #EF476F;
            background: #fff;
            transition: all 0.4s ease 0s;
        }
        .pricingTable:hover .link a{
            color: #fff;
            background: #06D6A0;
            border: 1px solid #06D6A0;
        }
        .pricingTable:hover .pricing_heading:after,
        .pricingTable:hover .title,
        .pricingTable:hover .value{
            background:#06D6A0;
        }
        @media only screen and (max-width: 990px){
            .pricingTable{
                margin-bottom: 35px;
            }
        }

This Pen is owned by Aashima Jain on CodePen.

See more by @Aashima on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.