JSFiddle - React, Tailwind, and code Playground

by Jens Grochtdreis

HTML

<script src="http://grochtdreis.de/fuer-jsfiddle/js/jquery.tabs.min.js"></script>
<div class="jquery_tabs">
    	<h4>Topic A</h4>

    <div class="tabbody">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A modi itaque ullam assumenda quis laudantium dolore repellendus tempore repudiandae nulla magnam ea quam soluta pariatur aliquid? Provident mollitia ut velit.</p>
        <p>Impedit aliquid voluptas enim architecto consequuntur ratione nemo minus reprehenderit eius consequatur laudantium possimus animi ab eligendi vitae officiis assumenda quibusdam eveniet doloribus nobis neque ducimus suscipit reiciendis veniam non.</p>
        <p>Quam maxime vero expedita quos placeat cupiditate nesciunt deleniti amet minima iusto voluptates debitis voluptatem sit fugit beatae et eius provident facilis at praesentium perspiciatis laboriosam reprehenderit culpa excepturi eveniet.</p>
    </div>
    	<h4>Topic B</h4>

    <div class="tabbody">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facere quis beatae voluptas consequatur nostrum deserunt quo dolore ducimus vel tempora quae facilis animi ratione architecto magni assumenda id blanditiis!</p>
        <p>Quo dicta numquam veritatis cumque beatae deleniti praesentium labore maiores quam magni accusantium architecto sunt ut minus accusamus sequi officiis. Voluptates vero accusantium maxime odio rerum eum temporibus excepturi cumque.</p>
        <p>Nulla facilis corporis repellat adipisci autem ad fugit expedita unde veritatis accusantium? A quis vero eos expedita tenetur earum aliquam dolor rerum recusandae rem illo perferendis maiores sit facere quasi.</p>
        <p>Molestiae quos aperiam magni reprehenderit aliquam iure recusandae nisi molestias vitae accusantium maxime non labore illum delectus dolorum totam sit eos quod amet pariatur harum esse voluptatum! Totam deserunt ex.</p>
    </div>
     <h4>Topic C</h4>

    <div class="tabbody">
        <p>Lorem ipsum dolor sit...

SCSS

@media screen {
	.jquery_tabs {
		margin:0 0 1.5em 0;

		ul.tabs-list {
			font-size: 1em;
			display:table;
			table-layout:fixed;
			list-style-type:none;
			margin: 0;
			position:relative;
			z-index:1;

			li {
				margin: 0 4px 0 0;
				border:0 none;
				display:inline;
				float:left;
				padding:0;

				a {
					font-size: 1em;
					line-height: 1.5;
					padding: 0.75em;
					background: transparent;

					display:block;
					float:left;
					font-weight:normal;
					margin:0;

					&:focus,
					&:hover,
					&:active {
						background:#eee;
						border-radius: 0.2em 0.2em 0 0;
						color:#000;

						font-weight:normal;
						outline: 0 none;
						text-decoration:none;
					}
				}

				&.current {
					a,
					a:focus,
					a:hover,
					a:active {
						background:#fff;
						border:1px #ccc solid;
						border-radius:0.2em 0.2em 0 0;
						color:#000;

						border-bottom:0 none;
						font-weight:bold;
						text-decoration:none;
					}
				}
			}
		}

		.content {
			border-top: 1px #ccc solid;

			clear:both;
			padding: 0;
			position:relative;
			top:-1px;
			margin-bottom:-1px;
		}
	}

	/* hiding texts visually */
	.jquery_tabs .tabhead {
		position:absolute;
		left:-32768px; // LTR
	}
	.jquery_tabs .current-info,
	.jquery_tabs .accessibletabsanchor {
		left:-999em;
		position:absolute;
	}

   /** Avoid margin collapsing to enable correct sync of all tabs
    *
    * @workaround
    * @affected all browsers
    * @css-for all browsers
    * @valid yes
	*/

	.jquery_tabs .tab-content {
		border-bottom: 1px transparent solid;
		border-top: 1px transparent solid;
		padding-top: 1.5em;
		*overflow:hidden;
	}

	/** Containing floats adjustment and stability fixes for Internet Explorer
	 *
	 * @workaround
	 * @affected IE 5.x/Win, IE6, IE7
	 * @css-for IE 5.x/Win, IE6, IE7
	 * @valid no
	 */

	* html .jquery_tabs {
		zoom:1;
		width:auto;
		position:relative;

		// IE < 7 don't support transparent borders
	 	.tab-content {
			border-bottom: 1px...

JavaScript

$(document).ready(function(){
	$(".jquery_tabs").accessibleTabs();
});