JSFiddle - React, Tailwind, and code Playground

by bergb

HTML

<html>
	<head>
		<meta charset="utf-8">
		<title>AOS - Animate on scroll library</title>
		<meta name="description" content="AOS - Animate On Scroll library using CSS3">
		<meta name="keywords" content="AOS, animate on scroll, css3 scroll animations, simple scroll animations">
		<meta name="viewport" content="width=device-width">
		<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/aos.css" />
		<!-- <link rel="stylesheet" href="http://localhost:3002/dist/aos.css" /> -->
		
	</head>
	<body>

<section class="section section--code">
			<div class="all">
				
				
        <div class="container">
          <div class="code code--small code--left" data-aos="fade-up">
          <h2 class="section-title">Fade</h2>
					<pre><code class="html">&lt;div data-aos="fade-up">&lt;/div></code></pre>
				</div>
        </div>
      <div class="container">
      
      
				<div class="code code--small code--right" data-aos="fade-down">
          <h2>China</h2>
					<pre><code>&lt;div data-aos="fade-down">&lt;/div></code></pre>
				</div>
      </div>
        <div class="container">
				<div class="code code--small code--left" data-aos="fade-right">
            <span class="line-right"></span>
           <h2>USA</h2>
					<pre><code>&lt;div data-aos="fade-right">&lt;/div></code></pre>
				</div>
        </div>
				
 <div class="container">
				<div class="code code--small code--left" data-aos="fade-right">
            <span class="line-right"></span>
           <h2>USA</h2>
					<pre><code>&lt;div data-aos="fade-right">&lt;/div></code></pre>
				</div>
        </div>
			</div>
		</section>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>

<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
		<!-- <script src="http://localhost:3002/dist/aos.js"></script> -->

		<script>
			AOS.init({
				easing: 'ease-out-back',
				duration:...

CSS

section:before {
  content:'';
  border-right: 4px dotted #333;
  height:10000px;
  position: fixed;
  left: 50%;
  margin-left: -4px;
}
.container {
  margin: 0 auto;
  max-width: 1700px;
  height:200px;
}
.container:nth-child(odd) .code {
  float:left;
}
.container:nth-child(even) .code {
  float:right;
}
.code {
  border: 1px solid blue;
  height: 200px;
  display:block;
  margin: 0 auto;
  width: 50%;
  position: relative;
  margin-top:-30px;
 
}
.code:nth-child(odd) {
  background: red;
 
 
}
.code:nth-child(even){
  background: green;
  
  
}
.code:nth-child(even) .line-right  {
  position: relative;
  left: -20%;
  content:'';
  display:block;
  border-bottom: 4px dotted #333;
  width: -20%;
}
.code:nth-child(even) h2:before{

}