JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pricing-table" class="pricing-table">
    <ul>
        <li class="heading">Bronze</li>
        <li class="price">£20</li>
        <li>Starter package</li>
        <li>15 Projects</li>
        <li class="action"><a href="">Buy Now</a>

        </li>
    </ul>
    <ul class="feature">
        <li class="heading">Silver</li>
        <li class="price">£60</li>
        <li>Intermediate package</li>
        <li>20 Projects</li>
        <li class="action"><a href="">Buy Now</a>

        </li>
    </ul>
</div>

CSS

.pricing-table {
    margin:auto;
    width:80%;
}
.pricing-table ul {
    border-width: 1px;
    border-style: solid;
    border-color: #CCCCCC;
    border-radius: 4px;
    margin: 2px;
    width: 40%;
    text-align: center;
    font-family:'Arial';
    list-style: none;
    float: left;
    padding: 5px;
    background-color: #FFFFFF;
}
.pricing-table ul:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    box-shadow: 3px 5px 7px rgba(0, 0, 0, .7);
}
.pricing-table ul li {
    padding: 10px;
    background-color: #FFFFFF;
    border-width: 0px;
    border-style: dotted;
    border-color: #CCCCCC;
    border-radius: 4px;
    border-bottom-width: 1px;
    font-size: 15px;
}
.pricing-table li:first-child {
    border-bottom: 0;
}
.pricing-table li:last-child {
    border-bottom: 0;
}
.pricing-table li:nth-child(odd) {
    background-color: #FFFFFF;
}
.pricing-table ul .heading {
    color: #FFFFFF;
    background-color: #5091B2;
    font-size: 30px;
}
.pricing-table ul .price {
    color: #636363;
    background-color: #FFFFFF;
    font-size: 25px;
}
.pricing-table ul .action {
    font-size: 20px;
    background-color: #ffffff;
    color: #6C9694;
}
.pricing-table .action a {
    border-color: #CCCCCC;
    border-width: 1px;
    border-radius: 4px;