CodePen Embed - Animated Pricing tabs with blur effect

<body>
  <div class="row">
    <div class="s12 m8 pricing-tabs center">
      <div class="col s12 m4 tab-item">
        <h1>Personnel</h1>
        <div class="price">25 000 GNF/MOIS</div>
        <span class="underline"></span>
        <ul>
          <li>10 Projets</li>
          <li>1 TB de stockage</li>
          <li>200 Mails pro</li>
          <li>Bande passante illimitée</li>
          <li>15 Comptes FTP</li>
          <li>2 SSL gratuit</li>
          <li>Assistance 24h/24</li>
        </ul>
        <button class="btn btn-profiter grey darken-1">Profiter</button>
      </div>
      <div class="col s12 m4 tab-item">
        <h1>Business</h1>
        <div class="price">50 000 GNF/MOIS</div>
        <span class="underline"></span>
        <ul>
          <li>25 Projets
            <i class="material-icons">done</i>
          </li>
          <li>2 TB de stockage
            <i class="material-icons">done</i>
          </li>
          <li>700 Mails pro
            <i class="material-icons">done</i>
          </li>
          <li>Bande passante illimitée</li>
          <li>30 Comptes FTP
            <i class="material-icons">done</i>
          </li>
          <li>5 SSL gratuit
            <i class="material-icons">done</i>
          </li>
          <li>Assistance 24h/24</li>
        </ul>
        <button class="btn btn-profiter grey darken-1">Profiter</button>
      </div>
      <div class="col s12 m4 tab-item">
        <h1>Entreprise</h1>
        <div class="price">100 000 GNF/MOIS</div>
        <span class="underline"></span>
        <ul>
          <li>Projets <em>illimités</em> 
            <i class="material-icons">done_all</i>
          </li>
          <li>Stockage <em>illimité</em>
            <i class="material-icons">done_all</i>
          </li>
          <li>Mails pro <em>illimités</em>
            <i class="material-icons">done_all</i>
          </li>
          <li>Bande passante illimitée</li>
          <li>Comptes FTP <em>illimités</em>
            <i class="material-icons">done_all</i>
          </li>
          <li>SSL gratuit
            <i class="material-icons">done_all</i>
          </li>
          <li>Assistance 24h/24</li>
        </ul>
        <button class="btn btn-profiter grey darken-1">Profiter</button>
      </div>
    </div>
    </div>
</body>

.pricing-tabs {
  overflow-x: hidden;
}
.pricing-tabs .tab-item {
  transform: scale(0.9);
  vertical-align: top;
  float: left;
  position: relative;
  transition: transform 0.3s ease-out, filter 0.3s;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 10px 10px 0 0;
  min-height: 500px !important;
  min-width: 260px !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: default;
}

.pricing-tabs .tab-item:after,
.pricing-tabs .tab-item:before {
  z-index: -1;
  content: ' ';
  position: absolute;
  left: 10px;
  top: 80%;
  bottom: 18px;
  right: 10px;
  transform-origin: bottom center;
  box-shadow: 0px 25px 10px -8px rgba(0,0,0,0.4);
}
.pricing-tabs .tab-item:after {
  transform: rotate(6deg) translate3d(15px, 0, 0);
}
.pricing-tabs .tab-item:before {
  transform: rotate(-6deg) translate3d(-15px, 0, 0);
}

.pricing-tabs .tab-item:hover{
          transform: scale(1);
}

.tab-item:not(:hover).flou {
          filter: blur(3px);
}

.tab-item h1{
  margin: 0;
  font-size: 2.4rem;
  line-height: 5rem;
  background: #fbcb0f;
  border-radius: inherit;
}

.tab-item .price{
  font-size: 1.5rem;
  line-height: 2rem;
}

.underline {
  position: relative;
}

.underline:after {
  position: absolute;
  content: ' ';
  right: 5%;
  left: 5%;
  bottom: 0;
  height: 2px;
  background-image: linear-gradient(90deg, transparent, #fbcb0f, transparent);
}
.underline.black{margin-bottom: 40px;}
.underline.black:after{
  background-image: linear-gradient(90deg, transparent, #fbcb0f, #000, #fbcb0f, transparent);
}

.tab-item ul li{
  height: 35px;
  font-size: 1.2rem;
}

.tab-item ul li i{
  color: #ffc400;
}

.tab-item:last-child ul li i{
  color: #64dd17;
}

.tab-item:last-child ul li em{
  text-shadow: 1px 0px 0px #fbcb0f;
  font-size: 1.3rem;
}

.tab-item .btn-profiter{font-size: 1.7rem; letter-spacing: 1px;}

.tab-item:hover .btn-profiter{background: #000 !important;}

This Pen is owned by Oury on CodePen.

See more by @ourystd on CodePen

External CSS

External JavaScript

This Pen doesn't use any external JavaScript resources.