استایل زیبا برای جداول قیمت - pricing-tables ( نمونه 12)

<section class="pricing-section">

<div class="pricing pricing--palden">

<div class="pricing__item">

<div class="pricing__deco">

<svg class="pricing__deco-img" version="1.1" id="Layer_1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="100px" viewBox="0 0 300 100" enable-background="new 0 0 300 100" xml:space="preserve">

<path class="deco-layer deco-layer--1" opacity="0.6" fill="#FFFFFF" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729

c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" />

<path class="deco-layer deco-layer--2" opacity="0.6" fill="#FFFFFF" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729

c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" />

<path class="deco-layer deco-layer--3" opacity="0.7" fill="#FFFFFF" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716

H42.401L43.415,98.342z" />

<path class="deco-layer deco-layer--4" fill="#FFFFFF" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428

c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" />

</svg>

<div class="pricing__price"><span class="pricing__currency">$</span>29<span class="pricing__period">/ mo</span></div>

<h3 class="pricing__title">Freelance</h3>

</div>

<ul class="pricing__feature-list">

<li class="pricing__feature">1 GB of space</li>

<li class="pricing__feature">Support at $25/hour</li>

<li class="pricing__feature">Limited cloud access</li>

</ul>

<button class="pricing__action">Choose plan</button>

</div>

<div class="pricing__item pricing__item--featured">

<div class="pricing__deco">

<svg class="pricing__deco-img" version="1.1" id="Layer_1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="100px" viewBox="0 0 300 100" enable-background="new 0 0 300 100" xml:space="preserve">

<path class="deco-layer deco-layer--1" opacity="0.6" fill="#FFFFFF" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729

c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" />

<path class="deco-layer deco-layer--2" opacity="0.6" fill="#FFFFFF" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729

c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" />

<path class="deco-layer deco-layer--3" opacity="0.7" fill="#FFFFFF" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716

H42.401L43.415,98.342z" />

<path class="deco-layer deco-layer--4" fill="#FFFFFF" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428

c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" />

</svg>

<div class="pricing__price"><span class="pricing__currency">$</span>59<span class="pricing__period">/ mo</span></div>

<h3 class="pricing__title">Business</h3>

</div>

<ul class="pricing__feature-list">

<li class="pricing__feature">5 GB of space</li>

<li class="pricing__feature">Support at $5/hour</li>

<li class="pricing__feature">Full cloud access</li>

</ul>

<button class="pricing__action">Choose plan</button>

</div>

<div class="pricing__item">

<div class="pricing__deco">

<svg class="pricing__deco-img" version="1.1" id="Layer_1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="100px" viewBox="0 0 300 100" enable-background="new 0 0 300 100" xml:space="preserve">

<path class="deco-layer deco-layer--1" opacity="0.6" fill="#FFFFFF" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729

c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" />

<path class="deco-layer deco-layer--2" opacity="0.6" fill="#FFFFFF" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729

c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" />

<path class="deco-layer deco-layer--3" opacity="0.7" fill="#FFFFFF" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716

H42.401L43.415,98.342z" />

<path class="deco-layer deco-layer--4" fill="#FFFFFF" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428

c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" />

</svg>

<div class="pricing__price"><span class="pricing__currency">$</span>99<span class="pricing__period">/ mo</span></div>

<h3 class="pricing__title">Enterprise</h3>

</div>

<ul class="pricing__feature-list">

<li class="pricing__feature">10 GB of space</li>

<li class="pricing__feature">Support at $5/hour</li>

<li class="pricing__feature">Full cloud access</li>

</ul>

<button class="pricing__action">Choose plan</button>

</div>

</div>

</section>