JSFiddle - React, Tailwind, and code Playground

by maxisam

HTML

<html>
 <head>
  <title>JquerySlider Deneme</title>
  <script src="jquery.js" type="text/javascript"></script>
  <script src="javascript.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="slider.css" ></link>
 </head>
 <body>
  <div class="main-slider">
  
      <div class="slider-large-image">
           <div class="large-image" id="slider-image-1">
        <img src="http://www.yazar.gen.tr/wp-content/uploads/2011/06/google-beta2.jpg" alt="" width="520px" height="230px" />
        </div>
        <div class="info-area" id="slider-info-1">
            <a href="http://www.nasilyapmali.com">Nasil yapmali</a>
        </div>
        
    </div>
    
      <div class="slider-sidebar">
        <img class="image1" src="http://www.yazar.gen.tr/wp-content/uploads/2011/06/google-beta2.jpg" alt="" width="110px" height="68px" />
        <img class="image2" src="http://www.yazar.gen.tr/wp-content/uploads/2011/06/google-beta2.jpg" alt="" width="110px" height="68px" />
        <img class="image3" src="http://www.yazar.gen.tr/wp-content/uploads/2011/06/google-beta2.jpg" alt="" width="110px" height="68px" />
        <img class="image4" src="http://www.yazar.gen.tr/wp-content/uploads/2011/06/google-beta2.jpg" alt="" width="110px" height="68px" />
        
    </div>
  
  </div>
 </body>
</html>

CSS

.main-slider{
    background-color: #CCC;
    border: 1px solid #000;
    width: 650px;
    height: 300px;
    overflow:hidden;    
}

.main-slider .slider-large-image{
    float:left;
    }
.main-slider .slider-sidebar{
    float:right;
    }   


.slider-sidebar img{
display:block;
    margin:6px
}