JSFiddle - React, Tailwind, and code Playground
HTML
<div class="plans">
<div class="plan start">
<h1 class="btn-plan">STARTUP Business </h1>
<div class="btn-plan plan-header">
<p class="percentage">0%</p>
<p>Costurile dvs. de pornire</p>
</div>
<div class="plan-content">
<ul class="plan-features">
<li>Magazin Online</li>
<li>Web-design</li>
<li>Managementul continutului </li>
<li>Optimizare pentru motoare de căutare</li>
<li>Promovare magazin online (marketing online)</li>
</ul>
<p>Considerati ca marketingul online este o modalitate excelenta de atingere a obiectivelor unei companii, insa nu ati incercat niciodata sa apelati la aceasta? Raspunsul la aceasta intrebare este pachetul de servicii webcare STARTUP. </p>
<p>Serviciile de webcare incluse sunt la un inalt standard calitativ. Pe perioada de startup costurile companiei dvs vor fi ZERO! B2B Media Web aduce in prim plan strategia WIN-WIN ca idee centrala a pachetului STARTUP.</p>
</div>
<a class="btn-apply" href="">Aplica Acum</a>
</div>
<div class="plan hybrid">
<h1 class="btn-plan">HYBRID OPTION </h1>
<div class="btn-plan plan-header">
<p class="percentage">50%</p>
<p>Costurile dvs. de pornire</p>
</div>
<div class="plan-content">
<ul class="plan-features">
<li>magazin online</li>
<li>webdesign</li>
<li>content management</li>
<li>SEO</li>
<li>marketing in retelele de socializare (SMM)</li>
</ul>
<p> Considerati ca afacerea dvs detine toate caracteristicile pentru a fi prezenta si online,, insa nu ati gasit varianta potrivita de servicii webcare? HYBRID OPTION reprezinta solutia propusa de B2B pentru a Creste Impreuna! </p>
<p>Acest tip de pachet de servicii webcare are ca si scop principal ideea: Sa crestem impreuna!. Pachetul...
CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);
body {
margin:0;
font-family: 'Open Sans', sans-serif;
}
.plans {
width:100%;
display:block;
}
.plan {
background-color:#2a2a2a;
float: left;
width:32%;
margin-right:2%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:20px;
text-align:center;
color:#fff;
}
.plan-content{
margin-left:-20px;
margin-right:-20px;
display:none;
padding:10px 0;
}
.plan-content p{
text-align:left;
padding:0 20px;
}
.plan.last {
margin-right:0;
}
.plan ul.plan-features {
list-style:disc;
}
.plan ul.plan-features li{
padding:10px 15px 10px 2px;
text-align:left;
}
.plan h1 {
font-size:21px;
margin-right:15px;
margin: -20px -20px 0 -20px;
padding-bottom:20px;
padding-top:15px;
font-weight:300;
text-transform:uppercase;
}
.plan .plan-header .percentage{
font-size:30px;
}
button.btn-plan{
padding:10px 15px;
background-color:#4c7dbd;
color:#fff;
display:inline-block;
margin:10px auto;
text-decoration:none;
border:none;
}
button:hover.btn-plan{
background-color:#6299e0;
}
.plan.start{
background-color:#11a8ab;
}
.plan.start h1{
background-color:#0e989b;
}
.plan.start .plan-content{
background-color:#0e989b;
}
.plan.start .btn-apply{
color:#0e989b;
}
.plan.hybrid{
background-color:#e64c65;
}
.plan.hybrid h1{
background-color:#cd4259;
}
.plan.hybrid .plan-content{
background-color:#cd4259;
}
.plan.hybrid .btn-apply{
color:#cd4259;
}
.plan.full{
background-color:#976e98;
}
.plan.full h1{
background-color:#825e83;
}
.plan.full .plan-content{
background-color:#825e83;
}
.plan.full .btn-apply{
color:#825e83;
}
.btn-apply{
display:block;
background-color:#fff;
padding:15px 0;
font-weight:600;
text-decoration:none;
...
JavaScript
$('.btn-plan').click(function(){
$(this).parent().find('.plan-content').fadeToggle();
});
$('.btn-apply').click(function(e){
e.preventDefault();
})