Cool Flat Panel Box Design

Responsive section panel design

<section class="box">
     <h3 class="boxheading gray">Panel Gray</h3>
    <div class="p9">
        <p>Lorem Ipsum has been the industry's <a href="#" target="_blank">Lesson8</a> standard dummy text ever since the 1500s.</p>
    </div>
</section>
<section class="box">
     <h3 class="boxheading blue">Panel Blue</h3>
    <div class="p9">
        <p>Lorem Ipsum has been the industry's <a href="#" target="_blank">Lesson8</a> standard dummy text ever since the 1500s.</p>
    </div>
</section>
<section class="box">
     <h3 class="boxheading red">Panel Red</h3>
    <div class="p9">
        <p>Lorem Ipsum has been the industry's <a href="#" target="_blank">Lesson8</a> standard dummy text ever since the 1500s.</p>
    </div>
</section>
<section class="box">
     <h3 class="boxheading yellow">Panel Yellow</h3>
    <div class="p9">
        <p>Lorem Ipsum has been the industry's <a href="#" target="_blank">Lesson8</a> standard dummy text ever since the 1500s.</p>
    </div>
</section>
<section class="box">
     <h3 class="boxheading green">Panel Green</h3>

    <div class="p9">
        <p>Lorem Ipsum has been the industry's <a href="#" target="_blank">Lesson8</a> standard dummy text ever since the 1500s.</p>
    </div>
</section>
<section class="box">
     <h3 class="boxheading orrange">Panel Green</h3>
    <div class="p9">
        <p>Lorem Ipsum has been the industry's <a href="#" target="_blank">Lesson8</a> standard dummy text ever since the 1500s.</p>
    </div>
</section>

body{font-family:Arial;}
h1,h2,h3,h4,h5,h6{line-height:normal;margin:0;}
section{overflow:hidden;float:left;margin:15px 5px 0;}
.box{width:250px;background:#fff;border-radius:5px;border:1px solid #ccc;box-shadow:0 2px 2px rgba(0,0,0,0.15);}
.boxheading{position:relative;z-index:5;height:45px;line-height:45px;color:#333;font-size:15px;text-align:center;padding:0 14px;}
.p9{padding:9px!important;}
.box p{font-size:14px;margin:0;}
.gray{border-bottom:1px solid #bababa;background:linear-gradient(top,#f9f9f90,#e9e9e9100%);filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr="#f9f9f9",endColorStr="#e9e9e9");}
.blue{border-bottom:1px solid #2974F4;background:#2974F4;color:#fff;}
.red{border-bottom:1px solid #D23D28;background:#D23D28;color:#fff;}
.yellow{border-bottom:1px solid #FFC002;background:#FFC002;color:#fff;}
.green{border-bottom:1px solid #009D59;background:#009D59;color:#fff;}
.orrange{border-bottom:1px solid #F79034;background:#F79034;color:#fff;}

DEMO