JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pricing-wrap">
 <ul class="pricing_main">
  <li class="pricing pricing_three normal">
    <h2>Used Containers</h2>
    .....
  </li>
  <li class="pricing pricing_three normal">
    <h2>Used Containers</h2>
    .....
  </li>
  <li class="pricing pricing_three normal">
    <h2>Used Containers</h2>
    .....
  </li>
 </ul>
</div>

CSS

.pricing-wrap{
    overflow:hidden;
    width:100%;
    margin:20px 0 30px 0;
    float:left;
}

.pricing_main{
    overflow:hidden;
    float:none;
    margin:0 0 0 0;
    width:100.5%;
    padding:7px 0;
    font-family:Arial, Helvetica, sans-serif !important;
}

li.pricing{
    padding:0;
    margin:20px 0 20px -1px;
    float:left;
    text-align:center !important;
    border:1px solid #ddd;
    position:relative;
}

li.main{
    margin:0 0 0 -1px;
    -moz-box-shadow:  0 0 10px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:  0 0 10px rgba(0, 0, 0, 0.2);
    box-shadow:  0 0 10px rgba(0, 0, 0, 0.2);
    z-index:1;
}

li.pricing:first-child{
    margin-left:0;
}

li.pricing ul li{ padding:8px 0; margin:0 35px; border-top:1px dotted #eee;}

li.pricing ul li:first-child{border-top:none;}

li.pricing h2{
    background:#ddd;
    padding:10px 0;
    margin:0;
    font-size:20px;
    border-bottom:1px solid #ddd;
    font-weight:bold;
}

li.main h2{
    background:#000;
    color:#fff;
    padding:21px 1px;
    margin:-1px -1px 0 -1px;
    border-bottom:none;
}

li.main{
    border-color:#ccc;
}

.plan-head{ background:#f9f9f9; padding:20px 0 15px 0; border-bottom:1px solid #eee;}

.plan-price{ font-size:25pt; font-weight:bold; letter-spacing:-2px; line-height:1;}

.plan-bottom{ background:#f9f9f9; padding:15px 0; border-bottom:1px solid #eee;}

li.main .plan-bottom{padding:35px 0;}

.plan-bottom{ background:#f9f9f9; padding:25px 0; border-top:1px solid #eee;}

.plan-bottom a{ font-weight:bold; padding:8px 15px; background:#000; color:#fff !important; font-size:14px; opacity:.9}

li.main .plan-bottom a{padding:13px 22px; opacity:1}

.plan-bottom a:hover,
li.main .plan-bottom a:hover{}

li.pricing_three{
    width:33%;
}

li.pricing_four{
    width:24.7%;
}

JavaScript

$(document).ready(function() {
    $(".pricing").hover(function () {
        $(this).addClass("main", 2000);
      },
      function () {
        $(this).removeClass("main", 2000);
      }
    );
});