JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<div class="todos">
        <h1>Edição 1 - Botões </h1>
        <div class="botoes">	
                <button class="normal" type="button">Normal</button><br>
                <button class="sucesso" type="button">✓</button><button class="sucessod" type="button">Sucesso</button> <br>
                <button class="info" type="button">i </button><button class="infod" type="button">Info</button>  <br>
                <button class="aviso" type="button">! </button><button class="avisod" type="button">Aviso</button><br>
                <button class="erro" type="button">X </button><button class="errod" type="button">Erro</button>
                                
        </div>
    </div>

CSS

/*	Geral	*/
	*{
		margin: 0;
		padding: 0;
		color: #fff;		
		font-family: 'Open Sans', sans-serif;
	}	
	h1{
		text-align: center;
		background: #09F;
		padding: 20px;
		color: #fff;
		width: 400px;
	}
	button{
		border: none;
		font-size:13pt;		
		font-family: 'Open Sans', sans-serif;
	}	
	.botoes{
		margin-left: 150px;		
		margin-top: 10px;		
	}
	.todos{
		background: #ccc;
		width:440px;
		padding-bottom: 10px;
		margin: 20px 20px 20px 20px;
		border-bottom: 3px solid #09F;
		border-radius: 5px;	
	}
	/*	Específicos	*/
	.normal{		
		padding: 8px 15px;
		color: #fff;		
		background: #95a5a6;
		border-radius: 2px;	
		border-bottom: 2px solid #748889;
	}
	.sucesso{
		margin-top: 10px;
		margin-right: 0;		
		padding: 8px 11px;
		font-weight: bold;
		background: #27ae60;
		border-bottom: 2px solid #27ae60;
		border-top-left-radius: 2px;
		border-bottom-left-radius: 2px;
	}
	.sucessod{
		margin-left: 0;
		padding: 8px 15px;
		background: #2ecc71;
		border-bottom: 2px solid #27ae60;
		border-top-right-radius: 2px;
		border-bottom-right-radius: 2px;
	}
	
	.info{
		margin-top: 10px;
		margin-right: 0;		
		padding: 8px 15px;
		font-weight: bold;
		background: #2980b9;
		border-bottom: 2px solid #2980b9;
		border-top-left-radius: 2px;
		border-bottom-left-radius: 2px;
	}
	.infod{
		margin-top: 10px;
		margin-left: 0;
		padding: 8px 15px;
		background: #3498db;		
		border-bottom: 2px solid #2980b9;
		border-top-right-radius: 2px;
		border-bottom-right-radius: 2px;
	}
	.aviso{
		margin-top:10px;
		margin-right: 0;		
		padding: 8px 15px;
		background: #d35400;
		border-bottom: 2px solid #d35400;
		border-top-left-radius: 2px;
		border-bottom-left-radius: 2px;
		font-weight: bold;
	}
	.avisod{
		margin-top:10px;
		margin-right: 0;		
		padding: 8px 15px;
		background: #e67e22;
		border-bottom: 2px solid #d35400;
		border-top-right-radius: 2px;
		border-bottom-right-radius: 2px;		
	}
	.erro{
		margin-top:10px;
		margin-right: 0;		
		padding: 8px 11px;
		background:...