JSFiddle - React, Tailwind, and code Playground

by paulalexandru21

HTML

<div class="col border">
    <div class="head">
        <p>Gold</p>
        <small>FREE</small>         
    </div>
    <ul>
        <li><b>5</b> products</li>            
        <li><b>1</b> image per product</li>
        <li><b>Basic</b> stats</li> 
        <li><b>Basic</b> customization</li>        
    </ul>
</div>
<div class="col border">
    <div class="head">
        <p>Platinum</p>
        <small>FREE</small>        
    </div>
    <ul>
        <li><b style="color: #76CAC6">25</b> products</li>
        <li><b style="color: #76CAC6">3</b> image per product</li>
        <li><b style="color: #76CAC6">Better</b> stats</li> 
        <li><b style="color: #76CAC6">Full</b> customization</li>        
    </ul>
</div>
<div class="col border">
    <div class="head">
        <p>Diamond</p>
        <small>FREE</small>        
    </div>
    <ul>
        <li><b style="color: #87BE84">100</b> products</li>
        <li><b style="color: #87BE84">5</b> image per product</li>
        <li><b style="color: #87BE84">Best</b> stats</li>
        <li><b style="color: #87BE84">Full</b> customization</li>        
    </ul>
</div>

CSS

html, body {font-family: arial;}

.col {
    height: 500px;
    width: 200px;
    float: left;
}

.arange {
    padding-top: 20px;
    background: pink;
}

.border {
    border-right: 1px dotted gray;
}

.head{
    padding-top: 20px;
    background: #000;
    color: #FFF;
    width: 200px;
    height: 90px;
    lign-height: 100px;
}

p {
    font-size: 18pt;
    font-family: arial;
    color: white;
    margin-left: 20px;
}

small {
    font-size: 10pt;
    font-family: arial;
    color: gray;
    font-weight: bold;
    margin-left: 20px;
}

ul {
    margin-left: 20px;
    margin-right: 20px;
    color: gray;
}

ul li {
    padding: 10px 0px;
    border-bottom: 1px dotted gray;
    font-size: 15px;
}

blue {color: #76CAC6;}