<form>
<div>
<label>
<input type="radio" name="plan" checked>
<span class="plan-details">
<span class="plan-name">Basic</span>
<span class="plan-cost">$0/month</span>
<span>1 team member</span>
<span>100 GB/month</span>
<span>1 concurrent build</span>
</span>
</label>
</div>
<div>
<label>
<input type="radio" name="plan">
<span class="plan-details">
<span class="plan-name">Pro</span>
<span class="plan-cost">$50/month</span>
<span>5 team members</span>
<span>500 GB/month</span>
<span>5 concurrent builds</span>
</span>
</label>
</div>
<div>
<label>
<input type="radio" name="plan">
<span class="plan-details">
<span class="plan-name">Business</span>
<span class="plan-cost">$200/month</span>
<span>5+ team members</span>
<span>1000 GB/month</span>
<span>Unlimited builds</span>
</span>
</label>
</div>
</form>
body {
background-color: #f2f8ff;
color: #263238;
font-family: 'Noto Sans', sans-serif;
}
div + div {
padding-top: 1em;
}
label, input {
cursor: pointer;
}
.plan-details {
display: inline-flex;
flex-direction: column;
}
.plan-name {
color: #1B68C7;
font-size: 1.2em;
font-weight: bold;
}
.plan-cost {
font-weight: bold;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.