JSFiddle - React, Tailwind, and code Playground

by jansian

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>

    <span class="clear"/>
        </div>

CSS

.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; 
background-color: #E9F7FE; 
padding-top: 4px; 
padding-bottom: 4px; 
padding-left: 100px; 
padding-right: 100px; 
border-style: solid; 
color: #5091B2; 
} 

#pricing-table{
    width:80%;
 margin: auto;   
}

.clear{
    clear:both;
}