JSFiddle - React, Tailwind, and code Playground

by naykris

HTML

<div class="price-block base">
    <h2>base cost</h2>
    <a href="#" class="btn">call to action</a>
</div>

<div class="price-block vip">
    <h2>vip cost</h2>
    <a href="#" class="btn">call to action</a>
</div>

CSS

:root{
    --base-color:  #f01109;
    --vip-color:   #0095dd;
    --hover-color: #9C27B0;
}

*{
    box-sizing: border-box;
    font-family: arial, helvetica, sans-serif;
}

.price-block{
    float: left;
    margin: 8px;
    width: 30%;
    padding: 0 24px 24px;
    background-color: #fff;
    border-radius: 4px;
}

.btn{
    display: inline-block;
    width: 100%;
    text-align: center;
    line-height: 2;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
}

.base{
    border-top: 2px solid var(--base-color);
    box-shadow: 0 4px 12px -8px var(--base-color);
}

.base h2{
    color: var(--base-color);
}

.base .btn{
    background-color: var(--base-color);
}

.vip{
    border-top: 2px solid var(--vip-color);
    box-shadow: 0 4px 12px -8px var(--vip-color);
}

.vip h2{
    color: var(--vip-color);
}

.vip .btn{
    background-color: var(--vip-color);
}

.btn:hover{
    background-color: var(--hover-color);
}