JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<section id="punbbcommunity">
<section class="punbbHeader">
	<div class="punbbImage"><img src="http://i78.servimg.com/u/f78/18/17/62/92/punbbg10.png" alt="PunBB Forumeiros" /></div>
	<div class="punbbTitle">PunBB Forumeiros</div>
</section>
<section class="punbbMain">
	<div class="punnMessage">Desenvolvimento, análise e criação de códigos.</div>
    <div class="punbbAcess"><a href="http://punbb.forumeiros.com/">Acesse o fórum</a></div>
</section>
</section>

CSS

#punbbcommunity{
	font: 35px 'Georgia', serif;
	color: #FFF;
	background-color: #333;
	overflow: hidden;
	padding: 10px 0;
	background-image: -webkit-radial-gradient(center, #2d5380, #1d3652);
	   background-image: -moz-radial-gradient(center, #2d5380, #1d3652);
	        background-image: radial-gradient(center, #2d5380, #1d3652);
	text-align: center;
	max-width: 400px;
	width: 100%;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
	-webkit-box-shadow: #000 0 2px 2px, #8ea0b3 0 2px 0 inset, #8ea0b3 0 -1px 0 inset;
	   -moz-box-shadow: #000 0 2px 2px, #8ea0b3 0 2px 0 inset, #8ea0b3 0 -1px 0 inset;
	        box-shadow: #000 0 2px 2px, #8ea0b3 0 2px 0 inset, #8ea0b3 0 -1px 0 inset;
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
#punbbcommunity div{
	display: inline-table;
}
.punbbTitle{
	color: #eaeaea;
	text-shadow: 1px 2px 2px rgba(0,0,0,.6);
}
.punbbHeader{
	border-bottom: #ebb600 1px solid;
	-webkit-box-shadow: #ffc500 0 1px 0;
	   -moz-box-shadow: #ffc500 0 1px 0;
	        box-shadow: #ffc500 0 1px 0;
	padding: 0 0 10px 0;
}
.punbbImage img{
	max-width: 40px;
	vertical-align: bottom;
}
.punnMessage{
	font: 700 30% 'Open Sans', Verdana, Arial,Verdana,sans-serif;
	text-transform: uppercase;
	text-shadow: #000 0px 1px 1px;
	color: #eaeaea;
}
.punbbAcess a{
	background-color: #ebb600;
	display: block;
	text-decoration: none;
	color: #fff;
	background-image: -webkit-linear-gradient(top, #ffc500, #f1c736);
	   background-image: -moz-linear-gradient(top, #ffc500, #f1c736);
	        background-image: linear-gradient(top, #ffc500, #f1c736);
	-webkit-border-radius: 4px;
   	   -moz-border-radius: 4px;
	        border-radius: 4px;
	text-shadow: rgba(0,0,0,.6) 1px 1px 0;
	cursor: pointer;
	padding: 7px;
	font: 700 40% 'Open Sans', Verdana, Arial,Verdana,sans-serif;
}