JSFiddle - React, Tailwind, and code Playground

by Alexandre lopes

HTML

<div class="flx-full-width tres-passos">
    <div class="icon"><i class="passo1"></i></div>
    <div class="content">Escolha um Plano que mais se adapta a você. Quantidade de domínios, contas de e-mail, espaço ou banco de dados, de acordo com o que você precisa. Opa ainda não quebrou a linha. vamos encher um pouco mais de liguiça. hehe. Escolha um Plano que mais se adapta a você. Quantidade de domínios, contas de e-mail, espaço ou banco de dados, de acordo com o que você precisa. Opa ainda não quebrou a linha. vamos encher um pouco mais de liguiça. hehe</div>
			</div>

CSS

.flx-full-width {
	width: 85%;
	padding: 10px 25px 13px;
	margin-bottom: 20px;
}

.icon{
    float: left;
    width: 80px;
}

.content{
    padding-left: 80px
}

.tres-passos {
    background: #f8f9fc; 
    color:#69717A; 
    border:1px solid #e9ecef; 
    font: normal 16px Tahoma; }

.tres-passos h3{ font:normal 18px tahoma; margin:0; color:#00AFEF; }

.passo1 { display:inline-block; position: absolute; width:65px; height:65px; left: 30px; top:50%; background:url("http://testetabela.esy.es/1.png") no-repeat; background-size: 65px; }

.hosp-detalhes { padding:25px 30px 15px 30px !important; box-shadow:inset 0 -4px 0 rgba(0, 0, 0, 0.06); border:none !important; background: #f8f9fc; font: normal 16px Tahoma; } .hosp-detalhes p{ margin-top:8px !important; padding-bottom:9px; border-bottom:1px solid #000; border-style: dashed; } .hosp-detalhes p:last-child{ border-bottom:none; } .hosp-detalhes .esp{ margin-top:10px; } .hosp-detalhes 

.esp img{ max-height:40px; float:left; }

.nome-detalhes { padding:6px !important; background: #0076E4; color:#FFF; position:absolute; top:0; font: normal 15px arial; }