JSFiddle - React, Tailwind, and code Playground

by karthick Chandran

HTML

<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<section id="container">
    <div id="all_content">
        <div id="content_one">
            <h1>News</h1>
            <article class="news">
                <div class="img-container">
                    <img class="img" src="http://placehold.it/200x220"/>
                </div>
                <h2>Title of my news</h2>
                <span>05/08/2014</span>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...<a class="fancybox" href="#janela_fancybox" id="ver_fancy">Read more</a></p>
                <div id="janela_fancybox-container">
                    <div id="janela_fancybox" class="modal">
                       <h2>Title of my news</h2>
                        <span>05/08/2014</span>
                       <img class="img"/>
                       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five...

CSS

#container
{
	width:100%;
	float:left;
	height:auto;
    margin: 10px 0 15px 0;

}

#all_content
{
	width:460px;
	height:auto;
	margin:0 auto 0 auto;
}

#content_one
{
	float:left;
    width:460px;
}

#content_one h1
{
	
	font-size:18px;
	margin-bottom:10px;
	color:#2F3083; 
	border-bottom:2px solid #f3f3f3;
	font-weight:bold;
}

.news
{
	height:auto; 
    position:relative;
}


.news h2
{
	
	font-size:17px;  
	color:blue;
	text-decoration:none;
    margin-left:0;
	font-weight:bold;
}



.img-container
{
   width: 160px;
   height: 165px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
   margin-right:10px; 
   border:3px solid #ccc;
   margin-top:0;
}

.img-container  img{
	width: 160px;
   height: 165px;
}

.news h2 a
{
	
	font-size:16px;  
	color:#3B5998; 
	text-decoration:none;
    margin-left:0;
	font-weight:bold;
}


.news a
{
	
	font-size:14px; 
	text-decoration:none;
	color:#3b5998;
    margin-left:2px;

}


.news span 
{
	font-size:15px; 
	font-weight:normal;
	color:#7a7a7a;
}


.news p
{

	font-size: 14px;  
	text-align:justify; 
	margin-top:5px;
	margin-bottom:5px;
	line-height:21px;
}




#ver_fancy 
{
	font-size:14px;
	text-decoration:none;
}





.modal
{	
	display:none;	
	text-align:center;
	width:100%;
	margin:0 auto 0 auto;
	background:#fff;
}

.modal .img
{
	width:200px;
	height:220px; 
	float:left;
	margin-right:10px;
	border:5px solid #f3f3f3;
	margin-top:15px;
	display:none;
	
}



.modal span
{
	
	width:100%;
	color:#ccc;
    font-size:13px; 
	text-align:center;
	color:#7a7a7a;
}


.modal h2
{
	width:100%;
	color:#004B97;
    font-size:16px; 
	text-align:center;	
}

.modal p
{
	font-size: 14px;  
	text-align:justify;
	line-height:25px;	
	
	
	width:100%;
	margin:5px auto;
}

.modal .fechar_fancy
{
	
	font-weight:bold;
	margin:0 auto;
	clear:both;
	float:left;
	width:100%;
	font-size:15px;
	cursor:pointer;
	text-align:center;
	
} 

.modal...

JavaScript

$(".fancybox").fancybox({   
		maxWidth	: 800,
		fitToView	: false,
		width		: '100%',
		height		: '100%',
		autoSize	: false,
		closeClick	: false,
		openEffect	: 'elastic',
		closeEffect	: 'elastic'
    })

$('.fechar_fancy').on('click', function() {   
        $.fancybox.close();
 });