JSFiddle - React, Tailwind, and code Playground

by charaf11

HTML

<body
	
<!--maincontent-->
<div id="main">

<article class="posts">
<h6>Sep 23, 2013 | <span>10 comentarios</span></h6>
<img src="Images/Lapiz-Conciente.png" class="images"/>
<a href="#"><h3>Lapiz Conciente new singel</h3></a>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
<a href="#" class="enter">ENTRAR</a>
</article>

<article class="posts">
<h6>Sep 23, 2013 | <span>10 comentarios</span></h6>
<img src="Images/Lapiz-Conciente.png"  class="images"/>
<a href="#"><h3>Lapiz Conciente new singel</h3></a>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    
<a href="#" class="enter">ENTRAR</a>
</article>

<article class="posts">
<h6>Sep 23, 2013 | <span>10 comentarios</span></h6>
<img src="Images/Lapiz-Conciente.png" class="images"/>
<a href="#"><h3>Lapiz Conciente new singel</h3></a>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
<a href="#" class="enter">ENTRAR</a>
</article>
    </div>
   
       
  <!--endmaincontent-->  

    
</body>

CSS

/*******************
----HTML5----------
*******************/
section, header, footer, aside, article, nav 	
{
display:block;
}

/*******************
----GENERAL--------- 
*******************/
body {
	width:98.8%;
	position:absolute;
	background-color:#e5e5e5;
	text-align : left;
	
}

h1,h2,h4,h5 {
	font-family: verdana, helvetiva, sans-serif, serif, arial;
	font-size: 8px;
	color: black;
	 
}

h3{
	font-family: Verdana, sans-serif, Arial, Helvetica, serif;
	font-size: 16px;
	position: relative;
	left: 170px;
	bottom: 168px;
	width: 40%;

	
   

}
h6{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 8px;
	position: relative;
	left: 10px;
	top: -1px;
	line-height: 18px;
	width: 22%;
   
}
p{
	font-family: verdana, sans-serif, arial, helvetica, serif;
	font-size:12px;
	
	position:relative;
    left:170px;
    bottom:190px;
    
	
	
}
span{
	text-decoration: underline;
	 left:40px;
    top:-5px;
    
}

a {
	text-decoration: none;
	position: relative;
	
   

}

a:link{
	color: #000;
	padding: 0 1px;
	text-decoration: none;
}
a:visited {
	color:#60C;
	
}

a:hover {
	color: #000;
	text-decoration: underline;
}

a:active {
	color: #F00;
}

ul
{
    list-style-type: none;
	
}

ol {
     list-style-type: none;
}
 
/*Images*/
	
.images {
	background-color: #000;
	height: 130px;
	width:130px;
	border: 25px;
	border-color: #fff ;
	border-radius:10px;
	border-radius: 10px;
	border-radius: 10px;	
	position:relative;
	left: 15px;
	bottom: 20px;
    float:none;
}




	
/*Content*/

.content {
    float:none;
	position: relative;
	width: 77%;
	top: -130%
	
	
}


/*shadow*/

.shadow {
	 
	float:none;
}
	

.posts {
	background-color: #fff;
	width: 802px;
	height: 160px;
	position: relative;
    left: 8px;
	float: none;
	border-radius: 3px;
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
	border-radius: 3px;
	box-shadow: 0 2px 0 0 #03F, 2px 4px 5px #333;
	 
     
}	

a {	
    text-decoration: none;
}

.posts a:hover{    
        text-decoration: none;  
}