JSFiddle - React, Tailwind, and code Playground

by suri_295

HTML

<section class="gallery">
    <nav>
      <ul class="navgal">
        <li><a href="#one">One</a></li>
        <li><a href="#two">Two</a></li>
        <li><a href="#three">Three</a></li>
        <li><a href="#four">Four</a></li>
      </ul>
    </nav>
    <article id="one" class="target">      
          <section>About page content</section> 
        <p >1 combined the 2 fiddles making the calls to blindLeftOut and blindLeftIn work. See my answer for details and let me know if that is what you were looking for.  </p>
    </article>
    <article id="two" class="target">
      
          <section>Product page content</section> 
        <p>1 combined the 2 fiddles making the calls to blindLeftOut and blindLeftIn work. See my answer for details and let me know if that is what you were looking for.  </p>
    </article>
    <article id="three" class="target">
     
          <section>Protfolio page content</section>  
        <p>1 combined the 2 fiddles making the calls to blindLeftOut and blindLeftIn work. See my answer for details and let me know if that is what you were looking for.  </p>
    </article>
    <article id="four" class="target">
           <section>contact page content</section> 
        <p>1 combined the 2 fiddles making the calls to blindLeftOut and blindLeftIn work. See my answer for details and let me know if that is what you were looking for.  </p>
    </article>
  </section>

CSS

* { 
    margin: 0;
    padding: 0;
  }
  body {
    font-size: 15px;
    font-family: helvetica, arial, sans-serif;
    padding: 1em;
  }
  footer, section, article, header, aside, figure, nav {
    display: block;
  }
.navgal{
    float:left;
    width:100px;
    height:250px;    
}
.navgal li{
    float:left;
    padding:15px;        
}
  nav {
    padding: 20px;
    z-index: 20;
    top: 0px;
    left: 0;
    background: #fff;
    position: absolute;
  }

  nav li {
    display: inline;
    padding-right: 1em;
  }
  nav a {
    background: #369;
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
  }
  nav a:hover, nav a:focus {
    background: #036;
  }
  footer {
    clear: both;
    font-size: 10px;
  }
  footer a {
    color: #000;
  }
P {
    width:110px; 
    
}


  .gallery {
    position: relative;
    height: 280px;
    width: 640px;
    overflow: hidden;
  }
  .target {
    position: absolute;
    top: 20px;
    padding:10px;
    left: -320px;
    height: 220px;
    width: 200px;
    -webkit-transition: 1s;
       -moz-transition: 1s;
        -ms-transition: 1s;
         -o-transition: 1s;
            transition: 1s;

 }
  .target:target {
    top: 20px;
    left: 140px;
    width:200px;
    background-color:#ccc;
  }