JSFiddle - React, Tailwind, and code Playground

by Peter Galiba

HTML

<div id="prices">
    <div class="wrapper">
        <a href="#starter">
            <div class="price">
                <div class="pricelogo">
                    <img border="0" src="http://www.digitalnebula.co.uk/images/starter_logo.png">
                </div>
                <h1>Starter Website Package</h1>
                <h2>from £245</h2>
                <ul>
                    <li>Great for startups</li>
                    <li>High quality, great value</li>
                    <li>Business-card style</li>
                    <li>Professional image</li>
                    <li>Up to 5 pages</li>
                </ul>             
            </div>
        </a>
        
        <a href="#wordpress">
            <div class="price">
                <div class="pricelogo">
                    <img border="0" src="http://www.digitalnebula.co.uk/images/wp_logo.png">
                </div>
                <h1>WordPress Development</h1>
                <h2>from £595</h2>
                <ul>
                    <li>Keep control of your website</li>
                    <li>Add pages as and when</li>
                    <li>Fully bespoke look</li>
                    <li>Industry standard CMS</li>
                </ul>
            </div>
        </a>
        
        <a href="#consultation">
            <div class="price">
                <div class="pricelogo">
                    <img border="0" src="http://www.digitalnebula.co.uk/images/large_logo.png">
                </div>
                <h1>Consultation Services</h1>
                <h2 style="opacity: 1; ">POA</h2>
                <ul>
                    <li>Social Media Marketing</li>
                    <li>Mobile Marketing</li>
                    <li>Web-based Video</li>
                    <li>HTML/CSS/JavaScript</li>
                </ul>
            </div>
        </a>
    </div>
</div>

CSS

a {
text-decoration: none;
color: #333;
}
#prices {
    position:relative;
    overflow:hidden;
    
    margin-left:0px;
    margin-right:0px;
    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #ffffff,  #eeeeee); /* for firefox 3.6+ */ 
}

#prices .wrapper {
    overflow:visible;
}

.price {
    position:relative;
    float:left;
    width:280px;
    height:160px;
    padding:20px;
    margin-right:20px;
    margin-top:20px;
    margin-bottom:20px;
    cursor:pointer;
    font-size:12px;
    color:#666;
    text-align:left;
    
    background-color:#FFF;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 1px 1px 5px #BBB;
    -webkit-box-shadow: 1px 1px 5px #BBB;
    box-shadow: 1px 1px 5px #BBB;
}


.price:hover {
    background-color:#f6f6f6;
    
    -moz-box-shadow: inset 0px 0px 10px #BBB;
    -webkit-box-shadow: inset 0px 0px 10px #BBB;
    box-shadow: inset 0px 0px 10px #BBB;
}

.price h1 {
    font-size:22px;
    font-weight:normal;
    letter-spacing:-1px;
    margin-top:0px;
}

.price h2 {
    font-size:18px;
    font-weight:normal;
    margin-left:20px;
    margin-top:-15px;
    color:#999;
}

.price ul {
    margin-left:-10px;
}

.price li {
    margin-bottom:2px;
}

.pricelogo {
    position:absolute;
    height:100px;
    width:100px;
    bottom:15px;
    right:15px;
}

JavaScript

jQuery(function($) {
    var delay = 1000;
    $('#prices').find('.price').each(function() {
        $(this).css('opacity', 0).delay(delay).animate({
            opacity: 1
        }, 1000);
        delay += 500;
    });
});