JSFiddle - React, Tailwind, and code Playground

HTML

<header>
 <div class="container1">
    <!--start title-->
    <h1 class="fontface" id="title">NewsSource</h1>
	<!--end title-->

  </div>
    
	</header>
	<!--end header-->
 
<nav>
<div class="menu">
    <ul>
    
    <li><a href="#">ערך ראשון</a></li>
    <li><a href="#">ערך שני</a></li>
    <li><a href="#">ערך שלישי</a></li>
    <li><a href="#">ערך רביעי</a></li>
	<li><a href="#">ערך חמישי</a></li>
	<li><a href="#">ערך שישי</a></li>
	<li><a href="#">ערך שביעי</a></li>
    <li><a href="#">עברית</a></li>
	<li><a href="#">עברית</a></li>
	<li><a href="#">עברית</a></li>
	<li><a href="#">עברית</a></li>
	<li><a href="#">עברית</a></li>
    </ul>
	</div>
    </nav>
	<div id="wrapper"><!-- #wrapper -->
	<section id="main"><!-- #main content and sidebar area -->

		<aside id="sidebar1"><!-- sidebar1 -->
				<br><br><br>
					
				
					<img src="images/ad125.jpg" alt="" /><br /><img src="images/ad125.jpg" alt="" /><br /><br />
						<h3>Latest News </h3><br>
					<ul>
						<li><a href="#">6.5 Mag Quake Rocks Mexican Coast</a></li>
						<li><a href="#">Cain Denies Allegations</a></li>
						<li><a href="#">Snowstorm Leaves N.E. In Dark</a></li>
						<li><a href="#">Plane Disaster Averted in N.J. </a></li>
						<li><a href="#">Employers May Drop Plans Once Health Law Starts</a></li>
						<li><a href="#">Obama Orders FDA to Reduce Drug Shortages</a></li>
						<li><a href="#">Hillary Clinton's Mother Dies at 92</a></li>
						<li><a href="#">10 Sickened in Conn. by Carbon Monoxide Exposure</a></li>
						<li><a href="#">Iran Seeks U.S. Apology Over Murder Plot Claims </a></li>
						<li><a href="#">Greek Bailout Referendum Sparks Outrage</a></li>
						<li><a href="#">Man dies in N.Y. gym fight after Tasered by police </a></li>
						<li><a href="#">Kansas City missing baby case becoming a circus, critics say</a></li>
						
					
					
					</ul>
			

		</aside><!-- end of sidebar1 -->
        

			<section id="content"><!-- #content -->


	

	

			<article...

CSS

/* Distributed by http://freehtml5templates.com */

/*** The All So Important RESET! ***/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, ol, ul, li, form, label, legend, caption, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section, summary {
    margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

ol, ul {
	list-style: none;
}

a img {border:none}

aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block}

html {
	width:100%;
	height:100%;
}

 body{
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color:#fff;
	color:#333;
	margin:0 0 1px; height:100%; 
	line-height: 1.5;
}
	
/* layout */

#wrapper {
width: 1000px;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 20px;
background: #fff;
}
#container{
			position:relative;
			width:1200px;
			margin:0 auto;
			background-color:transparent;
}

.container1{
    width:1200px;
    margin: 0 auto;
	background-color:transparent;
	padding-top: 20px;
	color:#333;
	position: relative;
}
.menu{
    width:940px;
    margin: 0 auto;
	background-color:transparent;
	padding-top:10px;
	padding-bottom:10px;
	position: relative;
}

.group2rt{
		float: right;
	width: 200px;
	position: relative;
	background:transparent;
	padding:15px;
	margin-bottom:10px;
}
.group2 {
	float: left;
	width: 300px;
	position: relative;
	background:transparent;
	padding:15px;
	margin-bottom:10px;
}
	
.group3 {
	float: left;
	width: 120px;
	position: relative;
	background:transparent;
	padding:10px;
	margin-bottom:10px;
	font-size: 12px;
	display:block;
	height: 250px;
}

.group4 {
	float: left;
	width: 420px;
	position: relative;
	background:transparent;
	padding:60px 15px 15px;
	margin-bottom:10px;
}
.newsbox {
	float: left;
	width: 425px;
	position: relative;
	background:transparent;
	padding:15px;
	margin:0 auto;
}

#main {
width:...