JSFiddle - React, Tailwind, and code Playground

by uttara

HTML

<ul class="slider">
  <li style="display: block;">
    <a href="#" style="clear:both;">
       <div class="slider_blog" style="width: 680px; height: 300px; display: block; clear: both; float: left;">
         <div class="slider_blog_img">
           <img src="http://www.google.co.in/url?source=imglanding&ct=img&q=http://upload.wikimedia.org/wikipedia/commons/5/5c/Keegan_Allen_Fish.jpeg&sa=X&ei=CADxULnwKsLyrQfcgIGYAw&ved=0CA4Q8wc&usg=AFQjCNGSh6CzpJszq_B0dZ4PHZPgejfKdA" alt="#">
         </div>
         <div class="slider_blog_text" style="float:left;">
           <h2>This is A Title</h2>
           <p></p>
           <p>words</p>
        </div>
      </div>
    </a>
  </li>
</ul>

CSS

div {border:1px solid black;}
.slider li {
  display: none, block;
  position: absolute; 
  top: 0; 
  left: 0; 
  list-style: none;
  padding:0;
  margin:0px;
  width:680px;
  height:300px;
}

.slider li:after{
  clear:both;
}

.slider_blog{
  border: 1px solid #F0E; clear: both; padding: 0; margin: 0;
}

.slider_blog a{
 text-decoration: none; padding: 0; margin: 0;
}

.slider_blog_img{
  width:300px;
  height:300px; float: left;
}

.slider_blog img{
  width: 200px; height: 200px; margin:50px; border: none; display:block;
 
}

.slider_blog_text{
 width: 280px; padding: 50px 20px 50px 0px; border:none;
}

.slider_blog_text h2{
 text-align:center; font-size:24px; font-weight:bold; color:red; 
}

.slider_blog_text p{
  text-align:justify; font-size:14px; color:green;
}