JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">
    <ul>        
      <li>
        <a href="#">main menu</a>
            <ul>

                  <li><a href="#section1">section 1</a></li>
                  <li><a href="#section2">section 2</a></li>
                  <li><a href="#section3">section 3</a></li>
            </ul>
        </li>  
    </ul>   
</div>

 <div class="scroll" >

     <a name="section1"><img src="http://www.flagstaffbusinessnews.com/wp-content/uploads/2012/10/Picture-Canyon-.jpg"/></a>
         
     <a name="section2"><img src="http://i.telegraph.co.uk/multimedia/archive/02371/karen-ann-jones_2371086k.jpg"/></a>
          
     <a name="section3"><img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/411/cache/northern-lights-picture-aurora-borealis-september-2011-yukon_41173_600x450.jpg"/></a>
         
</div>

CSS

.scroll { float:left;border: 1px solid black; width: 40em; height: 30em; line-height: 3em; overflow-y: scroll; overflow-x:hidden; text-align: center; margin:5%; margin-bottom: 5%; background-color: #ffffff; color: #ffffff; }
img {float: left; width: 95%; padding: 3%; padding-right: 3%;}