JSFiddle - React, Tailwind, and code Playground

by Kheema Pandey

HTML

<ul id="pricing">
                             <li class="price">
                               <h3><a href="#" target="_blank">£750 GBP</a></a></h3>
                             </li>
                             <li class="price"><h3><a href="#" target="_blank">€900 EURO</a></h3></li>
                             <li class="price"><h3><a href="#" target="_blank">$1150 USD</a></h3></li>
                          </ul>

CSS

#pricing ul{margin:0; padding:0; list-style-type:none;}
#pricing ul li{margin:0 20px; height:140px; width:140px; display:table; padding:20px;}
#pricing ul li a{color:#ffffff; text-decoration:none;}
.price{ border-radius:50%; background-color:#008066;font-size:1.8em;line-height:1em;color:white;
text-shadow: 1px 1px 5px #eee;box-shadow: inset 0 0 6px 6px rgba(100,100,100, 0.25);}
#pricing ul h3{display:table-cell; text-align: center;vertical-align:middle;}
.price{float:left;
    width:140px;
	margin:0 15px;
	 }
#pricing {
	text-align:center;
	 margin-left:0 auto;
	 margin-right:0 auto;
}