JSFiddle - React, Tailwind, and code Playground

by Marcos vini

HTML

<main>
<div>
<div class="content">
<div class="breadcrumb">
<a href="index.html" title="Página Inicial">Página Inicial</a>
<a href="minhaconta.html" title="Minha Conta" class="icon-seta-direita">Minha Conta</a>

</div>
<section>
<aside>
<figure>
<img  height="180" src="http://midiacloud.com/aura/glamour/site/img/perfil.jpg" width="180" alt="">
<a>Alterar Foto</a>
</figure>
<ul>
<li><h4>Menu</h4></li>
<li><a><span>Meus Saldos</span></a></li>
<li><a><span>Minha Loja</span></a></li>
<li><a><span>Sair da conta</span></a></li>
</ul>
</aside>
<div>


<div id="tabs"><input type="radio" name="tabs" id="toggle-tab1" checked="checked" /> <label for="toggle-tab1">Dados de acesso</label> <input type="radio" name="tabs" id="toggle-tab2" /> <label for="toggle-tab2">Dados Pessoais</label>
  
<div id="tab1" class="tab">
<form>
<fieldset>
<div>
<label>Seu e-mail:</label>
<input  id="email" maxlength="100" name="email" type="text" value="" placeholder="[email protected]">
</div>
<div>
<label>Confirmação e-mail:</label>
<input id="emailConfirmacao" maxlength="100" name="emailConfirmacao" type="text" value="" placeholder="[email protected]">  
</div>
 <div>
<label>Senha: *</label>
<input id="senha" placeholder="Digite uma senha" maxlength="100" name="senha" type="password">
</div>
<div>
<label>Confirmação senha: *</label>
<input placeholder="Digite sua senha novamente" id="senhaConfirmacao" maxlength="100" name="senhaConfirmacao" type="password">
</div>
<input type="submit" value="Editar Cadastro" class="butAdicionarCadastro" id="botaoSalvar">
</fieldset></form>

</div>
<div id="tab2" class="tab"><form>
<fieldset>
<div>
<label>Nome: *</label>
<input  id="nome" maxlength="70" name="nome" type="text" value="" placeholder="Digite Seu Nome">
</div> 
<div>
<label>Segundo Titular:</label>
<input  id="segundoTitular" maxlength="70" name="segundoTitular" type="text" value="" placeholder="Digite Segundo Titular">
</div> 
<div>
<label>Sexo: *</label>
<br>
<br>
<input id="sexo" name="sexo"...

CSS

section {
    flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    display: flex;
    display: -ms-flexbox;
    flex-direction: row;
    -ms-flex-direction: row;
}

aside {
    flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    width: 235px;
    background-color: transparent;
}

aside ul > li h4 {
    color: #bfc2d3;
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    display: table-cell;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    line-height: 1.2;
}

aside ul > li a {
    -webkit-border-top-left-radius: 30px;
    -moz-border-top-left-radius: 30px;
    -ms-border-top-left-radius: 30px;
    -o-border-top-left-radius: 30px;
    border-top-left-radius: 30px;
    -webkit-border-bottom-left-radius: 30px;
    -moz-border-bottom-left-radius: 30px;
    -ms-border-bottom-left-radius: 30px;
    -o-border-bottom-left-radius: 30px;
    border-bottom-left-radius: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding: 9px 40px 9px 40px;
    cursor: pointer;
    height: 44px;
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: 0;
    text-decoration: none;
    position: relative;
    outline: 0;
}

aside ul li:first-child {
    margin: 10px 0 0 0;
    height: 40px;
    display: table;
    width: 100%;
    vertical-align: middle;
    padding: 0 17px 0 27px;
    padding-left: 40px;
}

aside ul >li {
    position: relative;
    margin: 0;
    display: block;
    float: none;
    height: auto;
    padding: 0;
}

aside ul > li a span {
    color: #696e92;
    font-weight: 100;
    font-size: 0.8rem;
    text-transform: initial;
    display: table-cell;
    height: 100%;
    width: 100%;
    padding: 0;
    vertical-align: middle;
}
aside figure{
	    border-bottom: 0;
    border-right: 1px solid #1d1d1d38;
    margin: 10px 0...