This is a simple way to get tabs working with no JavaScript.

If you want a new tab, you just create a new <div> section and put your content in it and it just works.

To see how it works, view source on this page

And save this CSS file locally.

This long text scrolls

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut consectetur mi. Suspendisse urna nunc, congue nec malesuada ut, euismod id mauris. Fusce rutrum, nisi id tincidunt convallis, neque erat bibendum lacus, sit amet dignissim metus felis vel magna. Aliquam congue nunc facilisis risus placerat sit amet mollis sapien tempor. Ut laoreet arcu placerat magna bibendum consectetur. Integer molestie aliquam nunc id mattis. Donec non nulla quis tortor adipiscing bibendum.

Mauris non magna eu erat lobortis tristique. Cras vitae nisi a felis pulvinar bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultricies sapien gravida lorem porttitor adipiscing. Vivamus hendrerit lorem vitae nulla ullamcorper hendrerit. Etiam bibendum pharetra ipsum id blandit. Nullam sed scelerisque quam. Vestibulum mauris enim, consequat eget pharetra in, pretium nec nulla.

Etiam laoreet enim sed nulla congue molestie pellentesque felis consectetur. Integer pulvinar tempor massa in ultricies. Pellentesque varius tellus ac urna pharetra tempor. Sed at odio risus, ac elementum lacus. Proin odio tellus, venenatis in ultricies in, accumsan at sem. Pellentesque magna sapien, tincidunt a suscipit a, condimentum ac ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus lacinia mollis massa, tempus rhoncus ante pulvinar ut. Sed ut orci non enim vestibulum mattis. Aliquam erat volutpat. Praesent pharetra lacinia diam, nec accumsan felis convallis a. Donec metus sapien, convallis nec iaculis eu, dignissim non mauris. Nam sed tellus velit. Cras bibendum accumsan vestibulum. Nulla et dui erat. Etiam nibh tortor, bibendum ut feugiat ut, fermentum sed nulla.

Praesent commodo scelerisque est, vel ultricies augue malesuada in. Nunc a leo quam. Ut luctus dictum tortor vel fringilla. Donec bibendum rutrum urna vel laoreet. Quisque nulla ante, molestie sed aliquet vel, ultricies vitae odio. Etiam faucibus felis tellus, ac ullamcorper enim. Quisque molestie elit a eros porttitor vitae rutrum ipsum feugiat. Fusce id massa vel nunc posuere faucibus et non risus. Pellentesque sodales venenatis tellus at placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer consectetur cursus ipsum, at mattis lectus eleifend vitae. Mauris eget nulla at erat ultrices luctus a et sem. Nam leo nisi, euismod eget egestas sit amet, rutrum nec velit. Nulla id gravida dolor. Nunc quam enim, tincidunt nec convallis ut, imperdiet sit amet ante. Duis tempor sapien at enim egestas id eleifend purus bibendum.

Curabitur facilisis lectus ut velit accumsan dapibus. Quisque a massa elit, ac aliquam lorem. Phasellus non diam nec lacus suscipit venenatis. Integer luctus aliquam condimentum. Morbi eu aliquet massa. Quisque tincidunt diam in eros vulputate viverra. Vivamus euismod orci sit amet eros interdum adipiscing. Aliquam lorem nisl, pulvinar a lobortis feugiat, dignissim ac tortor.

Cras a enim pellentesque lacus tempus porttitor. Ut vestibulum hendrerit ligula, dapibus porta erat rutrum eget. Nulla eu justo in lorem semper scelerisque. Quisque odio dolor, posuere ac aliquet id, dapibus in diam. Phasellus dolor augue, tempor vitae pretium quis, condimentum sit amet turpis. Proin viverra, eros et consequat dictum, magna ligula adipiscing felis, quis congue augue sem sit amet augue. Morbi lacinia turpis eu tortor fringilla auctor ac a dui. Nullam tincidunt sodales consequat. Curabitur nec magna vel neque sagittis faucibus. Donec pellentesque tincidunt condimentum. Nunc pulvinar, risus at suscipit vestibulum, nunc mi auctor purus, sit amet congue mauris neque eu turpis.

Aenean auctor, ante id sodales ultricies, dolor ante egestas arcu, ac pretium neque libero eget lorem. Cras ante diam, porta nec lacinia id, elementum sit amet odio. Ut metus sapien, lacinia iaculis varius et, molestie eu velit. Nunc sagittis tempus ligula. Nunc malesuada hendrerit rhoncus. Morbi vitae risus eget neque egestas condimentum. Vivamus sed felis lorem, et ultricies quam. Maecenas interdum tellus vitae risus egestas blandit. Maecenas vel ligula a nibh adipiscing aliquet at sed diam. Etiam non magna libero. Aliquam porttitor, erat in eleifend pulvinar, mi dolor luctus turpis, eu ultrices risus nisi a dolor. Donec tristique adipiscing purus, at dapibus dui congue et.

Phasellus volutpat sodales nunc sodales commodo. Maecenas auctor ante egestas mi lobortis pellentesque mollis nulla rhoncus. Duis eget ultrices mauris. Vivamus ultricies euismod nisi eu viverra. Nulla dui nisl, mollis nec semper sed, egestas et libero. Etiam id turpis risus, in porta augue. Donec id rutrum augue. Phasellus mi sapien, bibendum et fringilla iaculis, congue nec justo.

Your message here

Note that this page has no toolbar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut consectetur mi. Suspendisse urna nunc, congue nec malesuada ut, euismod id mauris. Fusce rutrum, nisi id tincidunt convallis, neque erat bibendum lacus, sit amet dignissim metus felis vel magna. Aliquam congue nunc facilisis risus placerat sit amet mollis sapien tempor. Ut laoreet arcu placerat magna bibendum consectetur. Integer molestie aliquam nunc id mattis. Donec non nulla quis tortor adipiscing bibendum.

Mauris non magna eu erat lobortis tristique. Cras vitae nisi a felis pulvinar bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultricies sapien gravida lorem porttitor adipiscing. Vivamus hendrerit lorem vitae nulla ullamcorper hendrerit. Etiam bibendum pharetra ipsum id blandit. Nullam sed scelerisque quam. Vestibulum mauris enim, consequat eget pharetra in, pretium nec nulla.

Etiam laoreet enim sed nulla congue molestie pellentesque felis consectetur. Integer pulvinar tempor massa in ultricies. Pellentesque varius tellus ac urna pharetra tempor. Sed at odio risus, ac elementum lacus. Proin odio tellus, venenatis in ultricies in, accumsan at sem. Pellentesque magna sapien, tincidunt a suscipit a, condimentum ac ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus lacinia mollis massa, tempus rhoncus ante pulvinar ut. Sed ut orci non enim vestibulum mattis. Aliquam erat volutpat. Praesent pharetra lacinia diam, nec accumsan felis convallis a. Donec metus sapien, convallis nec iaculis eu, dignissim non mauris. Nam sed tellus velit.

Cras bibendum accumsan vestibulum. Nulla et dui erat. Etiam nibh tortor, bibendum ut feugiat ut, fermentum sed nulla. Praesent commodo scelerisque est, vel ultricies augue malesuada in. Nunc a leo quam. Ut luctus dictum tortor vel fringilla. Donec bibendum rutrum urna vel laoreet. Quisque nulla ante, molestie sed aliquet vel, ultricies vitae odio. Etiam faucibus felis tellus, ac ullamcorper enim. Quisque molestie elit a eros porttitor vitae rutrum ipsum feugiat. Fusce id massa vel nunc posuere faucibus et non risus. Pellentesque sodales venenatis tellus at placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer consectetur cursus ipsum, at mattis lectus eleifend vitae. Mauris eget nulla at erat ultrices luctus a et sem. Nam leo nisi, euismod eget egestas sit amet, rutrum nec velit. Nulla id gravida dolor. Nunc quam enim, tincidunt nec convallis ut, imperdiet sit amet ante. Duis tempor sapien at enim egestas id eleifend purus bibendum.

Curabitur facilisis lectus ut velit accumsan dapibus. Quisque a massa elit, ac aliquam lorem. Phasellus non diam nec lacus suscipit venenatis. Integer luctus aliquam condimentum. Morbi eu aliquet massa. Quisque tincidunt diam in eros vulputate viverra. Vivamus euismod orci sit amet eros interdum adipiscing. Aliquam lorem nisl, pulvinar a lobortis feugiat, dignissim ac tortor.

Cras a enim pellentesque lacus tempus porttitor. Ut vestibulum hendrerit ligula, dapibus porta erat rutrum eget. Nulla eu justo in lorem semper scelerisque. Quisque odio dolor, posuere ac aliquet id, dapibus in diam. Phasellus dolor augue, tempor vitae pretium quis, condimentum sit amet turpis. Proin viverra, eros et consequat dictum, magna ligula adipiscing felis, quis congue augue sem sit amet augue. Morbi lacinia turpis eu tortor fringilla auctor ac a dui. Nullam tincidunt sodales consequat. Curabitur nec magna vel neque sagittis faucibus. Donec pellentesque tincidunt condimentum. Nunc pulvinar, risus at suscipit vestibulum, nunc mi auctor purus, sit amet congue mauris neque eu turpis.

Aenean auctor, ante id sodales ultricies, dolor ante egestas arcu, ac pretium neque libero eget lorem. Cras ante diam, porta nec lacinia id, elementum sit amet odio. Ut metus sapien, lacinia iaculis varius et, molestie eu velit. Nunc sagittis tempus ligula. Nunc malesuada hendrerit rhoncus. Morbi vitae risus eget neque egestas condimentum. Vivamus sed felis lorem, et ultricies quam. Maecenas interdum tellus vitae risus egestas blandit. Maecenas vel ligula a nibh adipiscing aliquet at sed diam. Etiam non magna libero. Aliquam porttitor, erat in eleifend pulvinar, mi dolor luctus turpis, eu ultrices risus nisi a dolor. Donec tristique adipiscing purus, at dapibus dui congue et.

Phasellus volutpat sodales nunc sodales commodo. Maecenas auctor ante egestas mi lobortis pellentesque mollis nulla rhoncus. Duis eget ultrices mauris. Vivamus ultricies euismod nisi eu viverra. Nulla dui nisl, mollis nec semper sed, egestas et libero. Etiam id turpis risus, in porta augue. Donec id rutrum augue. Phasellus mi sapien, bibendum et fringilla iaculis, congue nec justo.

Source code for this project can be found on github

I used WinSCP to connect and edited the code using TextPad.

There are two primary differences between the inspiration page (see link in the toolbar above) and this tech demo.

• I have added a toolbar.
• By naming all of the div tag classes instead of using defaults you can have other sections without falling into a default behavour.